15.CSS-盒子模型

CSS盒子模型

在HTML中，所有的标签都可以设置宽度/高度、内边距、边框、外边距，HTML中所有的标签都是盒子。

宽度/高度（蓝色）：指定可以存放内容的区域。
内边距（绿色）
边框（黄色）
外边距（橘色）

盒子模型宽度和高度

1.内容的宽度和高度

内容的宽度和高度就是通过标签的width/height属性设置的宽度和高度。

2.元素的宽度和高度

宽度=左边框+左内边距+内容的宽度+右内边距+右边框
高度=上边框+上内边距+内容的高度+下内边距+下边框

3.元素空间的宽度和高度

宽度=左外边距+左边框+左内边距+内容的宽度+右内边距+右边框+右外边距
高度=上外边距+上边框+上内边距+内容的高度+下内边距+下边框+下外边距

    /*判断是否是内容宽高为100的盒子
    只需要看width/height是否为100即可*/
    .box1{
        width:50px;
        height: 50px;
        padding: 25px;
        background-color: green;
    }
    .box2{
        width: 96px;
        height: 96px;
        border: 2px solid #000;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

/*判断是否是元素宽高为200的盒子
只需要看 边框 + 内边距 + 内容宽度/内容高度 时候等于200即可*/
        .box4{
            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: red;
        }
        .box5{
            /*25+25+150 = 200*/
            width: 150px;
            height: 150px;
            border: 25px solid #000;
        }
        .box6{
            /*25+25+150 = 200*/
            /*5+5+20+20+150=200*/
            width: 150px;
            height: 150px;
            /*padding: 25px;*/
            padding:20px;
            border: 5px solid #000;
            background-color: blue;
        }

/*判断是否是元素空间宽高为300的盒子
只需要看 外边距+边框+内边距+内容宽度/内容高度*/
        .box7{
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .box8{
            /*
            50+50+25+25+25+25+100
            100 +50 +50 + 100
            300
            */
            width: 100px;
            height: 100px;
            padding: 25px;
            border: 25px solid #000;
            margin: 50px;
        }

/*现有如下盒子模型, 要求增加padding属性为25之后仍然保持元素宽高为200

        元素宽高 = 边框 + 内边距 + 内容宽高
                 = 0 + 0 + 200 = 200
                 = 0 + 25 + 25 + 200 = 250
                 = 0 + 25 + 25 + 150 = 200
         规律:
         1.增加了padding之后元素的宽高也会发生变化
         2.如果增加了padding之后还想保持元素的宽高, 那么就必须减去内容的宽高
*/
        .box9{
            width: 150px;
            height: 150px;
            padding: 25px;
            background-color: red;
        }

/*现有如下盒子模型, 要求增加border属性为20之后仍然保持元素宽高为200
        元素宽高 = 边框 + 内边距 + 内容宽高
                 = 0 + 0 + 200 = 200
                 = 0 + 20 + 20 + 200 = 240
                 = 0 + 20 + 20 + 160 = 200
          规律:
         1.增加了border之后元素的宽高也会发生变化
         2.如果增加了border之后还想保持元素的宽高, 那么就必须减去内容的宽高
*/
        .box10{
            width: 160px;
            height: 160px;
            border: 20px solid #000;
            background-color: deepskyblue;
        }

盒子box-sizing属性

1.CSS3新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border属性之后，盒子元素的宽度和高度不变。
2.box-sizing属性是如何保证新增padding和border属性之后，盒子元素的宽度和高度不变的？
新增padding和border属性之后，要想保证盒子元素的宽高不变，那么就必须减去一部分内容的宽度和高度。

1.取值

content-box：
元素的宽高=边框+内边距+内容宽高
border-box：
元素的宽高= width属性的值
增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

2.注意点

1.如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶上来；
2.如果外面的盒子不想一起被顶上来，那么可以给外面的盒子添加一个边框属性border: 5px solid #000;
3.在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次再考虑margin，因为margin本质上是用于控制兄弟关系之间的间隙的，padding才是控制父子关系的；
4.在嵌套关系的盒子中，我们可以利用margin：0 auto；的方式来让里面的盒子在外面的盒子中水平居中；
5.margin：0 auto；只对水平方向有效，对垂直方向无效。

text-align:center和margin:0 auto;的区别

text-align: center;
作用：设置盒子中存储的文字和图片水平居中

margin:0 auto;
作用：让盒子自己水平居中

清空默认边距

1.为什么要清空默认边距（外边距和内边距）？
在企业开发中为了更好地控制盒子的宽高和计算盒子的宽高，所以在企业开发中，编写代码之前的第一件事情就是清空默认边距。
2.如何清空默认的边距？
格式：

 *{
      margin: 0;
      padding: 0;
    }

3.注意点
通配符选择器会遍历当前界面中所有标签，所以性能不好。以下是企业开发中标准的清空默认边距的写法：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
     margin:0;
     padding:0
   }