CSS盒模型
学习目标
网页布局的本质
网页布局过程:
-
先准备好相关的网页元素,网页元素基本都是盒子 Box 。
-
利用 CSS 设置好盒子样式,然后摆放到相应位置。
-
往盒子里面装内容。
-
利用 CSS 摆盒子。
CSS盒模型
在HTML中,我们学习了一个很重要的理论:块元素和行内元素。在这一节中,我们介绍CSS中极其重要的一个理论——CSS盒子模型。
在“CSS盒子模型”理论中,页面中的所有元素都可以看成一个盒子,并且占据着一定的页面空间。下图所示为一个CSS盒子模型的具体结构。
一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构(往往是padding);二是理解多个盒子之间的相互关系(往往是margin)。
每个元素都看成一个盒子,盒子模型是由四个属性组成的:content(内容)、padding(内边距)、margin(外边距)和border(边框)。此外,在盒子模型中,还有宽度width和高度height两大辅助性属性。记住,所有的元素都可以看成一个盒子。
从上面我们可以知道,盒子模型的组成部分有4个,如下表所示。
属性 | 说明 |
---|---|
content | 内容,可以是文本或图片 |
padding | 内边距,用于定义内容与边框之间的距离 |
margin | 外边距,用于定义当前元素与其他元素之间的距离 |
border | 边框,用于定义元素的边框 |
内容区
内容区是CSS盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分,其他3个部分都是可选的。
内容区有3个属性:width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点,width和height这两个属性是针对内容区content而言,并不包括padding部分。
当内容过多超出width和height时,可以使用overflow属性来指定溢出处理方式。
内边距
内边距,指的是内容区和边框之间的空间,可以看成是内容区的背景区域。
关于内边距的属性有5种:padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding。使用这5种属性可以指定内容区与各方向边框之间的距离。
外边距
外边距,指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起,是CSS布局的一个重要手段。
外边距的属性也有5种:margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。
同时,CSS允许给外边距属性指定负数值,当外边距为负值时,整个盒子将向指定负值的相反方向移动,以此可以产生盒子的重叠效果,这就是传说中的“负margin技术”。
边框
在CSS盒子模型中,边框跟我们之前学过的边框是一样的。
边框属性有border-width、border-style、border-color以及综合了3类属性的简写边框属性border。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin:40px;
border:2px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>盒子模型</div>
</body>
</html>
标准盒模型
根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的;即在标准模式下的盒模型。
盒子实际内容(content)的width/height=我们设置的width/height;
盒子总宽度/高度=width/height+padding+border+margin。
怪异盒模型
在该模式下,浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和;即在怪异模式下的盒模型,
盒子的(content)宽度+内边距padding+边框border宽度=我们设置的width(height也是如此),
盒子总宽度/高度=width/height +padding+ margin 。
<!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>06-盒子模型</title>
<style>
body {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: red;
padding: 20px;
border: 5px solid red;
/* 这里是标准的盒子模型 */
/* box-sizing: content-box; */
/*
计算真正的宽度和高度
宽度:自身的宽度+padding的left的宽度和right的宽度+border的left的宽度和right的宽度
高度:自身的高度+padding的top的高度和bottom的高度+border的top的高度和bottom的高度
*/
/* 这里是怪异的盒子模型 */
box-sizing: border-box;
/*
设置的是多少就是多少 = 边框+margin+padding +content
*/
/* margin: -20px; */
/* margin-top: -100px; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>