# 盒模型
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区外加上一个边框线.
通常用来分隔内容,使其不至于散步到背景的边界,
复合写法:
broder:宽度 种类 颜色;
.box{
width: 400px;
height: 400px;
boder:10px solid green;/*通过该属性可以同时设置所有的边框相关样式,没有顺序*/
background-color: skyblue;
}
<div class="box"></div>
2
3
4
5
6
7
除了boder以外可以四个边单独指定 border-xxx
border-top:宽度 种类 颜色;
border-bottom:宽度 种类 颜色;
border-left:宽度 种类 颜色;
border-right:宽度 种类 颜色;
border的单例型写法
border-width边框宽度 默认是3px,
可以指定四个方向值的边框宽度
值的情况
四个值: 上 右 下 左
三个值: 上 左右 下
两个值 上下 左右
一个值 上下左右
除了boder-width以外还有
boder-xxx-width
xxx可以是top,bottom,left,right
用来单独指定某一个边的宽度
border-style边框样式
solid实线
double双边框
dashed虚线
dotted圆点
默认是none没有
可以指定四个方向值的边框样式
值的情况
四个值: 上 右 下 左
三个值: 上 左右 下
两个值 上下 左右
一个值 上下左右
除了boder-style以外还有 boder-xxx-style
xxx可以是top,bottom,left,right
用来单独指定某一个边狂的样式
border-color边框颜色
默认是color文字颜色一致;
transparent;透明 跟父元素的背景颜色保持一致
可以指定四个方向值的边框颜色;
除了border-color以外还有 border-xxx-color
xxx可以是top,bottom,left,right
用来单独指定某一个边狂的颜色
三边有边框而一边没有设置技巧
border:1px solid #000;
border-top:none;
2
利用border画一个三角形
.box{
width: 0;/*元素的宽高都为0,设置不同的边框颜色即可看出每个边框方向分为了四个三角形*/
height:0;
border-width: 80px;
border-color: pink blue yellow green;/*此时可以通过设置不同的方向的透明从而画出三角形*/
border-style: solid;
}
<div class="box"></div>
2
3
4
5
6
7
8
# 内边距(padding)
内容区和边框之间的距离就是内边距,不能用来放内容
一共有四个方向的内边距
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
内边距的设置会影响到盒子的大小
内边距的颜色继承背景颜色,不能单独设置内边距颜色
.box{
width:100px;
height:100px;
border:1px solid red;
padding:100px;/*内边距的简写写法*/
}
<div class="box"></div>
2
3
4
5
6
7
padding的简写写法
padding:100px; 一个值 : 代表上下左右
padding:100px 50px; 两个值 : 第一个值代表上下 第2个值代表左右
padding:100px 50px 20px; 三个值: 第一个值代表上 第2个值代表左右 第3个值代表下
padding:100px 50px 20px 0;四个值: 第一个值上 第二个值右 第三个值下 第四个值左
# margin外边距
外边距不会影响盒子的大小
外边距会影响到盒子的位置
一共有四个方向的外边距
margin-top
--- 上外边距 设置一个正值 元素会往下移动
margin-bottom
---下外边距 下边的元素会向下移动
margin-right
--- 右外边距 默认情况下设置margin-right不会产生任何的影响
margin-left
--- 左外边距 设置一个正值 元素会向右移动
注意:margin也可以设置负值,如果是负值则是相反方向去移动
元素在页面是按照自左往右的顺序排列
所以默认情况下我们设置左和上外边距是移动元素
而设置下和右外边距则会移动其他的元素
margin的简写写法
margin:100px; 一个值 : 代表上下左右
margin:100px 50px; 两个值 : 第一个值代表上下 第2个值代表左右
margin100px 50px 20px; 三个值: 第一个值代表上 第2个值代表左右 第3个值代表下
margin:100px 50px 20px 0;四个值: 第一个值上 第二个值右 第三个值下 第四个值左
.box{
width: 200px;
height: 200px;
background-color: green;
margin: 0 auto;/*块级元素水平排列
auto只对外边距有效 代表自动计算的意思 只能实现左右自动居中*/
}
<div class="box"></div>
2
3
4
5
6
7
8
# 怪异盒模型
默认情况下,盒子的大小由内容区,内边距,边框共同决定.
box-sizing 用来设置盒子尺寸的计算方式(width和height的作用)
可选值:
content-box 默认值 宽度和高度用来设置内容区的大小
border-box 宽度和高度是设置整个盒子的大小
- 标准模式中，网页元素的宽度是有padding,border,width三者的宽度相加决定的。
- 怪异模式中，width包含padding和border的宽度，即网页宽度为width。
选择怪异还是标准
如果不想因为改变padding的时候盒子的大小也会跟着变化的话就可以使用怪异盒模型,
而如果想让盒子的大小被padding撑开的话就可以使用标准盒模型
# 盒子的大小计算不同
盒模型的组成，由里向外分别是 content，padding，border，margin
1.标准盒模型
盒子的左右占位 = width + 左右padding + 左右border + 左右margin
盒子的上下占位 = height + 上下padding + 上下border + 上下margin
盒子的宽度 = width + 左右padding + 左右border
盒子的高度 = height + 上下padding + 上下border
2.怪异盒模型
盒子的左右占位 = width + 左右margin
盒子的上下占位 = height + 上下margin
盒子的宽度 = width
盒子的高度 = height
# 垂直外边距合并(折叠)现象
发生条件
相邻的块级元素垂直方向会发生重叠现象
# 兄弟外边距合并
兄弟元素间的垂直外边距会取两者之间的最大值(两者都是正值)
特殊情况
如果相邻的外边距.一正一负,则取两者的和
如果相邻的外边距都是负值,则取两者中绝对值较大的.
兄弟元素之间的外边距的重叠,对于开发是有利的,我们不需要处理.
.bro1{
width: 300px;
height: 300px;
background-color: pink;
margin-bottom:150px;
}
.bro2{
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top:200px;
}
<div class="bro1"></div> <div class="bro2"></div>
2
3
4
5
6
7
8
9
10
11
12
13
# 父子外边距合并
父子级之间的上外边距会发生合并 是针对于内部第一儿子
.fa{
width: 500px;
height: 500px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color:skyblue;
margin-top:200px;/*此时子元素外边距仿佛变成了父元素的外边距*/
}
<div class="fa">
<div class="son"></div>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
父子外边距合并会影响到页面的布局,必须要进行处理
处理方法
1.给父级加上border
2.给父级加上padding