调皮的内边距 7.5

案例：实现图片的居中显示

如果定义一个盒子的width那么默认定义的是盒子中的内容级concent,那么对padding内边距赋值后，会撑开盒子

所以要实现图片的居中显示有3个方法

方案1：撑开盒子后，重新定义盒子大小，因为默认定义的是盒子中的内容级，那么重新第一盒子大小后，内容级会跟着调整

实例

.box1{
    background-color: aquamarine;
    border: red solid 1px;
    width: 300px;
    height: 300px;
    padding: 50px;
}
.box1{
    width: 200px;
    height: 200px;

方案2：利用于嵌套盒子之间,只有宽度可以继承的特征 举例说明，如果父盒子宽度300，那么子盒子自动继承300宽度，然后子盒子中定义了padding值50 所以子盒子中的内容级concent值只有200了！

实例

.warp {
    width: 300px;
}
/*.box现在就是wrap的内容*/
.box2 {
    padding: 50px;
    background-color: lightblue;
    border: 1px solid black;
}

方案3：因为width的默认赋值为内容级concent，加padding必然会撑开，那么定义width的赋值为border边框的话，给padding赋值越大，concent值就随之变小！

 

实例

.box3 {
                      width: 300px;
                      box-sizing: border-box;
                      background-color: lightpink;
                      border: 1px solid black;

 /*内边距不会撑开盒子, 因为宽度作用到了边框级, 与内容无关*/
                      padding: 50px;
}