盒子模型简单练习之内外边距的使用

盒子模型练习

想让小盒子居中在大盒子正中间

1.控制外边距

<div class="box1">
    <div class="box2"></div>
</div>

.box1 {
    width: 500px;
    height: 500px;
    background-color: red;
    
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    margin: 150px;
}

给大盒子添加边框属性

border: 2px solid #000;

2.控制内边距

.box1 {
    width: 500px;
    height: 500px;
    background-color: red;
    box-sizing: border-box;
   padding: 150px;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;

}

注意点

1,如果两个盒子是嵌套关系，那么设置了里边一个盒子顶部的外边距，外边盒子也会被顶下来。

2.如果外边的盒子不想被顶下来，可以给它添加一个边框属性.

3.在企业开发中，一般情况下如果需要控制嵌套关系的盒子之间的距离，应该考虑padding内边距属性， 其次载考虑margin，margin本质是控制兄弟关系之间的间隙的。
4.在嵌套关系的盒子中，我们可以利用：
margin:0,auto;方式来让里边的水平居中，0不写也行。
margin:0,auto;只对水平方向有效，对垂直方向无效。

盒子居中和内容居中

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

1.text-align:center作用

设置盒子中存储的文字/图片水平居中

2. margin:0 auto;作用

让盒子自己水平居中