back mat orm color 需求 isp top 作用 one

text-indent縮進。
px像素，像素是相對單位。1em=1 * font-size=16px(默認是16px)，會根據你的font-size大小變的。所以縮進用
這個就比較好。
text-indent:2em;

1.行級元素，內聯元素 inline
feature:內容決定元素所占位置，不可以通過css改變寬高。
span,strong,em,a,del

2.塊級元素 block
feature:獨占一行，可以通過css改變寬高。

3.行級塊元素 inline-block
feature:內容決定大小，可以改寬高。
img就是行級塊元素，img如果只設置了width的話，它的height會同比例縮放的。

行內元素和塊級元素可以互相轉換的。display:inline display:block display:inline-block


標簽選擇器的作用，初始化標簽，可以把標簽自帶的marign,padding,樣式啥的都去掉。
ul{
list-style: none;
margin: 0;
padding: 0;
}

em{
font-style: normal;
color: #e50000;
}

通配符選擇器:權重為0
*{
margin: 0;
padding: 0;
}

盒子模型:margin padding border content,很多瀏覽器的bod有默認的margin是8px


定位:
CSS的position屬性用於指定元素的定位類型。默認值: static，靜態定位的元素不能使用 top, right, bottom 和 left 屬性進行定位。
absolute絕對定位，脫離文檔流，脫離原來位置進行定位，跑到上面那一
層去了。
relative相對定位，不脫離文檔流，保留原來的位置進行定位。一般被作為參照物。
fixed固定位置，脫離文檔流。

z-index屬性適用於定位元素（position屬性值為 relative 或 absolute 或 fixed的對象），
用來確定定位元素在垂直於顯示屏方向（稱為Z軸）上的層疊順序，
也就是說如果元素是沒有定位的，對其設置的z-index會是無效的

介紹一個元素居中的寫法:背下來。
div{
position:absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
background-color: red;
margin-left: -50px;
margin-top: -50px;
}


margin合並和塌陷的問題:
margin合並:
兄弟結構水平方向的margin正常，但是垂直方向上面的margin會合並，
並且這裏的取到的是較大的一個，一般情況下，margin合並我們可以不處理，合理安排垂直方向的margin就能達到需求效果。

margin塌陷
父子結構的元素，垂直方向上的margin，會取最大那個



BFC: block format context - 塊級格式化上下文，每一個盒子當中都有一套正常的渲染規則，但是我們可以通過一些語法，
來觸發bfc，讓這個盒子的渲染規則不一樣！ 就是這個渲染規則的改變，剛好就解決了margin塌陷的問題，下面是觸發bfc的語法：
position： absolute；
display：inline-block;
float：left / right
overflow: hidden;

float:left/right浮動元素產生了浮動流，
所有產生了浮動流的元素，塊級元素看不到他們，
產生了bfc的元素和文本類屬性(inline)的元素以及文本都能看到浮動
元素。（讓block元素無視float元素，讓inline元素讓流水一樣圍繞著float元素）

css學習筆記一