CSS之盒子模型（深入理解）

CSS--盒子模型(Box Model)

简介：

　　　　CSS盒子模型本质上是一个盒子，对网页中绝大部分的HTML元素进行包装定位（外边距，边框，内边距以及实际内容）。

　　　　但是并不是所有的HTML元素都可以看作是盒子模型，例如图片（img）就不能看作是盒子模型，因为img中只能放图片，并不能添加其他的东西，所以它属于文字流。而盒子模型进行封装的元素大部分是文档流。

盒子模型中主要的区域：

　　盒子模型中主要包含元素的宽，高，外边距，边框，内边距以及实际内容。　　

• Width：主要区域的内容（content）的宽。
• Height：主要区域的内容（content）的宽。
• Margen：外边距。即整个元素和其他元素的距离。
• Border：元素的边框。
• Padding：内边距。即元素的边与内容的距离。
• Content：内容。也就是实际所看到的区域。

　　下面的图片说明了盒子模型的区域：

　　　　

下图为代码演示：

 #test{
                 width: 100px;
                 height: 100px;
                 background-color: yellowgreen;
                 margin: 10px;
                 padding: 10px;
                 border: 5px solid blue;
             }

盒子模型属性详解：

　　margen/padding： 外边距/内边距

　　　只写1个值 ： 表示四周的外边距都是一个值。

　　  写2个值： 第一个值表示上下，第二个值表示左右。

　　　 写3个值： 分别表示上，右，下的值，左边的值默认等于右边。

　　　　写4个值： 分别表示上，右，下，左的值。

　　　　 auto： 放弃某个方向的主导权，交由它的对方向主导。

　　　　　　　　　　　　水平居中：margen：0 auto；

　　　　　　　　　　　　竖直居中：margen：auto 0；

　　　　　　　　　　　　全局居中：margen：auto；

　　　　boder ：边框 （宽度，样式，颜色） 实线：solid 虚线： dashed 样式可以省略，但是原则上三个属性都要写，三个属性的顺序可以随意颠倒，没有先后要求。 　

注意：
1.盒子模型可以随意指定任意方向的相关属性值。
2.使用padding后会撑大div的可见区域，所以使用时应注意div的实际大小。

当父盒子包裹子盒子，给子盒子添加margen-top时，子盒子和夫盒子的上边线重合，导致两个盒子同时下来。

        <div id="d1">
            <div id="d2"></div>
        </div>

　　　　　 #d1{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
            #d2{
                width: 100px;
                height: 100px;
                background-color: deepskyblue;
                margin-top: 10px;
            }

【解决办法】
1、给父容器添加一定的padding-top ，会给父容器添加不必要的padding区域，不推荐。
2、给父容器添加一定的上边框，会导致父容器产生不必要的边框，不推荐。
3、给父容器或者子容器添加float属性。不推荐。
4、给任何一个容器添加一个属性： overflow:hidden。推荐使用。

border的补充：

　border-radius: ：边框圆角。

　　 1.共接收8个属性值，分别表示：左上，右上，右下，左下/左上，右上，右下，左下（X轴/Y轴）。

　　 2.省略Y轴默认与X轴相等。如果4个角写不全，默认对角相等。

　　 3.只写一个值，默认8个值均等。

　　 4.div为正方形，当圆角弧度大于等于其宽度的一半，那么该div将显示为圆形。

代码如下：

             #div1{
                 background-image: url(img/cat.jpg);
                 height: 200px;
                 width: 200px;
                 border: 5px solid #FF9E01;
                 border-radius: 1030px;
                 background-repeat: no-repeat;
                 background-size: 200px 200px;
                 margin: 10px 0px;
             }

                 #div2{
                 background-image: url(img/cat.jpg);
                 height: 200px;
                 width: 200px;
                 border: 5px solid #FF9E01;
                 border-radius: 60px 0px;
                 background-repeat: no-repeat;
                 background-size: 200px 200px;
             }

效果图：

border-image: ：为元素边框添加背景图片。

　　　第一个属性：图片的url地址。

   第二个属性：为切线的大小。（ 写法：第一个值/第二个值）

　　　第一个值是切的图片宽度：上右下左，通过四条切线分为九宫格，四个角分别对应边框的四个角，四个角不会平铺拉伸。（不能带单位）

    第二个值是边框的宽度：上右下左，边框的四条边框。可以自行设置平铺拉伸。（必须带单位）
　　第三个属性：四个角除外的图片属性。拉伸：stretch，铺满：round，平铺：repeat。

　　例如：　　border-image:{url(img/QQ图片20180312161643.png  27/27px repeat;}

例子：

 #image{
         width: 200px;
         height: 200px;
         /*background-color: #Fd9d07;*/

         border-image: url(img/QQ图片20180312161643.png)
                       27/27px
                       repeat;
         }                            

盒子阴影----box-shadow：

　　　　

共接收6个属性值，并用空格分隔。

1. 水平阴影距离，可正可负。右正左负。（必填）
2. 垂直阴影距离，可正可负。下正上负。（必填）
3. 阴影模糊半径，只能为整数，默认为0，数值越大，阴影越模糊。
4. 阴影拓展半径，可正可负，默认为0，数值增大，阴影扩大，数值减小，阴影缩小。
5. 阴影颜色，默认为黑色。
6. 内外阴影，默认为外阴影，inset表示内阴影

