CSS3盒模型

CSS3盒模型规定了网页元素的显示方式，包括大小、边框、边界和补白等概念。2015年4月，W3C的CSS工作组发布了CSS3基本用户接口模块，该模块负责控制与用户接口界面相关效果的呈现方式。

1、盒模型基础

在网页设计中，经常会听到内容(content)、补白(padding)、边框(border)、边界(margin)等术语，在日常生活中盒子装东西与此类似，所以统称为盒模型。

盒模型具有如下特点，其结构示意图如下图所示：

• 盒子都有4个区域：边界、边框、补白、内容。
• 每个区域都包括4个部分：上、右、下、左。
• 每个区域可以统一设置，也可以分别设置。
• 边界和补白只能定义大小，而边框可以定义样式、大小和颜色。
• 内容可以定义宽度、高度、前景色和背景色。
  
  在默认状态下，所有元素的初始状态（margin、border、padding、width和height）都为0，背景色为透明。当元素包含内容后，width和height会自动调整为内容的宽度和高度。调整补白、边框和边界的大小，不会影响内容的大小，但会增加元素在网页内显示的总尺寸。

2、大小

使用width（宽）和height（高）属性可以定义内容区域的大小。

根据CSS盒模型规则，可以设计如下等式：

• 元素的总宽度=左边界+左边框+左补白+宽+右补白+右边框+右边界
• 元素的总高度=上边界+上边框+上补白+高+下补白+下边框+下边界

假设一个元素的宽度为200px、左右边界为50px、左右补白为50px、边框为20px，则该元素在页面中实际占据的宽度为50px + 20px + 50px + 200px + 50px + 20px + 50px =440px。

注意：在浏览器怪异解析模式中，元素在页面中占据的实际大小如下：

• 元素的总宽度=左边界+宽+右边界
• 元素的总高度=上边界+高+下边界

使用CSS盒模型公式表示如下：

元素的总宽度=左边框+左补白+宽+右补白+右边框

元素的总高度=上边界+上补白+高+下补白+下边框

【示例】定义两个并列显示的div元素，设置每个div的width为50%，显示效果如下图所示：

    <style type="text/css">
    div {                                     /*定义div元素公共属性 */
        float: left;                          /*向左浮动，实现并列显示*/
        background-image: url(images/1.jpg);  /* 定义背景图像 */
        background-color: #CC99CC;            /* 定义背景色 */
        font-size: 32px;                      /* 定义div内显示的字体大小 */
        color: #FF0000;                       /* 定义div内显示的字体颜色 */
        text-align: center;                   /* 定义div内显示的字体居中显示 */
        height: 540px;                        /* 定义高度*/}
    #box1 {                                   /*定义第1个div元素属性*/
        width: 50%;                           /* 占据窗口一半的宽度 */ }
    #box2 {                                   /*定义第2个div元素属性*/
        width: 50%;                           /* 占据窗口一半的宽度 */ }
    </style>
    <div id="box1">左边元素</div>
    <div id="box2">右边元素</div>

3、边框

边框可以设计修饰线，也可以作为分界线。定义边框的宽度有多种方法，简单说明如下：

（1）直接在属性后面指定宽度值。

    border-bottom-width:12px;        /*定义元素的底边框宽度为12px*/
    border-top-width:0.2em;          /*定义顶部边框宽度为元素内字体大小的0.2倍*/

（2）使用关键字，如thin、medium和thick。thick比medium宽，而medium比thin宽。不同浏览器对此解析的宽度值不同，有的解析为5px、3px、2px，有的解析为3px、2px、1px。

（3）单独为某边设置宽度，可以使用border-top-width（顶边框宽度）、border-right-width（右边框宽度）、border-bottom-width（底边框宽度）和border-left-width（左边框宽度）。

（4）使用border-width属性定义边框宽度。

    border-width:2px;                     /*定义四边都为2px*/
    border-width:2px 4px;                 /*定义上下边为2px，左右边为4px*/
    border-width:2px 4px 6px;             /*定义上边为2px，左右边为4px，底边为6px*/
    border-width:2px 4px 6px 8px;         /*定义上边为2px，右边为4px，底边为6px，左边为8px*/

提示：当定义边框宽度时，必须定义边框样式，因为边框样式默认为none，即不显示，所以仅设置边框的宽度，就看不到效果。

定义边框颜色可以使用颜色名、RGB颜色值或十六进制颜色值。

