# 盒模型
CSS可以将元素设置一个个矩形的盒子,将元素设置成矩形盒子后,对页面的布局就是将不同盒子放在不同的位置
每个盒子由以下几部分组成
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
# 内容区(width和height)
width和height属性用来设置内容区域的宽和高,也就是元素可渲染内容区的宽高.
内容默认左上角原点开始排列.
块级元素默认宽度是父级宽度100%,行内元素宽度默认由里面内容撑开
所有元素的高度不设置的情况下在默认情况下由内容撑开，也就是随内容多少的变化而变化
.box{
width: 300px;
height: 300px;
background-color: pink;
}
/*
内容区的大小由width和height两个属性来设置
width设置内容区的宽度,height设置内容区的高度
元素里的所有子元素和文本内容都在内容区排列
*/
<div class="box"></div>
2
3
4
5
6
7
8
9
10
11
# 边框区(border)
块级元素的border的作用是在元素的内容区和padding区外加上一个边框线，通常用来分隔内容。
<div class="box"></div>
.box{
width: 400px;
height: 400px;
border:10px solid green;/*通过该属性可以同时设置所有的边框相关样式,没有顺序*/
background-color: skyblue;
}
2
3
4
5
6
border的每一条边都可以单独为其设置样式，形如 border-xxx (top | right | bottom | left)
# 内边距(padding)
内容区和边框之间的距离就是内边距,不能用来放内容
内边距的设置会影响到盒子的大小，可以通过设置
box-sizing: border-box来限制父盒子的大小，padding向内生长内边距的颜色继承背景颜色,不能单独设置内边距颜色
.box{
width:100px;
height:100px;
border:1px solid red;
padding:100px;
}
2
3
4
5
6
# margin外边距
margin 决定盒子外部与其他元素的距离
外边距不会影响盒子的尺寸，但会影响盒子的排列
两个盒子之间的外边距并不能简单相加，会产生
外边距重叠的问题。
.box{
width: 200px;
height: 200px;
background-color: green;
margin: 0 auto; /* 块级元素水平居中 */
}
2
3
4
5
6
# 怪异盒模型
默认情况下,盒子的大小由内容区,内边距,边框共同决定.
box-sizing 用来设置盒子尺寸的计算方式(width和height的作用)
可选值:
content-box 默认值 宽度和高度用来设置内容区的大小
border-box 宽度和高度是设置整个盒子的大小
- 标准模式中，网页元素的宽度是有padding,border,width三者的宽度相加决定的。
- 怪异模式中，width包含padding和border的宽度，即网页宽度为width。
选择怪异还是标准
如果不想因为改变padding的时候盒子的大小也会跟着变化的话就可以使用怪异盒模型,
而如果想让盒子的大小被padding撑开的话就可以使用标准盒模型
# 垂直外边距合并(折叠)现象
发生条件
相邻的块级元素垂直方向会发生重叠现象
# 兄弟外边距重叠
兄弟元素间的垂直外边距会取两者之间的最大值(两者都是正值)
- 如果相邻的外边距，一正一负，则取两者的和
- 如果相邻的外边距都是负值，则取两者中绝对值较大的.
.bro1{
width: 300px;
height: 300px;
background-color: pink;
margin-bottom:150px;
}
.bro2{
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top:200px; /* 两者取其大，外边距200px */
}
2
3
4
5
6
7
8
9
10
11
12
<div class="bro1"></div>
<div class="bro2"></div>
2
# 父子外边距重叠
父子级之间的上外边距会发生合并 是针对于内部第一个子元素
.father{
width: 500px;
height: 500px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color:skyblue;
margin-top:200px; /*此时子元素外边距仿佛变成了父元素的外边距*/
}
2
3
4
5
6
7
8
9
10
11
<div class="father">
<div class="son"></div>
</div>
2
3
父子外边距合并会影响到页面的布局,必须要进行处理
处理方法
1. 给父级加上border
- 给父级加上padding
