盒子模型
一、盒子模型概念
所有HTML元素可以看作盒子,它包括
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。也是我们所设置的宽和高的大
二、margin外边距
基本概念
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
margin外边距属性
属性 | 描述 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
margin外边距离各个数值代表含义
值 | 含义 |
一个值 | 上下左右 |
两个值 | 上下 左右 |
三个值 | 上 左右 下 |
四个值 | 上 右 下 左 (顺时针方向) |
2、、外边距合并
基本概念
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
注释:
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
垂直边框合并,左右边框不合并。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
如果外边距为负数。则取负数绝对值较大的。
相邻的兄弟合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子塌陷</title>
<style type="text/css">
.wrap1,
.wrap2 {
width: 100px;
height: 100px;
background-color: violet;
margin: 10px;
}
</style>
</head>
<body>
<div class="wrap1">我的所有外边距为10px</div>
<div class="wrap2 ">我的所有外边距为10px</div>
</body>
</html>
祖先合并(级父元素与其第一个/最后一个子元素)
如果块级父元素中,不存在上边框、上内边距、 内联元素、清除浮动这四条属性(也可以说,当上边框宽度及上内边距距离为0时),那么这 个块级元素和其第一个子元素的 上边距就可以说“挨到一起
了”。此时这个块级父元素和其第一个子元素就会发生 上边距合并。即这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子 元素的margin-top的较大者。
类似的,若块级父元素的margin-bottom与它的最后一个 子元素的margin-bottom之间没有父元素的border、padding、 inlinecontent、height、 min-height、 max-height分隔时, 就会发生下边距合并现象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子塌陷</title>
<style type="text/css">
.wrap1,
.wrap2 {
width: 200px;
height: 200px;
background-color: violet;
margin: 10px;
color: white;
}
.class1 {
width: 100px;
background-color: yellow;
margin: 20px;
color: red;
}
</style>
</head>
<body>
<div class="wrap1">我的外边距是10px</div>
<div class="wrap2 ">
<div class="class1">我的外边距是20px</div>
我的外边距是10px
</div>
</body>
</html>
三、border边
1、基本概念
四、padding内边距
基本概念
内边距在边框线和内容之间。
padding内边距属性
属性 | 描述 |
padding-bottom | 设置元素的下外边距。 |
padding-left | 设置元素的左外边距。 |
padding-right | 设置元素的右外边距。 |
padding-top | 设置元素的上外边距。 |
padding内边距各个数值代表含义
值 | 含义 |
一个值 | 上下左右 |
两个值 | 上下 左右 |
三个值 | 上 左右 下 |
四个值 | 上 右 下 左 (顺时针方向) |