HTML 5漫谈-03-盒子模型

2017-01-05 11:04:28来源:作者:BlogJava-专家区人点击

页面的结构要与页面的表现分离, HTML 负责页面结构, CSS 负责页面表现。也就是说, CSS 是用来修饰 HTML 元素的。这就涉及到一个问题,就是从 CSS 的角度如何看待一个 HTML 元素。答案就是“盒子模型 ” 。从 CSS 的角度看,每一个 HTML 元素都是以盒子的方式呈现的。

首先看一段 HTML 代码,如代码清单 3-1 所示。

---------------------------------------------- 代码清单 3- 1 -----------------------------------------------

<! DOCTYPE html>

< html >

< head >

< meta charset = "UTF-8" >

< title > HTML 5 Demo </ title >

</ head >

< body >

< div > CSS 盒子模型 </ div >

</ body >

</ html >

----------------------------------------------------------------------------------------------------------

在 Chrome 浏览器“开发者工具 ” 视图中可以看到示例代码中 div 元素的盒子模型,如图 3-1 所示。

---------------------------------------------- 图 3- 1 ----------------------------------------------------

----------------------------------------------------------------------------------------------------------

示例中的div 元素除了内容之外(蓝色部分),还包括 padding 、 border 和 margin ,就像多个盒子套在一起,这也许就是“盒子模型”名字的由来吧。如果打个比方的话, HTML 元素在 CSS 看来就相当于一幅画,内容就是画本身, padding 相当于画周围的留白, border 是画框, margin 就是两幅画之间的距离。

在 Chrome 浏览器下, padding 和 border 的默认值为 0 , margin 的默认值为 8 。运行这段代码的电脑的屏幕分辨率为 1366 ,而 1350 x 10 是 div 内容部分的宽度,也就是 div 元素 width 属性的值。可以看得出来, HTML 元素 width 属性的宽度默认是以“外扩 ” 的方式呈现的。

下面通过 CSS 对这个 div 盒子的各个部分做设置,如代码清单 3-2

所示。

---------------------------------------------- 代码清单 3-2-----------------------------------------------

div

{

width : 200px ;

padding : 10px ;

border : solid 5px ;

margin : 20px ;

}

----------------------------------------------------------------------------------------------------------

在HTML 页面的 head 元素中以 link 方式引入 CSS 样式表,如代码清单 3-3

所示:

---------------------------------------------- 代码清单 3-3-----------------------------------------------

<! DOCTYPE html>

< html >

< head >

< meta charset = "UTF-8" >

< title > HTML 5 Demo </ title >

< link href = "3-1.css" rel = "stylesheet" type = "text/css" />

</ head >

< body >

< div > CSS 盒子模型 </ div >

</ body >

</ html >

-----------------------------------------------------------------------------------------------------

设置了样式之后,这个

div 盒子模型的变化如图 3-2 所示。

---------------------------------------------- 图 3-2----------------------------------------------------

----------------------------------------------------------------------------------------------------------

此时,这个 div 实际占有的宽度为 230 x 48 ,即在 with 的基础上加 padding 和 border 的宽度。

在 CSS 中增加一个有关元素宽度设置的属性: box-sizing ,这个属性是用来规定 width 设置的是谁的宽度。修改之前的 CSS 代码,增加 box-sizing 的设置,如果代码清单 3-4 所示。

---------------------------------------------- 代码清单 3-4-----------------------------------------------

div {

width : 200px ;

padding : 10px ;

border : solid 5px ;

margin : 20px ;

box-sizing : border-box ;

}

----------------------------------------------------------------------------------------------------------

修改后这个div 的盒子模型如图 3-3 所示。

---------------------------------------------- 图 3-3----------------------------------------------------

----------------------------------------------------------------------------------------------------------

box-size 的值设置为 border-box 表示元素的 with 属性是指 border 这个盒子的宽度,而不再是内容( content )这个盒子的宽度了。此时 with 属性的值表现在 “ 内减”,而不是之前默认的“外扩”。

box-sizing 属性的值还可以是 padding-box 和 content-box( 默认 ) 。这个属性在流式布局中特别的常用!

----------------------------------

把人做到宽容,把技术做到强悍。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台