一、盒子模型
- 什么是css盒子模型
css中的盒子模型僅僅是一個(gè)形象的比喻，HTML中所有的標(biāo)簽都是盒子
在HTML中所有的標(biāo)簽都可以設(shè)置：
寬度/高度 == 指定可以存放內(nèi)容的區(qū)域
內(nèi)邊距 == 填充物
邊框 == 手機(jī)盒子自己
外邊框 == 盒子與盒子之間的間隙
二、盒子模型的寬度和高度
- 內(nèi)容的寬度和高度
- 通過(guò)標(biāo)簽的width/height屬性設(shè)置的寬度和高度；
- 元素的寬度和高度
- 寬度= 左邊框 + 左內(nèi)邊距 + width + 右邊內(nèi)距 + 右邊框
- 高度=同理可證
- 元素空間的寬度和高度
- 寬度=左外邊框+左邊框 + 左內(nèi)邊距 + width + 右邊內(nèi)距 + 右邊框+右外邊框
- 高度=同理可證
三、盒子的box-sizing 屬性
- css3中新增了一個(gè)box-sizing屬性，這個(gè)屬性可以保證我們給盒子新增padding 和border之后，盒子元素的寬度和高度不變。
- box-sizing屬性是如何保證增加padding和border之后，盒子元素的寬度和高度不變？
- 是通過(guò)減去一部分內(nèi)容的寬度和高度
- box-sizing的取值：
3.1 content-box：
元素的寬高= 邊框+內(nèi)邊距+內(nèi)容寬高
3.2 border-box：（元素的大小不會(huì)改變）
元素的寬高=width/height屬性設(shè)置的數(shù)值
注意點(diǎn)：
- 如果兩個(gè)盒子是嵌套關(guān)系，那么設(shè)置了里面的一個(gè)盒子的頂部外邊框，外面的盒子也會(huì)被頂下來(lái)。
2.如果外面的盒子不想被一起頂下來(lái)，納悶可以給外面的盒子添加一個(gè)邊框?qū)傩浴?/li> - 在企業(yè)開發(fā)中一般情況下如果需要控制嵌套靠關(guān)系盒子之間的距離，應(yīng)該首先考慮padding，其次考慮margin，因?yàn)閙argin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的。
- 在嵌套關(guān)系的盒子中，我們可以利用margin：0 auto的方式來(lái)讓里面盒子在外面的盒子中水平居中。margin:0 auto；只是對(duì)水平方向有效，對(duì)垂直方向無(wú)效。
四、盒子居中和內(nèi)容居中
- text-align:center 和 margin:0 auto 的區(qū)別
- text-align:center： 是讓盒子中的文字/圖片居中顯示
- margin:0 auto ：是讓盒子自己居中顯示
五、清除默認(rèn)邊距（外邊距和內(nèi)邊距）
- 為什么要清空默認(rèn)邊距
- 在企業(yè)開發(fā)中，為了更好的控制盒子的寬高和計(jì)算盒子的寬高等等，所以在企業(yè)開發(fā)中，編寫代碼之前第一件事情就是清空默認(rèn)的邊距。
- 如何清空默認(rèn)的邊距？
*{
margin:0;
padding:0;
}
通配符選擇器會(huì)遍歷當(dāng)前界面所有的標(biāo)簽，所以性能不好。
企業(yè)開發(fā)中可以從這個(gè)網(wǎng)址中拷貝：
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
六、行高和字號(hào)
- 什么是行高
- 在css中，所有的行，都是有行高的。
- line-height: 2px.：行高。
注意點(diǎn)：
- 行高和元素的高度不一樣。
規(guī)律
- 文字在行高中默認(rèn)是垂直居中的；
- 在企業(yè)開發(fā)中，我們經(jīng)常將盒子的高度和行高設(shè)置為一樣，那么就可以保證一行文字在盒子的高度中是垂直居中的，簡(jiǎn)而言之就是：要想一行文字在盒子中垂直居中，那么只需要設(shè)置這行文字的行高等于盒子的高即可。
- 在企業(yè)中開發(fā)中，如果一個(gè)盒子中有多行文字，那么我們就不能使用設(shè)置行高等于盒子高來(lái)實(shí)現(xiàn)讓文字垂直居中，只能通過(guò)設(shè)置padding來(lái)讓文字居中。
七 、還原字體和字號(hào)
注意點(diǎn)
- 在企業(yè)開發(fā)中，如果一個(gè)盒子中存儲(chǔ)的是文字，那么一般情況下，我們會(huì)以盒子左邊的內(nèi)邊距為基準(zhǔn)，不會(huì)以右邊的內(nèi)邊距為基準(zhǔn)，因?yàn)橛疫叺膬?nèi)邊距有誤差。
- 右邊邊距的誤差從何而來(lái)？因?yàn)橛疫吶绻挪幌乱粋€(gè)文字，那么文字就會(huì)換行顯示，這樣導(dǎo)致右邊的會(huì)有誤差。
- 頂部的內(nèi)邊距并不是邊框到文字頂部的距離，而是邊框到行高頂部的距離。
八、文章界面
1、開始寫網(wǎng)頁(yè)的步驟
- 1.1 清空所有的邊距
- 1.2 從外到內(nèi)，從上到下的編寫網(wǎng)頁(yè)代碼
