CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

最新推荐文章于 2023-09-18 19:50:09 发布

叨唠

最新推荐文章于 2023-09-18 19:50:09 发布

阅读量273

点赞数

分类专栏：前端web CSS 文章标签： css盒模型 position定位 bfc float浮动流 margin塌陷合并

本文链接：https://blog.csdn.net/zyz00000000/article/details/82633646

版权

前端web 同时被 2 个专栏收录

66 篇文章 2 订阅

订阅专栏

CSS

8 篇文章 1 订阅

订阅专栏

1. 盒模型

和模型包括：content区、padding区、border区、margin区

注意：padding和content区的颜色一样；border有自己的颜色；

问：如果border是虚线，那么虚线之间的颜色是什么呢？

答：跟content、padding颜色一样

有趣的理解：盒模型三个区的颜色：content区是帝都，相邻的padding受content控制，颜色与content一致，而border太远，border管的地方由border自己决定（哪怕不设置，默认都透明色|白色），border不管的地方（border-style：dashed、dotted），还是归content管的

2. position定位

（1）absolute：脱离原来位置，有层级，高，产生bfc；相对于有定位的父级进行定位，没有定位的父级，相对于文档定位。

（2）relative：保留原来位置，有层级，但不高。不产生bfc；相对于自己原来的位置（在一个块内的位置，如果父级、祖父级移动，它也会跟着移动）

有趣的理解：position：relative；灵魂出窍，肉身还在。其他元素都可以看见肉身，都以肉身为准。

relative作为参照物，absolute作为定位。

（3）fixed：相对于屏幕定位，不管页面怎么移动，fixed的元素，相对于屏幕的位置是不变的。

讨论：

（1）正常情况下，子级的整个盒模型（content、padding、border、margin）左上角与父级的content区的左上角重叠

    .father{
      width: 200px;
      height: 200px;
      border: 10px solid black;
      padding: 20px;
      overflow: hidden;
      white-space: nowrap;
      background: green;
    }
    .son{
      width: 100px;
      height: 100px;
      border: 5px dotted red;
      margin: 3px;
      background: yellow;
    }

父级：

子级：

效果：

（2）父级是定位元素，子级position：absolute；那么子级的盒模型的左上角与父级的padding左上角重叠

（3）position：relative；在正常情况下（无定位的情况下），position：relative通过top和left或者right和bottom与原来位置进行定位

3. bfc：block format content块级元素格式上下文，改变了块级结构的内部块的排列方式，比如：给父级设置float：left，那么子级就会在父级内从左到右的排列。

块级元素的哪些属性可以触发bfc？

float 除了none（left、right）
overflow 除了visible（hidden，auto，scroll ）
display (inline-block, flex, inline-flex，table-cell，table-caption)
position值为（absolute，fixed）由此可见，position：relative并没有改变盒模型的内部结构

4. margin的两个问题

父子级的margin-top取最大的那个值，作为他们的垂直距离

兄弟级的margin-top和marginbottom也是取最大的那个值，作为他们的垂直距离

（1）margin塌陷：父子级的块级元素，垂直方向的margin，父子共用父子中margin值最大的那个，比如：父级的margin-top：100px；子级的margin-top：50px；那么父级和子级margin-top都是100px；

解决办法：父级触发bfc，父级是父级的margin-top，子级是子级的margin-top；

实例中：父级相对于文档，margin-top：100px；子级相对于父级，margin-top：50px；

（2）margin合并：兄弟结构的块级元素，垂直方向上的margin取最大那个margin值。比如：上一个块级的margin-bottom：100px；下一个块级元素的margin-top：50px；那么两个块级元素的垂直margin距离是100px。

解决办法：给其中一个加一个触发bfc的父级，当然，你要是给另一个也加一个触发bfc的父级也可以。

实例：上一个块级元素的margin-bottom：100px；下一个块级元素的margin-top：30px；

实例效果：

注意：在解决margin合并的时候，加了一个触发bfc的父级HTML标签，这是在HTML结构上添加标签，修改结构，不好。所以，margin合并，不要去解决，就使用margin的这种特性。

5. float

（1）特性：给父级设置float，那么子级就会在父级内依次排列，每一行不可溢出父级的宽度，换行排列。

（2）特性：子级元素之间没有文本间隙8px。

（3）特性：display：inline-block。

（4）产生浮动流：普通的块级元素看不见产生浮动流的元素，所以会与浮动元素处在同一位置（重叠）的下面

（5）清除浮动流：

实例代码：由于wrapper里面的子级是float，产生了浮动流，这时，父级wrapper看不到自己的子级，高度不能被撑开，所以要在子级的后面借用一个p标签，清除左右两侧的浮动流。

    <style>
    .wrapper {
        border: 1px solid black;
    }
    .wrapper div {
        float: left;
        width: 50px;
        height: 50px;
        background-color: green;
        column-rule-color: red;
    }
    p {
        clear: both;
    }
    </style>

<body>

    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <p></p>
    </div>

</body>

效果：注意此处的p标签失去了段落效果。