【示例1】分别为元素的各个边框定义不同的颜色：

    <style type="text/css">
    #box {/*定义边框的颜色 */
        height: 164px;                         /* 定义盒的高度 */
        width: 240px;                          /* 定义盒的宽度 */
        padding: 2px;                          /* 定义内补白 */
        font-size: 16px;                       /* 定义字体大小 */
        color: #FF0000;                        /* 定义字体显示颜色 */
        border-style: solid;                   /* 定义边框为实线显示 */
        border-width: 50px;                    /* 定义边框的宽度 */
        border-top-color: #aaa;                /* 定义顶边框颜色为十六进制值*/
        border-right-color: gray;              /* 定义右边框颜色为名称值*/
        border-bottom-color: rgb(120,50,20);   /* 定义底边框颜色为RGB值*/
        border-left-color:auto;                /* 定义左边框颜色将继承字体颜色*/}
    </style>
    <div id="box"><img src="images/1.jpg" width="240" height="164" alt=""/></div>

CSS支持的边框样式主要包括以下几个：

• none：默认值，无边框，不受任何指定的border-width值影响。
• hidden：隐藏边框，IE不支持。
• dotted：定义边框为点线。
• dashed：定义边框为虚线。
• solid：定义边框为实线。
• double：定义边框为双线，两条线及其间隔宽度之和等于指定的border-width值。
• groove：根据border-color值定义3D凹槽。
• ridge：根据border-color值定义3D凸槽。
• inset：根据border-color值定义3D凹边。
• outset：根据border-color值定义3D凸边。

【示例2】在一段文本中包含一个span元素，利用它为部分文本定义特殊样式，设计顶部边框为80px的红色实线，底部边框为80px的绿色实线，如下图所示：

    <style type="text/css">
    p {                                        /* 定义段落属性 */
        margin: 50px;                          /* 定义段落的边界为50px */
        border: dashed 1px #999;               /* 定义段落的边框 */
        font-size: 14px;                       /* 定义段落字体大小 */
        line-height: 24px;                     /* 定义段落行高为24px */}
    span {                                     /* 定义段落内内联文本属性 */
        border-top: solid red 80px;            /* 定义行内元素的上边框样式 */
        border-bottom: solid green 80px;       /* 定义行内元素的下边框样式 */
        color: blue;
    }
    </style>
    <p> 寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处舟催发。执手相看泪眼，竟无语凝噎。念去去千里烟波，
暮霭沉沉楚天阔。 <span>多情自古伤离别，更那堪冷落清秋节。</span>今宵酒醒何处?杨柳岸晓风残月。此去经年，应是良
辰好景虚设。便纵有千种风情，更与何人说? </p>

可以看到上边框压住上一行文字，并超出段落边框，下边框压住下一行文字，也超出段落边框。

4、边界

元素与元素外边框之间的区域称为边界，也称为外边距。设置边界可以使用margin属性。

    margin:2px;                     /*定义元素四边边界为2px*/
    margin:2px 4px;                 /*定义上下边界为2px，左右边界为4px*/
    margin:2px 4px 6px;             /*定义上边界为2px，左右边界为4px，下边界为6px*/
    margin:2px 4px 6px 8px;         /*定义上边界为2px，右边界为4px，下边界为6px，左边界为8px*/

也可以使用margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下和左边界的大小。

    margin-top:2px;           /*定义元素上边界为2px*/
    margin-right:2em;         /*定义右边界为元素字体的2倍*/
    margin-bottom:2%;         /*定义下边界为父元素宽度的2%*/
    margin-left:auto;         /*定义左边界为自动*/

margin可以使用任何长度单位，如px、lb、in、cm、em、%等。margin默认值为0，可以取负值。如果设置负值，将反向偏移元素的位置。

【示例1】通过边界调整子元素在包含框内的显示位置：

    <style type="text/css">
    body {margin: 0; /*适用IE*/padding: 0;              /*适用非IE*/}/*清除页边距*/
    div {                                               /*定义父子元素共同属性*/
        margin: 20px;
        padding: 20px;
        float: left;}
    #box1 {                                             /*定义父元素的属性*/
        width: 500px;
        height: 300px;
        float: left;
        background-image: url(images/1.jpg);
        border: solid 20px red;}
    #box2 {                                             /*定义子元素的属性*/
        width: 150px;
        height: 150px;
        float: left;
        background-image: url(images/2.jpg);
        border: solid 20px blue;}
    </style>
    <div id="box1">
        <div id="box2">子元素</div>
    </div>

5、补白

元素包含内容与内边框间的区域称为补白，也称为内边距。设置补白可以使用padding属性。

    padding:2px;                    /*定义元素四周补白为2px*/
    padding:2px 4px;                /*定义上下补白为2px，左右补白为4px*/
    padding:2px 4px 6px;            /*定义上补白为2px，左右补白为4px，下补白为6px*/
    padding:2px 4px 6px 8px;        /*定义上补白为2px，右补白为4px，下补白为6px，左补白为8px*/

