在認識了基本css后，我們今天再來講解幾個屬性、選擇器，然后再看看css盒子模型，以及一些問題。
css屬性進擊
- 文字的一些屬性
- text-align 文字水平對齊方式，center/left/right
- text-indent 文字首行縮進
- font-style 文字傾斜，默認normal（標(biāo)準(zhǔn)字體樣式）、italic（斜體）、oblique（傾斜）
- 文字的幾個屬性還可以同時設(shè)置，font:font-style font-variant font-weight font-size/line-height font-family;必須按順序?qū)?，若其中有值沒有設(shè)置，則會使用其默認值。
- 列表自帶的list-style
由于列表會自帶一定的樣式，所以一般會先清除樣式,list-style:none;,再自己進行樣式的添加：
- list-style-type 表項標(biāo)記類型
- list-style-position 標(biāo)記的放置位置
- list-style-image 設(shè)置圖像為表項標(biāo)記
- 也可以合起來寫，list-style:list-style-type list-style-position list-style-image;
- 元素溢出
當(dāng)子元素的尺寸大于父元素時，子元素就會溢出。解決這個問題就會引入overflow這個屬性了。
- overflow有4個值
- overflow: visible; 默認值，內(nèi)容不會被裁剪。
- overflow: hidden; 內(nèi)容裁剪，超出部分不可見。
- overflow: scroll; 內(nèi)容裁剪，瀏覽器顯示滾動條來查看其他內(nèi)容。
- overflow: auto; 只有內(nèi)容被裁剪，才會顯示滾動條來查看其他內(nèi)容。
盒子模型
盒子模型分為兩種：
- 標(biāo)準(zhǔn)w3c盒子模型
- IE盒子模型
標(biāo)準(zhǔn)w3c盒子模型
直接上圖就能明白了
標(biāo)準(zhǔn)盒子模型
從圖中可以看出內(nèi)容content部分不包含其他部分。
IE盒子模型
來個圖
IE盒子模型
可以看出，內(nèi)容部分還包含了padding和border。
那么問題來了，怎么知道選用的是什么盒子模型呢？其實很簡單，只需要在代碼頂部加上DOCTYPE聲明，瀏覽器就會使用標(biāo)準(zhǔn)盒子模型解釋盒子了。
margin垂直外邊距合并和塌陷問題
- 垂直外邊距合并
問題描述：當(dāng)兩個垂直外邊距相遇的時候，就只會形成一個外邊距，合并后的外邊距為兩個外邊距中較大的那一個。
解決方法：
- 給父容器設(shè)置一個border/padding，均不能為0.
- 給父容器設(shè)置屬性，overflow:hidden;或者overflow:auto;
- 浮動float：left；或者float：right；
- 定位position：absolute；
- 子容器設(shè)置屬性display:inline-block;或者display:inline-table;
- 塌陷
問題描述：盒子嵌套時，里面盒子設(shè)置的margin-top會加到外面盒子上，導(dǎo)致內(nèi)部盒子設(shè)置失敗。
解決方法：
- 父容器設(shè)置邊框
- 父容器overflow：hidden
- 一個高級一點的用法，.clearfix:before{content: '';display:table;}，需要使用的地方加上class="clearfix"即可。
好了，到此結(jié)束，多動手敲敲，看看效果。
