Question

盒子模型介绍

Answer 1

概念： 盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的 容器。

作用： CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地 丰富 和 促进 各个盒子乃至整个 HTML 文档的 表现效果和布局结构 。

组成： 每个盒子都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin），4个属性组成。

每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

一、内容(content)

     宽度width和高度height属性设置，对盒子内容大小的大小进行控制

二、内边距（padding）

　　padding属性用于设置内边距。 是指边框与内容之间的距离。

　　a）padding-top、padding-right、padding-bottom、padding-left

        b)  padding: 1px 2px 3px 4px(  顺时针 )

　　注意： 后面跟几个数值表示的意思是不一样的。值的个数表达意思：

            1个值padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素

            2个值padding:  上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素

            3个值padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素                                     左右是5像素 下是10像素

            4个值padding:  上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px                                 15px; 表示 上3px 右是5px 下 10px 左15px

三、盒子边框（border）

　　border 属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。

　　1、定义宽度

　　　　a） border-top-width、border-bottom-width、border-left-width、border-right-width 

　　　　b） border-width:2px;                      

                     border-width:1px 2px 3px 4px;               

　　　 注意： 当定义边框宽度时，必须要定义边框的显示样式，由于 默认样式为none ,所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。

　　2、定义颜色

　　　　Demo:border-top-color: green;  border-color: yellow;

　　3、定义样式 border-style:

                    hidden:隐藏边框(IE 不支持)                 dotted:点线

                    dashed:虚线             solid:实线            double:双线边框

　　4、复合属性

　　        综合写法：border : border-width || border-style || border-color

　　         注意：顺序不能错误。

　　5、圆角边框（CSS3）：

　　    语法：border-radius: 左上角  右上角  右下角  左下角;

　　    Demo：border-radius: 10px;       /*  一个数值表示4个角都是相同的 10px 的弧度 */

                        border-radius: 50%;         /*  100px   50% 取宽度和高度 一半  */

四、外边距（margin）

　　margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离， 这段空白通常不能放置其他内容。

　　margin-top、margin-right、margin-bottom、margin-left

　　margin:1px 2px 3px 4px(  顺时针 )

常用功能：

一、盒子水平居中

　　可以让一个盒子实现水平居中，需要满足一下两个条件：

               块级元素和盒子必须指定宽度（width）

　　        左右的外边距都设置为auto，就可使块级元素水平居中。

二、外边距合并

    margin的外边距合并（margin collapsing）

           margin属性有一个特别的行为，就是外边距合并，这个行为只对普通文档流中的块级元素的 垂直外边距有效； 行内框（inline-block）、浮动元素和绝对定位的原素不会发生外边距合并。

        发生外边距合并的两种基本情况：

        1、两个或多个垂直毗邻的兄弟元素，上面元素的下边距会与下面元素的上边距发生合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

        2.父元素和子元素之间，父元素的上外边距和第一个子元素的上外边距、父元素的下外边距和最后一个子元素的下外边距。发生这种情况的前提是父元素和第一个（或最后一个）子元素之间不存在边框和内边距把外边距分隔开，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

三、盒子模型和box-sizing

        box-sizing是用来 设置width、height的作用对象 的。

        三个值:content-box(默认值) 、  border-box 、inherit（继承父类）;

         注意：没有margin-box

        box-sizing:conten-box，width=元素的内容区    (标准盒子模型)

        box-sizing:border-box，width=元素内容区+padding+border  (IE盒子模型)

四、背景剪裁 (Background clip)

        当我们给一个元素设置background-color和background-imge时，这个背景会覆盖到元素border的外边界，background-clip属性可以用来 调整背景所覆盖的区域:

        border-box:背景延伸到边框外，默认值

        padding-box：背景延伸到内边距外，但是不会绘制到border。

        content-box：背景被裁剪至内容区（content box）外沿。

五、溢流（overflow）

        当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow 属性。 最常用的：

        hidden：溢出部分不会显示

        visible：默认值，子元素会从父元素溢出，在父元素外部显示

        scroll：生成两个滚动条，通过滚动条来查看完整的内容

        auto：根据需要生成滚动条

六、轮廓(Outline)

        盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。

七、盒子显示（display）类型

        display 三种常见的值为 block、inline、inline-block

                    block（块盒）：盒子之前以及之后的内容出现在不同的行上

                    inline （行内盒）：与块盒相反：与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行（宽度和高度设置对行内盒无效，在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。）；

                    inline-block（行内块盒）：

          介于前两者之间：

                   像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；

                   像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行。

          块级元素默认设置为 display: block; ，行内元素默认设置为 display: inline 。

display: flex  — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。