资讯专栏INFORMATION COLUMN

CSS中的包裹性

TIGERB / 2548人阅读

摘要:之前一直都知道中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。浮动经过测试,浮动元素会自动包裹内部元素。代码浮动元素具有包裹性为或除了之外的其他定位也都具有包裹性,可以看做特殊的。

之前一直都知道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不具有包裹性

所以,经过测试,并不是所有可以产生BFC的元素都具有包裹性。

应用场景:

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50495.html

相关文章

  • CSS中的包裹

    摘要:之前一直都知道中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。浮动经过测试,浮动元素会自动包裹内部元素。代码浮动元素具有包裹性为或除了之外的其他定位也都具有包裹性,可以看做特殊的。 之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。 什么是包裹性? 包裹性就是父元素的宽...

    zhangfaliang 评论0 收藏0
  • CSS基础入门之float

    摘要:在正常情况下,页面总是从左到右,从上到下布局,这种被称为正常的流。破坏文档流这是最本质的特性,因此设计的初衷就是破坏文档流。但是也有一种情况是,浮动元素前后并没有内联元素,因此也就不存在行框盒子,这时候就是浮动锚点在起作用。 前几天有小伙伴说对float的学习云里雾里的,下面我就给大家说一下关于float的一些问题。 在css中,是存在流的概念的。在正常情况下,页面总是从左到右,从上到...

    xinhaip 评论0 收藏0
  • 深入理解css之float

    摘要:破坏文档流这是最本质的特性,因此设计的初衷就是破坏文档流。但是也有一种情况是,浮动元素前后并没有内联元素,因此也就不存在行框盒子,这时候就是浮动锚点在起作用。 前言 在css中,是存在流的概念的。在正常情况下,页面总是从左到右,从上到下布局,这种被称为正常的流。但是有很多情况,正常流是没办法实现的,因此我们需要一些手段来破坏流,从而实现一些特殊的布局,而本节的主角float就具备破坏流...

    Nekron 评论0 收藏0
  • 重拾css(9)——float

    摘要:导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏,父子关系解除。 1.引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以,系统的学一学float是非常...

    CollinPeng 评论0 收藏0

发表评论

0条评论

TIGERB

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<