css基础:熟悉了解盒子模型(box model)

16512011-05-31

先,想像一下,页面的构成元素都有什么?恩~~,SPAN DIV TABLE INPUT IMG 等等等等,西安网站建设团队点墨网络竭诚为您服务。

这些元素在页面上都是怎么放置的呢?像 SPAN IMG INPUT 这样的元素是行内元素,放置的时候可以在一行,而DIV会独占一行放置……

但是不管它们这些元素怎么放置,有一点是肯定的,那就是,每个元素的形状都是矩形的,严格的说,元素形成了一个矩形的区域,这个区域,被称作box,也就是盒子(把它翻译成盒子还有一个原因,盒子能装东西,呵呵),页面上所有的元素都会形成一个矩形的区域,不信你试试,你那儿要能出来椭圆的,那你的浏览器就太牛了!附加一点,这些矩形肯定都是规规矩矩的水平的放置的,没有斜的,放心放心,不会斜的。

今天要说的就是这个矩形区域的构成,各个部分的划分等。

盒模型

总述

为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型(是讲元素怎么在页面上定位及布局的,包括 position 和 float 等等,visual formatting model)为每个元素生成四个嵌套的矩形框,分别称作content box、padding box、border box 和margin box,它们是不可分割的,并可能会重合,这就是 CSS规范中描述的“盒模型”(box model),也就是以CSS的角度去看一个元素被渲染后的抽象形态。是讲一个元素自身的构成部分,不同于布局:多个元素在页面上的定位。

有图有真相:


 

一大堆名词解释,比较让人头疼的部分……

上面的大框,代表一个元素生成的矩形区域,也就是 box,每一个 box 都包括一个 content 区域(元素的内容,如文本,图形等)以及环绕其四周的 padding(元素的内边距,填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。

padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示(“LM”代表left margin,“RP”代表right padding,“TB”代表top border……)。

边界

上述四个区域(content、 padding、border和margin)分别有他们自己的边界,细化来说,每个区域都有top、right、bottom、left四个边界。

?content 边界/内边界

Content 边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内容决定。这四个content边界组成的矩形框就是该元素的 content box。

?padding 边界

Padding 边界环绕在该元素的 padding区域的四周,顾名思义,填充背景色,在此范围内有效。如果padding的宽度为0,则padding边界与content边界重合。这四个padding边界组成的矩形框就是该元素的padding box。

?border 边界

Border 边界环绕在该元素的border区域的四周,如果border的宽度为0,则border边界与padding边界重合。这四个border边界组成的矩形框就是该元素的 border box。

?margin 边界/外边界

Margin 边界环绕在该元素的margin区域的四周,如果margin的宽度为0,则margin边界与border边界重合。这四个

margin边界组成的矩形框就是该元素的 margin box。

下面分别说一下各个部分。

一个简单的例子,来自 W3C 官方:

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
        UL {
            background: yellow;
            margin: 12px 12px 12px 12px;
            padding: 3px 3px 3px 3px;
                                    /* No borders set */
        }
        LI {
            color: white; /* text color is white */
            background: blue; /* Content, padding will be blue */
            margin: 12px 12px 12px 12px;
            padding: 12px 0px 12px 12px; /* Note 0px padding right */
            list-style: none /* no glyphs before a list item */
                            /* No borders set */
        }
        LI.withborder {
            border-style: dashed;
            border-width: medium; /* sets border width on all sides */
            border-color: lime;
        }
    </STYLE>
</HEAD>
<BODY>
<UL>
    <LI>First element of list</LI>
    <LI class="withborder">Second element of list is
        a bit longer to illustrate wrapping.</LI>
</UL>
 

通过本文您对西安网站建设有了进一步了解,本公司温馨提醒:找西安做网站公司,请选择手续齐全、业务精、服务好的正规公司。

工商网上亮照

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1

客户服务电话:029-89640155 18991365125

公司地址:西安市雁塔区朱雀大街紫郡长安F3

Sitemap 网站地图 手机版

办公电话:029-89640155

服务热线:18991365125

客服信箱:vip@dianmo.cc

846461336327

西安点墨网络科技有限公司

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1