CSS盒模型

css盒模型本质上是一个盒子,封装了周围的html元素。

盒模型包括:margin(外边距)、border(边框)、padding(内边距)、content(内容)

image-20210306201707790

image-20210306201728235

盒子的宽度与高度:

一个盒子的总宽度为:左右外边距+左右边框+左右内边距+内容宽度。

长度与宽度的计算方式相同。

当我们指定一个css元素宽度和高度时,实际上设置的是内容的宽度和高度。

例如:

1
2
3
4
5
6
div{
width: 200px;
border: 10px solid blue;
padding: 20px;
margin: 30px;
}

上面这个例子的总宽度就是200+10×2+20×2+30×2=320px。

自动撑开父盒子

可以利用浮动自动撑开父盒子。

可以把父盒子设置为浮动,然后在该浮动的父盒子后添加一个空的div,并把div清除浮动,这样父盒子的子盒子就可以自动撑开盒子。

例如:

1
2
<div class="two"><h1>测试标题</h1></div>
<div class="clearF"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.two{
background-color: cyan;
float: left;
}
h1{
margin: 20px;
padding: 20px;
border: 2px blue solid;
background-color: coral;
}
.clearF{
clear: both;
height: 0;
width: 0;
}

盒子居中显示:

利用盒子的margin可以方便的实现盒子的居中显示。

原理就是将盒子的左右外边距设置为自适应且相等,也就是将左右外边距设置为auto

具体实现:

1
2
3
4
5
6
7
8
9
.two{
background-color: cyan;
}
h1{
width: 135px;
margin: 0 auto;
border: 2px blue solid;
background-color: coral;
}

效果:

image-20210306203243739

注意,使用该方式进行居中,需要对居中元素设置宽度,否则无效。