每天一句：99分和100分的區(qū)別是在于跷跪，滿分只有100分。
一齐板、元素類型
根據(jù)CSS現(xiàn)實(shí)分類吵瞻，XHTML可以分為: 塊狀元素、行內(nèi)元素甘磨、行內(nèi)塊元素橡羞、可變?cè)?
二、塊元素block
> 塊狀元素在網(wǎng)頁中就是以塊的形式顯示济舆，所謂塊狀就是元素顯示為矩形區(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)元素)
> 常見的內(nèi)聯(lián)元素a/span/i/em/strong/b/del...;
> 內(nèi)聯(lián)元素的邊線形式是始終以行內(nèi)逐個(gè)進(jìn)行顯示;
> 內(nèi)聯(lián)元素沒有自己的形狀齐邦，不能定義寬度和高度，只能根據(jù)內(nè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)塊元素)
> 常見元素img/input丐吓；
> 行內(nèi)塊元素，是行內(nèi)逐個(gè)顯示璧诵；
> 行內(nèi)塊元素汰蜘，還可以設(shè)置寬度和高度；
五之宿、元素類型轉(zhuǎn)換
> display: block; 塊狀元素: 類似在元素后面添加換行符族操，也就是說其他元素不能再其后面并列顯示;
> 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)塊元素都是可以通過text-align設(shè)置改變水平對(duì)齊方式的枷莉，但是塊元素不起效果;
- 塊元素如果要設(shè)置為居中，必須得用margin: 0 auto;
七尺迂、垂直居中設(shè)置技巧
原理: 讓span標(biāo)簽作為a標(biāo)簽居中的基線參考(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>
作者：西門奄
鏈接：http://www.reibang.com/u/77035eb804c3
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處祭陷。