也可以使用padding-top、padding-right、padding-bottom、padding-left属性独立设置上、右、下和左补白的大小。

    padding-top:2px;          /*定义元素上补白为2px*/
    padding-right:2em;        /*定义右补白为元素字体的2倍*/
    padding-bottom:2%;        /*定义下补白为父元素宽度的2%*/
    padding-left:auto;        /*定义左补白为自动*/

补白取值不可以为负。补白和边界一样都是透明的，当设置背景色和边框色后，才能看到补白区域。

【示例】设计导航列表项目并列显示，然后通过补白调整列表项目的显示大小：

    <style type="text/css">
    ul {                                 /*清除列表样式*/
        margin: 0;                       /*清除IE列表缩进*/
        padding: 0;                      /*清除非IE列表缩进*/
        list-style-type: none;           /*清除列表样式*/}
    #nav {width: 100%;height: 32px;}     /*定义列表框宽和高*/
    #nav li {                            /*定义列表项样式*/
        float: left;                     /*浮动列表项*/
        width: 9%;                       /*定义百分比宽度*/
        padding: 0 5%;                   /*定义百分比补白*/
        margin: 0 2px;                   /*定义列表项间隔*/
        background: #def;                /*定义列表项背景色*/
        font-size: 16px;
        line-height: 32px;               /*垂直居中*/
        text-align: center;              /*平行居中*/}
    </style>
    <ul id="nav">
        <li>美 丽 说</li>
        <li>聚美优品</li>
        <li>唯 品 会</li>
        <li>蘑 菇 街</li>
        <li>1 号 店</li>
    </ul>

6、界面

6.1、显示方式

浏览器解析有两种模式：怪异模式和标准模式。在怪异模式下，border和padding包含在width或height之内；在标准模式下，border、padding、width或height是各自独立区域。

使用box-sizing属性可以定义对象的解析方式，具体语法如下所示：

    box-sizing : content-box | border-box;

取值简单说明如下：

• content-box：为默认值，padding和border不包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即元素的实际宽度=宽+边框+补白。
• border-box：padding和border包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即元素的宽度=width。

【示例】设计两个盒子，在标准模式和怪异模式下进行解析比较，显示效果如下图所示：

    <style type="text/css">
    div {
        float: left;                         /* 并列显示 */
        height: 100px;                       /* 元素的高度 */
        width: 100px;                        /* 元素的宽度 */
        border: 50px solid red;              /* 边框 */
        margin: 10px;                        /* 外边距 */
        padding: 50px;                       /* 内边距 */
    }
    .border-box { box-sizing: border-box;}   /* 怪异模式解析 */
    </style>
    <div>标准模式</div>
    <div class="border-box">怪异模式</div>

6.2、调整大小

使用resize属性可以允许用户通过拖动的方式改变元素的尺寸，具体语法如下所示：

    resize:none | both | horizontal | vertical

取值简单说明如下：

• none：为默认值，不允许用户调整元素大小。
• both：用户可以调节元素的宽度和高度。
• horizontal：用户可以调节元素的宽度。
• vertical：用户可以调节元素的高度。

目前除了IE浏览器外，其他主流浏览器都支持该属性。

【示例】演示使用resize属性设计可以自由调整大小的图片：

    <style type="text/css">
    #resize {
        /*以背景方式显示图像，这样可以更轻松地控制缩放操作*/
        background:url(images/1.jpg) no-repeat center;
        /*设计背景图像仅在内容区域显示，留出补白区域*/
        background-clip:content;
        /*设计元素最小和最大显示尺寸，用户也只能在该范围内自由调整*/
        width:200px; height:120px;
        max-width:800px; max-height:600px;
        padding:6px; border: 1px solid red;
        /*必须同时定义overflow和resize，否则resize无效，元素默认溢出显示为visible*/
        resize: both;
        overflow: auto;
    }
    </style>
    <div id="resize"></div>

6.3、缩放比例

zoom是IE的专有属性，用于设置对象的缩放比例，另外它还可以触发IE的haslayout属性，清除浮动、margin重叠等作用，设计师常用这个属性解决IE浏览器存在的布局Bug。

CSS3支持该属性，基本语法如下所示：

    zoom：normal | <number> | <percentage>

取值说明如下：

• normal：使用对象的实际尺寸。
• <number>：用浮点数定义缩放比例，不允许负值。
• <percentage>：用百分比定义缩放比例，不允许负值。

目前，除了Firefox浏览器之外，所有主流浏览器都支持该属性。

【示例】使用zoom放大第2幅图片为原来的2倍：

    <style type="text/css">
    img {
        height: 200px;
        margin-right: 6px;
    }
    img.zoom { zoom: 2; }
    </style>
    <img src="images/bg.jpg"/>
    <img class="zoom" src="images/bg.jpg"/>

当zoom属性值为1或100%时，相当于normal，表示不缩放；当zoom属性值为小于1的正数时，表示缩小，如zoom: 0.5;表示缩小一半。

