HTML 5漫谈-03-盒子模型

页面的结构要与页面的表现分离,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元素除了内容之外(蓝色部分),还包括paddingbordermargin,就像多个盒子套在一起,这也许就是“盒子模型”名字的由来吧。如果打个比方的话,HTML元素在CSS看来就相当于一幅画,内容就是画本身,padding相当于画周围的留白,border是画框,margin就是两幅画之间的距离。

Chrome浏览器下,paddingborder的默认值为0margin的默认值为8。运行这段代码的电脑的屏幕分辨率为1366,而1350 x 10div内容部分的宽度,也就是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的基础上加paddingborder的宽度。

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-boxcontent-box(默认)。这个属性在流式布局中特别的常用!



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

posted on 2017-01-04 13:04 OldBoy 阅读(139) 评论(0)  编辑  收藏 所属分类: HTML5


只有注册用户登录后才能发表评论。


网站导航:
 
<2017年1月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

文章档案

相册

搜索

最新评论

阅读排行榜

评论排行榜