一、CSS盒模型
1饺藤、元素分類：html標簽中元素分為塊狀元素哭尝、內(nèi)聯(lián)元素（行內(nèi)元素）和內(nèi)聯(lián)塊狀元素驹吮。
常用塊狀元素：
<div> <p> <h1> <ol> <ul> <table> <address> <blockquote> <form> <dl>
常用內(nèi)聯(lián)元素：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用內(nèi)聯(lián)塊狀元素：
<img> <input>
（1）塊狀元素
將元素顯示/轉(zhuǎn)換為塊狀元素：
a{display:block;}
塊狀元素特點：
a）每個塊狀元素和其后的元素都要獨占一行
b）元素的高度、寬度贡定、行高和底邊距都可設(shè)置
c）元素寬度不設(shè)置時赋访，默認是它本身父元素的寬度
（2）內(nèi)聯(lián)元素
將元素顯示/轉(zhuǎn)換為內(nèi)聯(lián)元素：
div{
display:inline;
}```
內(nèi)聯(lián)元素特點：
a）和其余元素在一行上
b）元素的高度、寬度缓待、頂部和底邊距不可設(shè)置
c）元素寬度（它包含的文字或圖片寬度）不可改變
（3）內(nèi)聯(lián)塊狀元素（inline-block）
同時具備內(nèi)聯(lián)元素和塊狀元素的特點
>`display:inline-block`
特點：
a）和其他元素在一行上
b）元素高度蚓耽、寬度、行高旋炒、頂和底邊距可設(shè)置
2步悠、盒模型
>以月餅舉例：
月餅盒為一個頁面元素比如<div>
五仁月餅為盒模型里的內(nèi)容（可以是文字、圖片或標簽元素）
4個padding為內(nèi)填充
盒子的邊框為border
盒模型與盒模型的間距為margin
（1）盒模型邊框
邊框可以被設(shè)置粗細瘫镇、樣式鼎兽、顏色
>如：
div{
border:2px solid red;
}
邊框的樣式常見的有：
dashed（虛線）、solid（實線）汇四、dotted（點線）
>也可以只為下邊框設(shè)置樣式：
`div{border-bottom:1px solid red;}`
（2）盒模型寬度和高度
盒模型實際寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界接奈。
>舉個例子：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
元素實際寬度為：10+1+20+200+20+1+10=262
（3）盒模型填充
元素內(nèi)容與邊框之間的距離是填充，寫代碼時有方向：順時針上通孽、右序宦、下、左
`div{padding:20px 10px 15px 30px;}`
如果四個方向填充都為10px背苦，可寫：
`div{padding:10px;}`
如果上下填充為10px互捌，左右填充為20px，可寫：
`div{padding:10px 20px;}`
（4）盒模型邊界
邊界margin是元素與其他元素之間的距離行剂，順序也是上秕噪、右、下厚宰、左
>padding與margin的區(qū)別：
padding在邊框里
margin在邊框外
## 二腌巾、CSS布局模型
>CSS有三種布局模型：
（1）流動模型（Flow）
（2）浮動模型（Float）
（3）層模型（Layer）
（1）流動模型（Flow）
流動模型是默認的網(wǎng)頁布局模式。
有2個典型特征：
1）塊狀元素在所處的包含元素內(nèi)自上而下按順序垂直延伸分布铲觉，默認塊狀元素的寬度為100%澈蝙，以行的形式占據(jù)位置
2）內(nèi)聯(lián)元素會在所處包含元素內(nèi)從左到右水平分布顯示（不會霸占一行）
（2）浮動模型（Float）
元素在默認情況下是不能浮動的，可以使用CSS定義為浮動
>如：定義為左浮動
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
（3）層模型（Layer）
可以讓網(wǎng)頁元素在網(wǎng)頁中精確定位撵幽，像PS中的圖層一樣灯荧。
>層模型的三種形式：
1）絕對定位（position:absolute）
2）相對定位（position:relative）
3）固定定位（position:fixed）
1）絕對定位
將元素從文檔流中拖出來，用left/top/right/bottom屬性相對于其最接近的一個具有定位屬性的父包含快進行絕對定位盐杂，如果不存在這樣的包含塊逗载，就相對于body元素（瀏覽器窗口）哆窿。
>如：
div{
position:absolute;
left:100px;
top:50px
}
表示div元素相對于瀏覽器窗口向右移動100px，向下移動50px
2）相對定位
相對定位的過程是首先按static（float）方式生成一個元素厉斟，然后相對于以前的位置移動挚躯，移動的方向和幅度由上下左右四個屬性確定，偏移前的位置保留不動擦秽。
3）固定定位
固定定位的相對移動坐標是視圖（網(wǎng)頁窗口）秧均，不會隨著瀏覽器窗口的滾動條變化而變化，除非移動瀏覽器窗口的位置或者改變?yōu)g覽器窗口的大小号涯。固定定位不會受文檔流動影響。
4)relative與absolute組合使用
用于不想對于瀏覽器定位锯七，相對于其他元素的定位
>第一步：
參照定位的元素必須是相對定位元素的前輩元素
第二步：
參照定位的元素（前輩元素）加入position:relative
第三步：
定位元素加入position:absolute
如box1是box2的父輩元素
box1{
width:200px;
height:200px
position:relative;
}
box2{
position:absolute;
top:20px;
left:30px
}
## 三链快、CSS代碼縮寫
縮寫可以減少占用的帶寬
1、盒模型代碼縮寫
>三種縮寫方法：
（1）如果top眉尸、right域蜗、bottom、left的值相同
`margin:10px;`
（2）如果top和bottom的值相同噪猾，left和right的值相同
`margin:10px 20px`
（3）如果left和right的值相同
`margin:10px 20px 30px`
2霉祸、顏色值縮寫
當設(shè)置的顏色是16進制的色彩值時，如果每兩位的值相同袱蜡，可以縮寫一半丝蹭。
如：
`p{color:#000000;}`可縮寫為`p{color:#000;}`
再如：
`p{color:#336699;}`可縮寫為：`p{color:#369;}`
3、字體縮寫
（1）縮寫時至少要指定font-size和font-family的屬性坪蚁，其他屬性（如weight奔穿、style、variant敏晤、height）未指定則自動使用默認值贱田。
（2）font-size和line-height之間要加/
>比如：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
可縮寫為：
body{
font:italic small-caps bold 12px/1.5em "宋體",san-serif;
}
## 四、單位和值
1嘴脾、顏色值
>1）英文命令顏色：
`p{color:red;}`
2）RGB顏色：
`p{color:rgb(133,45,200);}`或者`p{color:rgb(20%,33%,25%);}`
3）十六進制顏色：
`p{color:#00ffff;}`
2男摧、長度值
（1）像素
像素指的是顯示器上的笑點（CSS規(guī)范中假設(shè)90px=1英寸）
（2）em
如果font-size為14px，則1em=14px译打，如果font-size為18px耗拓，則1em=18px
（3）百分比
`p{font-size:12px;line-height:130%}`
表示：設(shè)置行高為字體的130%（12*1.3=15.6px）
## 五、CSS樣式設(shè)置小技巧
1扶平、水平居中設(shè)置-行內(nèi)元素
當被設(shè)置元素為文本帆离、圖片時，通過給父元素設(shè)置`text-align:center`實現(xiàn)
>舉例：
html代碼：
<body>
<div class="txtCenter">我要居中</div>
</body>
CSS代碼：
<style>
.txtCenter{
text-align:center;
}
</style>
2结澄、水平居中設(shè)置-定寬塊狀元素
塊狀元素分為定寬和不定寬
定寬元素：設(shè)置左右margin值為auto
>如：
div{
wedth:200px;
margin:20px auto;
}
3哥谷、水平居中總結(jié)-不定寬塊狀元素方法
不定寬塊狀元素：塊狀元素的寬度不固定
>不定寬塊狀元素有三種方法居中：
（1）加入table標簽
（2）設(shè)置display:inline方法
（3）設(shè)置position:relative和left:50%方法
（1）加入table標簽
第一步：為需要居中的元素加入一個table標簽（包括`<tbody> <tr> <td>`）
第二步：設(shè)置左右margin居中
>如
table{
border:1px solid;
margin:0 auto;
}
（2）設(shè)置display:inline方法
改變塊元素dispaly為inline（行內(nèi)元素）岸夯，再用text-align:center
>比如：
<body>
<div class="haha">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>
<style>
.haha{
text-align:center;
}
.haha ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.haha li{
margin-right:8px;
display:inline;
}
</style>
1、2兩種方法對比：
2的優(yōu)勢是不用增加無語義標簽们妥，但由于類型變成行內(nèi)元素猜扮，也無法設(shè)定長度值了。
（3）設(shè)置position:relative和left:50%方法
方法：給父元素設(shè)置float监婶，position:relative和left:50%旅赢，子元素設(shè)置position:relative和left:-50%
>如：
<div class="haha">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
.haha{
float:left;
position:relative;
left:50%
}
.haha ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.haha li{float:left;display:inline;margin-right:8px;}
像這樣就可以讓元素居中了。
3惑惶、垂直居中
垂直居中的兩種情況：父元素高度確定的單行文本煮盼、父元素高度確定的多行文本。
（1）單行文本
設(shè)置父元素的height和line-height使其高度一致带污。
>如：
<div class="haha">
<h1>CHINA</h1>
</div>
.haha{
height: 100px;
line-height: 100px;
background: #999;;
}
這樣僵控，CHINA就是垂直居中的。
（2）多行文本
父元素高度確定的多行文本鱼冀、圖片等豎直居中方法有兩種报破。
方法一：插入table標簽(包括tbody、tr千绪、td)充易，同時設(shè)置vertical-align:middle（垂直居中的屬性）
>如：
<table>
<tbody>
<tr>
<td class="haha">
CHINA
</td>
</tr>
</tbody>
</table>
table td{
height: 500px;
background: #ccc;
vertical-align：middle
}
此時效果圖：
方法二：此方法兼容性較差，IE6荸型、IE7不支持此方法盹靴。
設(shè)置塊級元素display為table-cell（表格單元顯示）、vertical-align:middle
此方法優(yōu)點：不用添加多余無意義標簽
缺點：兼容性不好瑞妇、破壞了原有塊狀元素性質(zhì)
>如：
<div class="haha">
<p>11111</p>
<p>22222</p>
</div>
.haha{
height: 300px;
background: gold;
display:table-cell;
vertical-align: middle;
}
此時效果圖：
4鹉究、隱性改變display類型
當html代碼出現(xiàn)以下兩句之一時，元素display顯示類型就會自動變?yōu)閴K狀元素display:inline-block踪宠，此時可以設(shè)置width和height
1）position:absolute
2）float:left或float:right```