7、轮廓样式

轮廓与边框不同，它不占用页面空间，且不一定是矩形。轮廓属于动态样式，只有当对象获取焦点或者被激活时呈现。使用outline属性可以定义块元素的轮廓线，具体语法如下所示：

    outline：<'outline-width'> || <'outline-style'> || <'outline-color'> || <'outline-offset'>

取值简单说明如下：

• <'outline-width'>：指定轮廓边框的宽度。
• <'outline-style'>：指定轮廓边框的样式。
• <'outline-color'>：指定轮廓边框的颜色。
• <'outline-offset'>：指定轮廓边框偏移值。

【示例】设计当文本框获得焦点时，在周围画一个粗实线外廓，以提醒用户交互效果：

    <style type="text/css">
    ......
    /*设计表单内文本框和按钮在被激活和获取焦点状态下时，轮廓线的宽、样式和颜色*/
    input:focus, button:focus { outline: thick solid #b7ddf2 }
    input:active, button:active  { outline: thick solid #aaa }
    </style>
    <div id="stylized" class="myform">
        <form id="form1" name="form1" method="post" action="">
            <h1>登录</h1>
            <p>请准确填写个人信息...</p>
            <label>Name <span class="small">姓名</span> </label>
            <input type="text" name="textfield" id="textfield" />
            <label>email <span class="small">电子邮箱</span> </label>
            <input type="text" name="textfield" id="textfield" />
            <label>Password <span class="small">密码</span> </label>
            <input type="text" name="textfield" id="textfield" />
            <button  type="submit">登录</button>
            <div class="spacer"></div>
        </form>
    </div>

8、圆角样式

使用border-radius属性可以设计元素的边框以圆角样式显示，具体语法如下所示：

    border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

取值简单说明如下：

• <length>：用长度值设置对象的圆角半径长度，不允许负值。
• <percentage>：用百分比设置对象的圆角半径长度，不允许负值。
• border-radius：此属性派生了以下4个子属性：
  ●border-top-right-radius：定义右上角的圆角。
  ●border-bottom-right-radius：定义右下角的圆角。
  ●border-bottom-left-radius：定义左下角的圆角。
  ●border-top-left-radius：定义左上角的圆角。

提示：border-radius属性可包含两个参数值：第一个参数值表示圆角的水平半径；第二个参数值表示圆角的垂直半径。如果仅包含一个参数值，则第二个参数值与第一个参数值相同。如果参数值中包含0，则这个角就是矩形，不会显示为圆角。

【示例】下面代码定义img元素显示为圆形，当图像宽高比不同时，显示效果不同：

    <style type="text/css">
    img {/*定义图像圆角边框*/
        border: solid 1px red;
        border-radius: 50%; /*圆角*/
    }
    .r1 {/*定义第1幅图像宽高比为1∶1*/
        width:300px;
        height:300px;
    }
    .r2 {/*定义第2幅图像宽高比不为1∶1*/
        width:300px;
        height:200px;
    }
    .r3 {/*定义第3幅图像宽高比不为1∶1*/
        width:300px;
        height:100px;
        border-radius: 20px; /*定义圆角*/
    }
    </style>
    <img class="r1" src="images/1.jpg" title="圆角图像" />
    <img class="r2" src="images/1.jpg" title="椭圆图像" />
    <img class="r3" src="images/1.jpg" title="圆形图像" />

9、阴影样式

使用box-shadow属性可以定义元素的阴影效果，基本语法如下所示：

    box-shadow : none | inset? && <length>{2,4} && <color>?

取值简单说明如下：

• none：无阴影。
• <length>①：第1个长度值用来设置对象的阴影水平偏移值，可以为负值。
• <length>②：第2个长度值用来设置对象的阴影垂直偏移值，可以为负值。
• <length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值，不允许负值。
• <length>④：如果提供了第4个长度值则用来设置对象的阴影外延值，可以为负值。
• <color>：设置对象的阴影的颜色。
• inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

【示例1】定义一个简单的实影投影效果：

    <style type="text/css">
    img{
        height:300px;
        box-shadow:5px 5px;
    }
    </style>
    <img src="images/1.jpg" />

【示例2】定义位移、阴影大小和阴影颜色：

    img{
        height:300px;
        box-shadow:2px 2px 10px #06C;
    }

【示例3】定义内阴影，阴影大小为10px，颜色为#06C：

    <style type="text/css">
    pre {
        padding: 26px;
        font-size:24px;
        box-shadow: inset 2px 2px 10px #06C;
    }
    </style>
    <pre>
    -moz-box-shadow: inset 2px 2px 10px #06C;
    -webkit-box-shadow: inset 2px 2px 10px #06C;
    box-shadow: inset 2px 2px 10px #06C;
    </pre>