当前位置:Gxlcms > html代码 > CSS中的盒子模型详解

CSS中的盒子模型详解

时间:2021-07-01 10:21:17 帮助过:17人阅读

很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构!

为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和padding的属性都为0px;

本例子采用行内CSS样式!

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
盒子模型
Javalittleman

把标尺打开!

大家发现了什么没有?

QQ截图20141119131234

分析如下:

显示效果:

image

其它设置的table是固定不变的,也就是说内容大小都不会改变的,改变的只是位置!

border:是边框,向外扩张,并可以为其添加颜色属性

margin:是向外扩张,没有颜色属性,所以我们看到扩张后的颜色是外部的颜色,在本例子中是无色的!

padding:是向内填充的,没有颜色属性,显示的颜色是内部内容设置的颜色!

人气教程排行