盒子模型

简介

在这里插入图片描述
三个属性均有四个方向。上top、右right、下bottom、左left。

外间距的合并

当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并
当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并
外边距的合并的好处，让排版在视觉上显得更美观

定位方式

绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量。

相对定位

先设置元素的position属性为relative,然后再设置偏移量

固定定位

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

层级

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

注意：只能给非static定位的元素设置z-index属性。

浮动

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示。

   .box{
      padding: 30px;
      border: 1px solid #006DFD;
      overflow: hidden; /*忽略子标签浮动后，子标签无法撑开父标签的影响*/
    }
    .box>.child1{
      width: 200px;
      height: 200px;
      background-color: #fce876;
      float: left;
    }
    .box>.child2{
      width: 200px;
      height: 200px;
      background-color: #aa6c3d;
      float: right;
    }

清除

通过clear属性设定不能浮动。

<body>
    <div class="content">
        <div class="float">
            <img src="https://hbimg.huabanimg.com/e03ca907eaf70ab4667f7d3bd0df897482a876312acd4-SOsqYW_fw658/format/webp" alt="">
        </div>
        <div class="background"></div>
        <div class="clear"></div>
        <div class="next"></div>
    </div>
</body>

.clear{
    clear: both;
}

css-----基础2

目录