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;
}
PVE81X0G2I.png
渲染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 内容区域凹陷效果
outset 内容区域突出效果
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前的数字；
a标签的下划线。
书写css第一步先清除默认样式。
/*清除默认样式*/
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
2、宽度剩余法
一般在设置样式时，左内边距是确定的，右侧根据内容的不同剩余的右内边距不确定。利用宽度剩余法，直接给盒子一个足够的宽度，左内边距需要设置，右侧根据内容的多少剩余多少就是多少。
例：
<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;
}
clipboard.png
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;
}
clipboard.png
解决办法：
①强制限制父盒子的区域
.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值相同。
单行文本垂直居中：行高等于盒子的高度。
文本水平居中（不区分是否是单行）：text-align:center;
盒子居中：
子盒子的水平居中：子盒子必须设置宽度；子盒子margin：0 auto;（上下值不一定是0）。
子盒子的垂直居中：不设置父盒子的高度，给父盒子设置相同的上下padding值。
5、父子盒模型
在父子盒模型中，子盒子的实际占有宽度不能超过父盒子内容宽width。如果子盒子有padding或者border，需要在父盒子内容宽width基础上内减。
网友评论