当前位置:Gxlcms > html代码 > CSS设计指南之理解盒子模型_html/css_WEB-ITnose

CSS设计指南之理解盒子模型_html/css_WEB-ITnose

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

一.理解盒模型

每一个元素都会在页面上生成一个盒子。因此,HTML页面实际上是由一堆盒子组成的。默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构。使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成。

1.1 元素盒子的属性

1.边框(border):可以设置边框的宽窄、样式和颜色。

2.内边距(padding):可以设置盒子内容区与边框的间距,想像一下内边距是从边框向内推元素的内容。

3.外边距(margin):可以设置盒子与相邻元素的间距,想像一下外边距是边框向外推其他元素。

1.2 盒子边框

边框有3个相关的属性:宽度(border-width)、样式(border-style)、颜色(border-color)

1.3 盒子内边距

内边距是盒子内容区与盒子边框之间的距离,如果不设定padding的值,那么元素的文本就会紧挨着元素的边距。如下图所示,在显式设定了width的前提下,padding值的设定会加大盒子的宽度。


1.4 盒子外边距
1.如图4所示,默认情况下,元素之间也会有外边距,


推荐把下面这条规则作为样式表的第一条规则:* {margion:0 ;padding=0;},这条规则把所有元素默认的外边距和内边距都设定为零。

2.垂直叠加外边距


如上图所示,Div2设定了上外边距,Div3没有设定外边距,但是Div1与Div2的间距和Div2与Div3的间距是一样的,由此说明Div2此时设定的margin-top并没有起作用。
也就是说,较宽的外边距决定两个元素最终离多远,如果把Div2的margin-top设定为15,效果如下图,可以看到Div1与Div2的间距变宽了。

注意:叠加的只是垂直外边距,水平外边距不叠加。对于水平相邻的元素,它们的水平间距是相邻外边距之和。

二.盒子有多大


2.1 块级元素(block element)
1.没有宽度
所谓没有宽度,就是指没有显式地设置元素的width属性,如果不设置块级元素的width属性,那么这个属性的默认值是auto,结果会让元素的宽度扩展到与父元素同
宽。没有显式设置width属性的元素始终会扩展到填满其父元素的宽度为止,添加外边距会导致元素盒子变小。


2.设定宽度
为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和。


2.2 行内元素


1.没有宽度
inline元素会扩展到足以包裹其内容的宽度,添加内边距和水平边框会导致liline元素变宽,添加量等于水平边框和内边距的和。
2.有宽度的块级元素
为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和。



3.2.3
CSS3新增box-sizing属性,通过它可以将有宽度的盒子也设定成具有默认的auto状态下的行为。

人气教程排行