> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-7-29-8.md).

# Day 7 - 29/8

CSS

1. `z-index`: an index specified the order of overlapping elements (only works with"positioned" ones and "flex" ones). An element with greater z-index will overlap those with less z-index. Two everlapping elements without z-index will display with the last one (compare the positions in CSS file) on top
2. `.clearfix::after {content: ""; clear: both; display: table;}` : to fix when a floating element is higher than the container which leads to overflow
3. Four ways to vertically center 

* set line-height = height and use text-align

`.class { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; }`

* when there are multiple lines

`.class p { line-height: 1.5; display: inline-block; vertical-align: middle; }`

* using position and transform

`.center { height: 200px; position: relative; border: 3px solid green; }`

`.center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }`

* using flexbox

`.center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }`

4. `opacity`: the transparency of an element from 0.0 to 1.0; when opacity is applied to background of an element, all the child will be affected, instead, we use RGBA color to set opacity with the last index is opacity. (ex: `background: rgba(76, 175, 80, 0.3))`
5. Attribute selector: to style elements with specific attribute

* `[attribute]` : elements have this attribute: `a[target]`
* `[attribute = ""]`: elements have specific value: `a[target="_blank"]`
* `[attribute~="value"]`: elements has attribute with an exactly specified word in value with not even one sign next to it: `[title~="flower"]`
* `[attribute|="value"]`: value can follow by a "-" : `[class|="top"]`       'top-student' still counted
* `[attribute^="value"]`: value start with a specified value, even with no space between      `[class^="top"]`
* `[attribute$="value"]`: value end with a specified value, even with no space between `[class$="test"]`
* `[attribute*="value"]`: value contain a specified value, even with no space between `[class*="te"]`

Useful in styling form without using class

6.