CSS 之 盒模型

CSS盒模型也称为框模型。

一、基本介绍

1、CSS盒模型是网页布局的基础。一般网页的布局都是DIV+CSS布局。所以在盒模型这一块我们主要学习块级元素的盒模型属性。
2、在一个文档中，每个元素都被表示为一个矩形的盒子。浏览器渲染网页布局时会通过盒模型的相关属性来确定这些盒子的尺寸,边框方面和位置
3、在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。
每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。
四个区域：内容区，内边距区，边框区，外边距区。

二、属性

1、Margin(外边距)

概述：

• 外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。

• 控制位置的元素

属性控制 ：
margin-top

            概述
                margin-top 属性用来设置元素的顶部外边距，你也可以使用负值。
            初始值 
                 0
            是否是继承属性
                否
            值
                <length>
                    设置固定长度 参考<length> 来查看合适的值.
                <percentage>
                    百分比值<percentage> 总是相对于 父元素块的宽度
                auto

margin-right
margin-bottom
margin-left
简写属性

2、Padding(内边距）

概述
padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。
属性控制
padding-top

            初始值 0
            是否是继承属性 否
            值
                length
                    当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。
                percentage
                    当内边距（padding）是一个百分比的时候， 百分比是和父元素的宽度有关的，同样一定不能为负数。
                    当内边距（padding）是一个百分比的时候， 百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。

padding-right
padding-bottom
padding-left
简写属性
照顺序指定四个宽度： 上、右、下、左。

3、Content(内容区)

概述
内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。

属性控制

width

            概述
                width 属性指定了元素内容区的宽度.
                min-width 和 max-width 属性覆盖 width.
            初始值 
                auto
                    浏览器将会为指定的元素计算并选择一个宽度.
            是否是继承属性
                否
            值
                <length>
                    可能的长度单位见 <length> .
                <percentage>
                    指定为包含块宽度的 <percentage> .
                当前元素width = 包含块width  - 当前元素padding,border,margin之和。

height

        概述
            width 属性指定了元素内容区的高度。
        初始值 
            auto
                浏览器将会为指定的元素计算并选择一个高度.
        是否是继承属性
            否
        值
            参考width
        默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为  border-box , 这个属性决定的将是边框区域（border area）的高度。

设置大小约束而不是绝对的大小：

min-width
                概述
                    min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
                    min-width 的值会同时覆盖 max-width 和 width。
                初始值 
                    none
                是否是继承属性
                    否
                值
                      取值为null时，代表元素未设置最大最小值
                    与width一致 没有auto。有none
max-width
min-height
max-height

4、Border(边框)

概述：
CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。
border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。
border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。

属性控制：
border-top

初始值
                border-top-width: medium
                border-top-style: none
                border-top-color: currentcolor
            是否是继承属性
                否

border-width

            概述
                border-width属性用来决定盒子边框的宽度
            初始值
                border-top-width: medium
                border-right-width: medium
                border-bottom-width: medium
                border-left-width: medium
            是否是继承属性
                否

border-style

            概述
                border-style用来设定元素所有边框的样式。
            初始值
                border-top-style: none
                border-right-style: none
                border-bottom-style: none
                border-left-style: none
            是否是继承属性
                否
            值

border-color

            概述
                CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color
            初始值
                border-top-color: currentcolor
                border-right-color: currentcolor
                border-bottom-color: currentcolor
                border-left-color: currentcolor
            是否是继承属性
                否

三、框类型

1、基本介绍
display CSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表
语法：

    display: block;
    初始值：inline
    是否是继承属性 否

默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表

取值：
none ：
关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。要想让元素在隐藏的同时占据其原有的位置，请参见 visibility 属性。
inline:该元素生成一个或多个行内元素盒。
block:该元素生成一个块元素盒。
inline-block:
该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
2、block-level element
block-level element：块级元素
块：block，一个抽象的概念，一个块在文档流上占据一个独立的区域（块级元素独占一行）块与块之间在垂直方向上按照顺序依次堆叠。元素的 display 为 block时，该元素将成为块级元素。
块级元素列表：
<address><article><aside> <audio> <blockquote><canvas><figcaption>
<figure><footer><header><hgroup><noscript><output><section>
<dd><div><dl><fieldset><form><h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<hr><ol><p><pre> <table><tfoot><ul>

3、 inline-level element
inline-level element：行内元素
行内级元素：display 为 inline的元素称为行内级元素
行内元素列表：
b, big, i, small, tt,abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var,a, bdo,br, ,map, object, q, script, span, sub, sup,button, , label, select, textarea

4、 inline-block-level element
inline-block-level element：行内块
行内块元素:
img, input

总结：
1、通过display属性来设定元素的框类型
2、属性控制
block
块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
inline
行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
inline-block
行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。
3、注意事项
默认状态下display属性值，块级元素display: block ，行内元素display: inline

四、高级操作

1、溢流overflow
概述
overflow 属性指定当内容溢出其块级容器时,是否剪辑内容，显示滚动条或显示溢出的内容
属性控制
visible: 当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）
hidden: 当内容过多，溢流的内容被隐藏。
auto: 当内容过多，溢流的内容被隐藏，然后出现系统滚动条来让我们滚动查看所有的内容。
scroll：
内容会被修剪，并且浏览器会使用滚动条，无论内容是否会被裁减。这避免了在动态环境中滚动条的出现和消失问题。打印机会打印溢出的内容。

初始值
visible
是否是继承属性:否

2、背景裁剪（Background clip）
background-clip 设置元素的背景剪裁的起始位置

语法：

background-clip: border-box
        初始值 border-box
        是否是继承属性 否

取值：
border-box:背景延伸到边框外沿（但是在边框之下）。
padding-box:边框下面没有背景，即背景延伸到内边距外沿。
content-box:背景裁剪到内容区 (content-box) 外沿。
text:背景被裁剪为文字的前景色(只有chrome支持)。

代码示例：

    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #app{
                width: 100px;
                height: 100px;
                padding: 50px;
                border: 10px solid rgba(0,0,0,0.3); 
                margin:50px;
                overflow: auto;
                background-color: pink;
                background-image:url(./img/tg.png);
                background-repeat:no-repeat ;
                background-position: 0 0;

                /*pc五大主流
                    谷歌
                    欧朋
                        BLINK(Webkit的衍生版)
                    苹果
                        Webkit
                    火狐
                        Gecko
                    IE
                        Trident


                    BLINK，Webkit (postcss)
                        -webkit-
                    Gecko
                        -moz-
                    Trident
                        -ms-
                */

                -webkit-background-clip:text ;

                font: 50px/100px "微软雅黑";
                font-weight: bold;
                color: rgba(255, 192, 203,.5);
            }
        </style>
    </head>
    <body>
        <div id="app">

        </div>
    </body>

