在認(rèn)識(shí)了基本css后假栓，我們今天再來講解幾個(gè)屬性年鸳、選擇器，然后再看看css盒子模型赌蔑，以及一些問題俯在。
css屬性進(jìn)擊
- 文字的一些屬性
- text-align 文字水平對齊方式，center/left/right
- text-indent 文字首行縮進(jìn)
- font-style 文字傾斜娃惯，默認(rèn)normal（標(biāo)準(zhǔn)字體樣式）跷乐、italic（斜體）、oblique（傾斜）
- 文字的幾個(gè)屬性還可以同時(shí)設(shè)置趾浅，font:font-style font-variant font-weight font-size/line-height font-family;必須按順序?qū)戙堤幔羝渲杏兄禌]有設(shè)置，則會(huì)使用其默認(rèn)值皿哨。
- 列表自帶的list-style
由于列表會(huì)自帶一定的樣式浅侨，所以一般會(huì)先清除樣式,list-style:none;,再自己進(jìn)行樣式的添加：
- list-style-type 表項(xiàng)標(biāo)記類型
- list-style-position 標(biāo)記的放置位置
- list-style-image 設(shè)置圖像為表項(xiàng)標(biāo)記
- 也可以合起來寫，list-style:list-style-type list-style-position list-style-image;
- 元素溢出
當(dāng)子元素的尺寸大于父元素時(shí)证膨，子元素就會(huì)溢出如输。解決這個(gè)問題就會(huì)引入overflow這個(gè)屬性了。
- overflow有4個(gè)值
- overflow: visible; 默認(rèn)值央勒，內(nèi)容不會(huì)被裁剪不见。
- overflow: hidden; 內(nèi)容裁剪，超出部分不可見崔步。
- overflow: scroll; 內(nèi)容裁剪稳吮，瀏覽器顯示滾動(dòng)條來查看其他內(nèi)容。
- overflow: auto; 只有內(nèi)容被裁剪井濒，才會(huì)顯示滾動(dòng)條來查看其他內(nèi)容灶似。
盒子模型
盒子模型分為兩種：
- 標(biāo)準(zhǔn)w3c盒子模型
- IE盒子模型
標(biāo)準(zhǔn)w3c盒子模型
直接上圖就能明白了
標(biāo)準(zhǔn)盒子模型
從圖中可以看出內(nèi)容content部分不包含其他部分慎陵。
IE盒子模型
來個(gè)圖
IE盒子模型
可以看出，內(nèi)容部分還包含了padding和border喻奥。
那么問題來了席纽，怎么知道選用的是什么盒子模型呢？其實(shí)很簡單撞蚕，只需要在代碼頂部加上DOCTYPE聲明润梯，瀏覽器就會(huì)使用標(biāo)準(zhǔn)盒子模型解釋盒子了。
margin垂直外邊距合并和塌陷問題
- 垂直外邊距合并
問題描述：當(dāng)兩個(gè)垂直外邊距相遇的時(shí)候甥厦，就只會(huì)形成一個(gè)外邊距纺铭，合并后的外邊距為兩個(gè)外邊距中較大的那一個(gè)。
解決方法：
- 給父容器設(shè)置一個(gè)border/padding刀疙，均不能為0.
- 給父容器設(shè)置屬性舶赔，overflow:hidden;或者overflow:auto;
- 浮動(dòng)float：left；或者float：right谦秧；
- 定位position：absolute竟纳；
- 子容器設(shè)置屬性display:inline-block;或者display:inline-table;
- 塌陷
問題描述：盒子嵌套時(shí)，里面盒子設(shè)置的margin-top會(huì)加到外面盒子上疚鲤，導(dǎo)致內(nèi)部盒子設(shè)置失敗锥累。
解決方法：
- 父容器設(shè)置邊框
- 父容器overflow：hidden
- 一個(gè)高級一點(diǎn)的用法，.clearfix:before{content: '';display:table;}集歇，需要使用的地方加上class="clearfix"即可桶略。
好了，到此結(jié)束诲宇，多動(dòng)手敲敲际歼，看看效果。
