【Html】04-CSS盒子模型

（续）

4.margin：外边距

<style>
    body{
        margin:0;
    }
    div{
    width:300px;
    height:300px;
    margin-top:20px;
    margin-left:20px;    
    background-color:pink;
    }
</style>

盒子和盒子之间的距离

调整盒子与盒子之间的距离；可以有负值；

1.分样式写法

<style>
    margin-top:
    margin-left:
    margin-right:
    margin-bottom:
</style>

2.复合写法

<style>
   margin:30px;
</style>

margin:30px 上=右=下=左；

margin:10px 30px 上=下=10px;左=右=30px；

margin:10px 20px 30px 上=10px 右=左=20px 下=30px；

margin:10px 20px 30px 40px 上=10px 右=20px 下=30px 左=40px；

特殊值：auto；

margin=0 auto；左右的margin自适应居中

标准盒模型：content-box

实际大小：

​ width：

​ width[content]+padding[左右]+border[左右]

​ height：

​ height[content]+padding[上下]+border[上下]

实际占据空间大小：

​ width[content]+padding[左右]+border[左右]+margin[左右]

<style>
    width:280px;
    height:280px;
    padding:10px;
</style>

怪异盒模型:border-box

<style>
    width:300px;
    height:300px;
    padding:20px;
</style>

​ IE盒模型：border-box

​ 实际大小包含padding和border

​ 怪异盒模型的宽度 content=width-padding-border

​ 占据空间位置大小：content+padding+border+margin

margin外边距合并

<style>
    .boy{
        width:200px;
        height:200px;
        margin-bottom:30px;
        background-color:#000;
    }
    .girl{
        width:50px;
        height:50px;
        margin-top:50px;
        background-color:pink;
    }
</style>

盒子上下关系的外边距合并：

​ 谁的外边距大，就显示谁的外边距

解决方案：

​ 只给其中一个设置上外边距或者下外边距；

​ 设置边框线；

​

外边距的嵌套关系

​ 给父级设置边框线；

​ 给父级设置padding值;

​ 给父级添加overflow：hidden（溢出隐藏）

<style>
    .boy{
        width:200px;
        height:200px;
        background-color:#000;
    }
    .boy.girl{
        width:50px;
        height:50px;
        margin-top:50px;
        background-color:pink;
    }
</style>

border形状制作

<style>
        div {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-top-color: red;
            border-right-color: blue;
            border-bottom-color: green;
            border-left-color: purple;
        }
</style>

---

END