1、盒模型的初步認識
一個真正的盒子包括：內容寬落剪，內容高输玷，邊框，內邊距楔敌，外邊距
width：內容寬
height：內容高
padding：內邊距
border：邊框
margin：外邊距
內容部分：內容寬width啤挎，內容高height
盒子占有的位置：
寬=width+padding-left+padding-right+border2
高=height+padding-top+padding-bottom+border2
例：
div{
width:470px;
height:370px;
padding: 10px;
border:5px solid #333;
margin:10px;
}
渲染background-color/background-image的位置：border以內
實際工作中，給出的一般是盒子真正占有的寬或者高，需要手動計算出內容寬或者內容高庆聘。
2胜臊、padding
padding是一個復合屬性，可以按照方向進行劃分伙判。四個方向可以不同值象对。
padding-left
padding-right
padding-top
padding-bottom
可以直接書寫復合屬性：
四值法：
padding：10px 20px 30px 40px; （上，右宴抚，下勒魔，左）
三值法：
padding：10px 20px 30px; (上，左右菇曲，下）（左取右的值20px）
二值法：
padding：10px 20px; （上下冠绢，左右）
單值法：
padding:10px;（上下左右一個值）
一般使用單值法書寫主要padding，特殊方向的內邊距再單獨設置常潮。（利用層疊性）
3弟胀、margin
外邊距，兩個盒子之間的距離喊式。
復合屬性孵户，可以按照方向進行劃分。四個方向可以不同值岔留。
margin-left:
margin-right:
margin-top:
margin-bottom:
可以直接書寫復合屬性：
四值法：
margin：10px 20px 30px 40px; （上夏哭，右，下献联，左）
三值法：
margin：10px 20px 30px; (上竖配，左右，下）（左取右的值20px）
二值法：
margin：10px 20px; （上下里逆，左右）
單值法：
margin:10px;（上下左右一個值）
一般使用單值法書寫主要margin械念，特殊方向的內邊距再單獨設置。（利用層疊性）
4运悲、border
邊框，復合屬性项钮。
復合屬性寫法：
border：1px solid #333;
線型：
solid 實線
dashed 虛線
dotted 點線
double 雙線 班眯，取決于線寬，線寬至少3px
groove 邊框凹槽效果
ridge 邊框凸起效果
inset 內容區(qū)域凹陷效果
outset 內容區(qū)域突出效果
border可以進行拆分：
①按照類型進行劃分烁巫，以下三個屬性值必須寫全：
border-width
border-style
border-color
②按照方向劃分,每個方向上border-width署隘、border-style、border-color三個屬性值也必須寫全
例：
border-left:5px solid #333;
③以上兩種方式的合并（先寫方向亚隙，再寫類型）：
border-left-width:
border-left-style:
border-left-color:
利用border書寫小三角：
<div class="box"></div>
.box{
width: 0;
height: 0;
border:30px solid #fff;
border-top-color:red;
border-bottom:none; //可以不設置該條屬性值磁餐，設置了該條屬性值可以減小一半小三角占的位置。
}
④border-collapse:
屬性值：
separate：默認值，分離诊霹；
collapse:塌陷羞延，制作單線表格。
table,tr,td{
border: 1px solid #000;
border-collapse: collapse;
}
td{
width:50px;
height: 30px;
}
二脾还、盒模型拓展
1.清除默認樣式
比如body伴箩、ul、li鄙漏、dl嗤谚、p等默認的padding和margin；
ul前的小圓點怔蚌，ol前的數(shù)字巩步；
a標簽的下劃線。
書寫css第一步先清除默認樣式桦踊。
/*清除默認樣式*/
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
2椅野、寬度剩余法
一般在設置樣式時，左內邊距是確定的钞钙，右側根據(jù)內容的不同剩余的右內邊距不確定鳄橘。利用寬度剩余法，直接給盒子一個足夠的寬度芒炼，左內邊距需要設置瘫怜，右側根據(jù)內容的多少剩余多少就是多少。
例：
<ul>
<li>你是哪里人</li>
<li>為什么那么多人要去南方</li>
<li>到底哪里的人最熱情好客是不是哈哈哈哈或</li>
<li>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</li>
<li>的點點滴滴多</li>
</ul>
ul{
width:500px;
list-style: none;
padding-left: 10px;
padding-right: 0; //該條屬性值可以不設置本刽，不影響
border: 1px solid #000;
}
3鲸湃、height
書寫頁面時通常不設置height，直接利用內容高撐開盒子的高度子寓“堤簦“通常”指的是書寫新聞頁面等內容時多時少的情況下斜友。
4炸裆、margin
1.margin垂直方向的塌陷
模型：有兩個上下排列的盒子，上盒子有一個下margin鲜屏，下盒子有一個上margin烹看。兩個盒子的間距不是他們的margin之和。因為有垂直方向的塌陷洛史，小margin會塌陷在大margin里惯殊，兩個盒子的間距取大margin值。如果兩個margin值相同也殖，兩個盒子的間距取一個margin值土思。
2、不能用兒子去踹父親（margin-top）
一組嵌套的盒子，子盒子和父盒子之間想設置上邊距己儒，不能用子盒子的margin-top設置崎岂。因為子盒子會帶著父盒子一起距離瀏覽器有一個距離。
例：
<div class="box1">
<div class="box2"></div>
</div>
.box1{
width:300px;
height: 300px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
}
解決辦法：
①強制限制父盒子的區(qū)域
.box1{
width:300px;
height: 300px;
background-color: green;
border: 1px solid #000;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
}
②用父盒子的padding去擠址愿。
.box1{
width:300px;
height: 300px;
background-color: green;
padding-top: 20px;
/*border: 1px solid #000;*/
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
/*margin-top: 20px;*/
}
3该镣、盒子的水平居中
子盒子的水平居中：
margin：0 auto;（auto會自動撐開到最大值且左右margin值相同）
盒子居中：
margin：0 auto;（上下值不一定是0，盒子一定要有寬度才能這樣設置）
4响谓、居中
文本居中：
多行文本垂直居中：不要設置父盒子的高损合，讓內容撐開父盒子的高度；設置父盒子的上下padding值相同娘纷。
單行文本垂直居中：行高等于盒子的高度嫁审。
文本水平居中（不區(qū)分是否是單行）：text-align:center;
盒子居中：
子盒子的水平居中：子盒子必須設置寬度；子盒子margin：0 auto;（上下值不一定是0）赖晶。
子盒子的垂直居中：不設置父盒子的高度律适，給父盒子設置相同的上下padding值。
5遏插、父子盒模型
在父子盒模型中捂贿，子盒子的實際占有寬度不能超過父盒子內容寬width。如果子盒子有padding或者border胳嘲，需要在父盒子內容寬width基礎上內減厂僧。
