盒模型
盒模型
CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
1.标准盒模型(浏览器默认)
1.1. 盒模型有哪些属性构成
11.png
盒子模型涉及到的四个区域,包含5个属性
-
width/height 内容区域: 这两个属性决定元素内容content区域的的大小
-
padding 内边距:元素的内容边界到边框之间的距离
-
border 边框:元素的边框
-
margin 外边距: 边框以外是外边距，外边距默认是透明的，因此不会遮挡其后任何元素。
注意:
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
1.2 边框 border
1.2.1 边框三要素:
单样式写法:
-
边框大小(粗细) border-width
-
边框样式 border-style
-
边框颜色 border-color
复合写法:
border :1px solid #000;
1.2.2 边框的大小
大小 就是像素值 px
border-width: 20px
边框大小可以继续细分
因为盒子有四个边
-
border-top-width: 10px;
-
border-right-width: 10px;
-
border-bottom-width: 10px;
-
border-left-width: 10px;
1.2.3 边框的样式
border-style:solid;
边框的样式值:
-
none 无边框
-
solid 实线
-
dashed 虚线
-
dotted 点状线
-
double 双线
边框样式细分:
-
border-top-style: solid;
-
border-right-style: solid;
-
border-bottom-style: solid;
-
border-left-style: solid;
1.2.4 边框颜色
-
十六进制颜色值 #CC00FF
-
英文单词: red blue
边框颜色细分
-
border-top-color: #000;
-
border-right-color: #000;
-
border-bottom-color: #000;
-
border-left-color: #000;
1.2.5 单独定义某条边的综合样式
-
border-top:1px solid #CC00FF;
-
border-right:5px solid red;
-
border-bottom:10px dotted #660033;
-
border-left:15px double blue;
1.3. 内边距 padding
元素内容到边框之间的距离
1.3.1 内边距的复合样式(可以设置4个值)
padding:10px 20px 30px 40px;
1.3.2 内边距复合样式不同值
padding:; 可以设置多个值
-
四个值
padding:上 右 下 左;
-
三个值
padding: 上 左右 下;
-
两个值
padding: 上下 左右;
-
一个值
padding: 上下左右;
注意: 内边距不允许使用负值
1.3.3 内边距单样式
-
padding-top 上面(顶部)内边距
-
padding-right 右边内边距
-
padding-bottom 下面(底部)内边距
-
padding-left 左边内边距
1.4. 外边距 margin
margin 元素边框外,元素与元素 或元素与浏览器之间的距离
1.4.1 外边距复合样式
margin:10px 20px 30px 40px;
1.4.2 外边距复合样式的不同值
margin:; 可以设置多个值
-
四个值
margin:上 右 下 左;
-
三个值
margin: 上 左右 下;
-
两个值
margin: 上下 左右;
-
一个值
margin: 上下左右;
1.4.3 外边距单样式
-
margin-top 上面(顶部)外边距
-
margin-right 右边外边距
-
margin-bottom 下面(底部)外边距
-
margin-left 左边外边距
1.5. 决定盒模型的类型
<style>
div{
box-sizing:content-box;/*标准盒模型 盒子的宽度高度是给content设置的*/
}
</style>
2. 怪异盒模型
怪异盒模型需要手动设置属性
box-sizing:border-box;
22.png
2.1. 怪异盒模型的原理
-
width/height padding * 2 + border * 2 + content(内容大小)
-
padding 内边距:元素的内容边界到边框之间的距离
-
border 边框:元素的边框
-
margin 外边距: 边框以外是外边距，外边距默认是透明的，因此不会遮挡其后任何元素。
2.2. 怪异盒模型和标准盒模型的对比
2.2.1 所设置的width/height 值作用的区域不同
-
标准盒模型
width/height 是作用在content区域内
-
怪异盒模型
width/height 是作用在content区域+padding区域+border区域
2.2.2 盒子的大小计算不同
-
标准盒模型
盒子的占位 = width + padding(左右) + border(左右) + margin(左右)
盒子的占位 = height+ padding(上下) + border上下) + margin(上下)
盒子的宽度= width + padding(左右) + border(左右)
盒子的高度= height+ padding(上下) + border上下)
-
怪异盒模型
盒子的占位 = width + margin(左右)
盒子的占位 = height+ margin(上下)
盒子的宽度 = width
盒子的高度 = height
3.外边距合并
3.1. 同级元素发生外边距合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
33.png
3.2. 父子级之间发生外边距合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
44.png
3.3. 外边距并的规则
- 正正取最大值 =====> 50 60 取60 . 正负值相加 =====> 50 -60 取-10 . 负负取最负 =====> -50 -60 取-60
3.4. 外边距合并的解决办法
-
同级元素给第二个元素浮动,添加绝对定位,单独设置某一个元素inline-block
-
父子级元素外边距合并解决办法
-
给父级设置内边距代替子级的外边距
记住 -
给父级加边框
-
给父级overflow:hidden;
-
设置绝对定位
-
记住所有的外边距的触发都是在垂直方向上
必须是在普通文档流的块级元素才会触发外边距合并,这是大前提!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
height: 100px;
;
background-color: #ccc;
margin-top: 100px;
}
.box {}
.item {
float: left;
width: 25%;
box-sizing: border-box;
background-color: pink;
padding: 10px;
}
.item div {
height: 100%;
line-height: 50px;
background-color: #fff;
}
</style>
</head>
<body>
<!-- /*box-sizing:border-box;怪异盒模型根据屏幕宽度实现盒子之间间距不变，改变内容区大小*/ -->
<div class="wrap">
<div class="box">
<div class="item">
<div>盒子一</div>
</div>
<div class="item">
<div>盒子一</div>
</div>
<div class="item">
<div>盒子一</div>
</div>
<div class="item">
<div>盒子一</div>
</div>
</div>
<div class="box">
<div class="item">
<div>盒子二</div>
</div>
<div class="item">
<div>盒子二</div>
</div>
<div class="item">
<div>盒子二</div>
</div>
<div class="item">
<div>盒子二</div>
</div>
</div>
</div>
</body>
</html>
