盒子 box-sizing 屬性
- CSS3 中新增了一個(gè) box-sizing 屬性，這個(gè)屬性可以保證我們給盒子新增 padding 和 border 之后愕贡，盒子元素的寬度和高度不變
- box-sizing 屬性是如何保證增加 padding 和 border 之后挫以，盒子元素的寬度和高度不變
和我們前面學(xué)習(xí)的原理一樣，增加 Padding 和 border 之后要想保證盒子元素的寬高不變，那么就必須減去一部分內(nèi)容的寬度和高度 - box-sizing 取值
- content-box
元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容的寬高 - border-box
元素的寬高 = width/height
盒子模型練習(xí)中的注意點(diǎn)
如果兩個(gè)盒子是嵌套關(guān)系驮宴，那么設(shè)置了里面一個(gè)盒子頂部的外邊距，外面一個(gè)盒子也會(huì)被頂下來
如果外面的盒子不想被一起頂下來呕缭，那么可以給外面的盒子添加一個(gè)邊框?qū)傩?/p>
在企業(yè)開發(fā)中堵泽，一般情況下如果需要控制嵌套關(guān)系盒子之間的舉例，應(yīng)該首先考慮 padding恢总，其次再考慮 margin
margin 本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的在嵌套關(guān)系的盒子中迎罗，我們可以利用 margin:0 auto; 的方式來讓連里面的盒子在外面的盒子中水平居中
margin:0 auto; 只對(duì)水平方向有效，對(duì)垂直方向無效片仿，垂直方向用 Padding 來控制
margin:150px auto;
盒子居中和內(nèi)容居中
- text-align:center; 和 margin:0 auto;的區(qū)別
text-align:center;zuo用設(shè)置盒子中存儲(chǔ)的文字/圖片/水平居中
margin:0 auto;作用讓盒子自己水平居中
清空默認(rèn)邊距
- 為什么要清空默認(rèn)邊距（外邊距和內(nèi)邊距）
在企業(yè)開發(fā)中為了更好的控制盒子的寬高和計(jì)算盒子的寬高等等纹安，所以在企業(yè)開發(fā)中，編寫代碼之前第一件事情就是清空默認(rèn)的邊距 - 如何清空默認(rèn)的邊距
格式
*{
margin:0;
padding:0;
}
注意點(diǎn)
通配符選擇器會(huì)找到（遍歷）當(dāng)前界面中所有的標(biāo)簽砂豌，所以性能不好厢岂，企業(yè)開發(fā)中可以從這個(gè)網(wǎng)址中拷貝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
行高和字號(hào)
- 什么是行高
在 CSS 中所有的行都有自己的行高
注意點(diǎn)：
行高和盒子高不是同一個(gè)概念
行高指的是每行內(nèi)容的高度
盒子高指的是元素的高度
規(guī)律
- 文字在行高中默認(rèn)是垂直居中的
- 在企業(yè)開發(fā)中我們經(jīng)常將盒子的高度和行高設(shè)置為一體，那么這樣就可以保證一行文字在盒子的高度中是垂直居中的
簡(jiǎn)而言之就是：
要想一行文字在盒子中垂直居中阳距，那么只需要設(shè)置這行文字的"行高等于盒子的高"即可 - 在企業(yè)開發(fā)中如果一個(gè)盒子中有多行文字塔粒，那么我們就不能使用設(shè)置行高等于盒子高來實(shí)現(xiàn)讓文字垂直居中，只能通過設(shè)置 padding 來讓文字居中
還原字體和字號(hào)
注意點(diǎn)
- 如果一個(gè)盒子中存儲(chǔ)的是文字娄涩，那么一般情況下我們會(huì)以盒子左邊的內(nèi)邊距為基準(zhǔn)窗怒，不會(huì)以右邊的內(nèi)邊距為基準(zhǔn)，因?yàn)檫@個(gè)右邊的內(nèi)邊距有誤差
- 右邊內(nèi)邊距的誤差從何而來蓄拣？
因?yàn)橛疫吶绻挪幌乱粋€(gè)文字扬虚，那么文字就會(huì)換行顯示，所以文字和內(nèi)邊距之間的舉例就有了誤差 - 頂部的內(nèi)邊距并不是邊框到文字頂部的距離球恤，而是邊框到行高頂部的距離
文章界面
- 清空所有的邊距
- 從外到內(nèi)辜昵，從上到下的編寫網(wǎng)頁
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
body{
background-color: #efefef;
}
div{
margin:0 auto;
box-sizing: border-box;
width: 372px;
height: 232px;
border: 1px solid #666;
padding: 15px;
}
h1{
font-family:"微軟雅黑";
font-size: 18px;
border-bottom: 1px solid #666;
padding-bottom: 10px;
}
span{
font-size: 14px;
}
ul{
list-style: none;
margin-top: 10px;
}
ul li{
line-height: 30px;
border-bottom: 1px dashed #666;
font-family:"微軟雅黑";
font-size: 12px;
color: #242424;
padding-left: 20px;
}
</style>