例子：

            #shadow{
                width: 200px;
                height: 200px;
                background-color: #F1B15A;
                box-shadow: 0px 0px 10px 0px red inset;

            }

外围线---- outline：

在元素的边框以外，不占据任何空间，但有可能会覆盖四周的内容，写法上与border一致。

---

下面来介绍CSS属性中比较重要的属性--浮动（float）：

　　浮动--float

　　　规律1：标准流模型中的块级盒子，默认宽度是100%；而浮动的块级盒子，宽度不会自动伸展，而是由内容(文字、padding)撑开。浮动后的行级元素会变成块级元素， 可以设置宽度高度等属性值。

　　

　　　规律2：当一个盒子浮动后，标准流中的其他未浮动盒子将视浮动盒子不存在而占据浮动盒子（浮动盒子的背景会覆盖掉与之大小相同区域的未浮动盒子的背景），但是未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响（浮动盒子不能盖住未浮动盒子的文字内容），也就是浮动可以打破文档流，但是不能打破文字流。

　　 规律3：可以使用clear属性使未浮动的盒子不受浮动盒子的影响。

　clear：清除其他元素浮动对自身造成的影响。

　　　可选值：left(清除左浮动) right(清除左浮动) both（清除两个方向浮动）

规律4：如果父盒子没有指定高度，而父盒子中的所有子盒子全部浮动，将导致父盒子的高度塌陷，也就是高度无法被子盒子撑开而变为0。

解决子盒子浮动父盒子塌陷的问题：

　　1.给父盒子添加overflow：hidden属性。[常用]

　　2.让父盒子也浮动（前提是父盒子的宽度为100%）。

　　3.在父容器的最后添加一个高度为0的空div并且添加clear：both属性。

　　4.使用伪对象选择器：：after生成一个空的元素

          #div4::after{
                            display: block;
                            content: "";
                            height: 0px;
                            clear: both;}

盒模型分类：

CSS3的 box-sizing：Content-box： 标准盒模型（W3C盒子） 。设置的宽和高就是本身内容区域的宽和高，也就是content区域，padding，border等都不算在内，添加padding，border后可是区域会变大。

Border-box： 怪异盒模型（IE盒子）。 设置的宽和高是可视化区域的所有的长度（content+padding+border），其中包含了padding，border等。如果添加了padding和border后，content区域会被亚索，可视区域不会变大。

手动改变盒子模型： 
　　　　
　　　　　#div{
   　　　　　　 box-sizing: border-box;
　　　　　　　　}

---

　　定位---position：

[相对定位]：

　　　　1、使用position：relative。设置成相对定位。

　　　　2、使用top/right/bottom/left设置定位的位置。

　　　　3、定位机制：

　　　　　　1.相对定位是相对自己原来所属位置进行定位。
　　　　　　2.相对定位不会释放掉原来自己所属的位置，也不会影响其他元素。
　　　　　　3.如果left/right同时存在，left生效。top/bottom同时存在，top生效。

　　　　4、关于Z轴的重叠次序：

　　　　　　 1.定位元素，默认的Z轴高于普通文档流和浮动元素。
　　　　　　 2.同为定位元素，后来者居上。
 　　　　　　3.可以使用z-index调整上下层关系（只能使用在定位元素）

　　　　

　　　[绝对定位]：
　　　　　　1、使用position：absolute。设置成绝对定位。
　　　　　　2、定位机制：
　　　　　　　　1.相对与第一个有定位的父元素进行定位。（第一个使用定位）
　　　　　　　　2.如果元素没有已定位的祖先元素，那么它的位置相对于浏览器左上角定位。
　　　　　　3、绝对定位文档流会彻底删除，原空间被释放。　

[固定定位]：

　　1、 使用position：fixed。设置成固定定位。是一种特殊的绝对定位。

　　2、元素的位置相对于浏览器窗口左上角定位。即使窗口是滚动的它也不会移动。

　　3、固定定位使元素的位置与文档流无关，因此不占据空间。

　　4、固定定位的元素和其他元素重叠。
　[Z-index]
　　1. 使用z-index可以调整层叠顺序。数值越大，层叠越往上；z-index数值相等，后来者居上。
　　2.  z-index只能作用于定位元素。
　　3. 元素的z-index属性要考虑父容器的z-index约束。

如果父容器设置了z-index，那么子容器不能脱离父容器的约束，而必须与父容器处同一级。

如果父容器没有设置z-index，或者设置了z-index：auto。则子元素不受父容器约束。
　　4. z-index：0与z-index：auto区别：
　　　　z-index：auto和z-index：0处于同一层，且z-index：auto是默认值。
　　　　z-index：auto不约束子元素；z-index：0约束子元素。

---

裁切 --- clip：

　　1、clip属性只能用于裁切图片，显示图片的指定区域。

　　2、clip属性只能作用于absolute和fixed定位的元素上。

　　3、属性值只接受一个rect函数，函数传入四个值，分别表示上右下左。

[注意]：与其他的上右下左不同，上下为从原图的上方到想要区域的顶部和底部的距离，左右为从原图的左边到想要区域的左端和右端的距离。

---

负边距应用：

设置元素在父容器中水平垂直居中，也可以增加元素的宽度。

　　1、设置子元素为定位元素。

　　2、给子元素添加属性：

left: 50%;
　　　　 top: 50%;
　　　　 margin-left: -(width/2)px;
　　　　 margin-top: -(height/2)px;