zoukankan      html  css  js  c++  java
  • 探究CSS中的包裹性

    之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。

    什么是包裹性?

    包裹性就是父元素的宽度会收缩到和内部元素宽度一样。

    哪些元素具有包裹性?

    就我已知的有:absolute,fixed,float,inline-box等等。

    仔细看看这些元素,他们都有一个共同特点,那就是都会产生BFC,所以我大胆的猜想了一下,所有能产生BFC的元素都具有包裹性,下面就一个个验证。

    浮动

    经过测试,浮动元素会自动包裹内部元素。

    代码:浮动元素具有包裹性

    position为absolute或fixed

    除了relative之外的其他定位也都具有包裹性,fixed可以看做特殊的absolute。

    代码:定位元素具有包裹性

    overflow不为visible和zoom

    overflow和zoom无法自适应宽度,但是可以用来清除浮动,它们都可以包裹元素高度。

    代码:overflow和zoom元素不具有包裹性

    display为inline-block, table-cell, table-caption, flex, inline-flex

    经过测试,只有flex无法包裹,其他的都很好的包裹了。

    代码:只有flex不具有包裹性

    应用场景:

    个人认为,当遇到内部宽度不确定的时候,父元素又需要设置一个宽度,这时候包裹性就很有用处了,比如导航条里面,li宽度没有固定的时候,又希望ul的宽度和总宽度相同,这时候可以给ul设置inline-block等元素来解决。

    树叶的一生,只是为了归根么?
  • 相关阅读:
    第二题
    第一题
    biancheng
    用泰勒展开式计算sin
    矩阵求和
    1
    ti
    实验10
    实验9
    实验8
  • 原文地址:https://www.cnblogs.com/INGP/p/6497221.html
Copyright © 2011-2022 走看看