3、轮廓(Outline)
一个框的 outline 是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）

注意: 使用 outline 属性的时候要注意，它一般只在需要可用性的一些情况才被使用，例如在一些用户点击它的时候使用 outline 来表示高亮、可用，如果你要使用 outline，请确保不要因为它看起来像链接的高亮让用户迷惑。

五、CSS3新增属性

1、box-sizing
概述

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。

取值
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：
width = 内容的宽度，
height = 内容的高度。
宽度和高度都不包含内容的边框（border）和内边距（padding）。

border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。

这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。

语法：

    box-sizing: border-box

初始值：content-box

是否是继承属性 否

代码示例：

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .h1 {
                width: 500px;
                height: 500px;
                background: deeppink;
                border: 1px solid;
            }

            .h2 {
                border: 1px solid;
                width: 300px;
                background: blue;
                height: 300px;
                box-sizing: content-box;
            }

            .h3 {
                border: 1px solid;
                width: 100px;
                background: red;
                height: 100px;
                box-sizing: border-box;
            }
        </style>

        <head></head>
        <!--        
        box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。
         可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
        box-sizing 属性可以被用来调整这些表现: 
            content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
            border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
                                                                      也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。  
        值 
            content-box 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
                                                  注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 
                                                  比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px; 
                                                  尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。 
            border-box  width 和 height 属性包括内容，内边距和边框，但不包括外边距。
                                                 这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
                                                 注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。
                                                 内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。 这里的维度计算为： width = border + padding + 内容的 width， height = border + padding + 内容的 height。
            padding-box width 和 height 属性包括内容和内边距，但是不包括边框和外边距。
                                                  只有Firefox实现了这个值，它在Firefox 50中被删除。
-->

        <body>

            <div class="h1">
                <div class="h2">
                    <div class="h3"></div>
                </div>

            </div>

        </body>

2、border-radius

概述
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
初始值

        border-top-left-radius: 0
        border-top-right-radius: 0
        border-bottom-right-radius: 0
        border-bottom-left-radius: 0

是否是继承属性:否
值
<length>
<length> 定义圆形半径或椭圆的半长轴，半短轴。负值无效。
<percentage>
使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

半径的第一个语法取值可取1~4个值:

border-radius: radius             
border-radius: top-left-and-bottom-right      top-right-and-bottom-left 
border-radius: top-left     top-right-and-bottom-left     bottom-right 
border-radius: top-left     top-right     bottom-right      bottom-left 

半径的第二个语法取值也可取1~4个值
椭圆需要两个半径

代码示例：

<head>
        <meta charset="UTF-8">
        <title>圆角</title>
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .h{
                width: 200px;
                height: 200px;
                background: blue;
                /*使用px时,参数值可以为
                1个时方向
                2个时方向
                3个时方向
                4个时方向*/
                border-radius: 10px;
                border-radius: 10px 20px ;
                border-radius: 10px 20px 30px ;
                border-radius: 10px 10px 20px 30px 40px;
                /*使用百分比时,大于50%时都是圆*/
                border-radius: 80%;
                border-radius: 50%;
                border-radius: 30%;
            }

        </style>
    </head>
    <body>
        <div class="h"></div>

    </body>

六、 总结

1、内容区域content area 是包含元素真实内容的区域
内容区由width height属性控制
2、 内边距区域padding area 延伸到包围padding的边框
内边距区由padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制
3、边框区域border area 是包含边框的区域
由 border-width 及简写属性 border控制
4、外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素
由 margin-top, margin-right, margin-bottom, margin-left
及简写属性 margin 控制