每天一句：99分和100分的區(qū)別是在于叔锐，滿(mǎn)分只有100分挪鹏。
一、元素類(lèi)型
根據(jù)CSS現(xiàn)實(shí)分類(lèi)愉烙，XHTML可以分為: 塊狀元素讨盒、行內(nèi)元素、行內(nèi)塊元素步责、可變?cè)?
二返顺、塊元素block
> 塊狀元素在網(wǎng)頁(yè)中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區(qū)域;
> 常用元素有div/dl/dt/dd/ol/ul/fieldset/h1~h6/form/hr/colgroup/col/table/tr/td....;
> 默認(rèn)情況下蔓肯，塊狀元素都會(huì)占據(jù)一行;
> 塊狀元素都可以定義自己本身的寬度和高度;
> 塊狀元素一般為其他元素的容器遂鹊，可以容納其他元素，也是比喻為盒子;
三蔗包、行內(nèi)元素inline(內(nèi)聯(lián)元素)
> 常見(jiàn)的內(nèi)聯(lián)元素a/span/i/em/strong/b/del...;
> 內(nèi)聯(lián)元素的邊線(xiàn)形式是始終以行內(nèi)逐個(gè)進(jìn)行顯示;
> 內(nèi)聯(lián)元素沒(méi)有自己的形狀秉扑，不能定義寬度和高度，只能根據(jù)內(nèi)容的高度和寬度來(lái)確定调限，它的最小內(nèi)容單元也會(huì)呈現(xiàn)矩形形狀;
> 內(nèi)聯(lián)元素也會(huì)遵守盒模型基本規(guī)則舟陆，如可以定義padding/border/margin/background等屬性，但個(gè)別屬性不能正常顯示;(padding-left/padding-right可以使用);
四耻矮、行內(nèi)塊元素inline-block(內(nèi)聯(lián)塊元素)
> 常見(jiàn)元素img/input秦躯；
> 行內(nèi)塊元素，是行內(nèi)逐個(gè)顯示裆装；
> 行內(nèi)塊元素踱承，還可以設(shè)置寬度和高度；
五哨免、元素類(lèi)型轉(zhuǎn)換
> display: block; 塊狀元素: 類(lèi)似在元素后面添加換行符茎活，也就是說(shuō)其他元素不能再其后面并列顯示;
> display: inline; 內(nèi)聯(lián)元素: 在元素后面刪除換行符，多個(gè)元素可以在一行內(nèi)并列顯示;
> display: inline-block; 內(nèi)聯(lián)塊元素: 元素的內(nèi)容以塊狀顯示琢唾，行內(nèi)的其他元素顯示在同一行载荔；
> display: none; 此元素不會(huì)被顯示;
備注:
> 當(dāng)元素設(shè)置float屬性后，就相當(dāng)于給該元素加了display: block;屬性;
六慧耍、水平居中設(shè)置技巧
- 內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素都是可以通過(guò)text-align設(shè)置改變水平對(duì)齊方式的，但是塊元素不起效果;
- 塊元素如果要設(shè)置為居中丐谋，必須得用margin: 0 auto;
七芍碧、垂直居中設(shè)置技巧
原理: 讓span標(biāo)簽作為a標(biāo)簽居中的基線(xiàn)參考(inline-block支持text-align和vertical-align屬性)
0、a和span設(shè)置為內(nèi)聯(lián)塊元素(vertical-align才有效)
1号俐、a標(biāo)簽垂直居中vertical-align: middle;
2泌豆、span標(biāo)簽垂直居中vertical-align: middle;
3、span標(biāo)簽高度與父元素一致height: 100%;
4吏饿、span只是參考踪危，不需要顯示width: 0;
八蔬浙、邊框設(shè)置技巧(九宮格)
九宮格效果
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 204px;
height: 200px;
margin: 30px auto;
/*border: 1px solid gray;*/
}
li{
width: 50px;
height: 50px;
border: 1px solid gray;
float: left;
list-style: none;
/* 邊框設(shè)置技巧*/
margin: -1px 0 0 -1px;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
