返回顶部
首页 > 资讯 > 精选 >CSS属性display:flow-root声明怎么用
  • 147
分享到

CSS属性display:flow-root声明怎么用

2023-06-08 04:06:47 147人浏览 独家记忆
摘要

小编给大家分享一下CSS属性display:flow-root声明怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、Safari浏览器支持了display:

小编给大家分享一下CSS属性display:flow-root声明怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一、Safari浏览器支持了

display:flow-root 刚出来的时候,我一看兼容性,啧啧,不知道猴年马月才能用在生产环境,今天又遇到这厮,一查兼容性,嘿,小子,不错嘛,Safari浏览器从版本13开始支持了,距离流行使用指日可待。

CSS属性display:flow-root声明怎么用

二、display:flow-root干嘛用的?

元素,无论是内联元素,还是原本就是块级元素,在应用 display:flow-root 声明后,都会变成块级元素,同时这个元素会建立新的块级格式上下文,也就是业界常说的BFC。

关于BFC,可以参考我之前的这篇经典文章:“ CSS深入理解流体特性和BFC特性下多栏自适应布局 ”。

BFC除了可以用来布局之外,还有清除浮动,以及去除margin合并现象的作用,因此, display:flow-root 也有类似的作用,相比float浮动,position绝对定位,或者overflow隐藏,inline-block等特性产生的块级格式上下文, display:flow-root 不会给元素带来额外的副作用,例如 overflow:hidden 虽然可以去除浮动的干扰,但是,有可能会让子元素无法定位在容器外部。

使用 display:flow-root 就不会有这样的担忧。

例如下面这个例子,容器有轮廓,子元素浮动:

<p><img src="mm.jpg"></p>p {    outline: solid deepskyblue;    }img {    float: left;}

结果轮廓都合在一起了,如下图所示:

CSS属性display:flow-root声明怎么用

此时,只要给 <p> 元素设置 display:flow-root ,浮动导致元素高度塌陷的问题就不存在了:

p {    display: flow-root;}

效果如下截图所示:

CSS属性display:flow-root声明怎么用

类似的,margin属性合并的现象也可以使用 display:flow-root 阻止。

html代码如下:

<div class="box">    <p>margin: 2em;</p></div><div class="box flow-root">    <p>margin: 2em;</p></div>

CSS如下:

.box {    background-color: #f0f3f9;    }.box p {    outline: solid deepskyblue;    margin: 2em;}.flow-root {    display: flow-root;}

结果上面的容器元素margin被穿过去了,而下面的容器元素,因为设置了 display:flow-root ,所以margin穿透被阻止了,于是,里面 <p> 元素占据的空间就显得较大,如下图所示:

CSS属性display:flow-root声明怎么用

以上两个例子均有demo可以体验,您可以狠狠地点击这里: display:flowt-root作用示意demo

display:flow-root 还可以和浮动属性配合,实现两栏自适应的布局效果。

例如:

<div class="box flow-root">    <img src="mm.jpg">    <p class="flow-root">拼多多暴涨7%,市值突破700亿美元,超越京东。而黄峥个人财富也处于内地第三大富豪</p></div>
.box img {    float: left;    margin-right: 20px;}.box p {    background-color: #f0f3f9;    padding: 10px;}.flow-root {    display: flow-root;}

实时效果如下:

CSS属性display:flow-root声明怎么用

拼多多暴涨7%,市值突破700亿美元,超越京东。而黄峥个人财富也处于内地第三大富豪

三、结语

总结下本文要点

display:flow-root 可以让元素块状化,同时包含格式化上下文BFC,可以用来清除浮动,去除 margin 合并,实现两栏自适应布局等。

display:flow-roo t可以在部分项目中使用了。

display:flow

display 属性还支持一个目前处于试验形式的值,名为 flow ,表现为元素可能是内联框盒子,也可能是块级框盒子。

究竟渲染成哪个盒子与外部元素的显示类型相关,

要么生成内联格式化上下文,要么生成块级格式化上下文。如果元素外部显示类型为inline或run-in,并且元素参与block或inline格式上下文中,则元素表现为inline框,否则表现为block容器框。

根据是否包含格式化上下文属性(如 positionfloatoverflow )以及元素本身是否参与块或内联格式上下文, display:flow 元素要么为其内容建立新的块格式上下文(BFC),要么将其内容集成到其父格式上下文中。

display:flow 目前兼容性不详,估计目前没几个浏览器支持。

以上是“CSS属性display:flow-root声明怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: CSS属性display:flow-root声明怎么用

本文链接: https://www.lsjlt.com/news/251612.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS属性display:flow-root声明怎么用
    小编给大家分享一下CSS属性display:flow-root声明怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、Safari浏览器支持了display:...
    99+
    2023-06-08
  • css怎么在一个声明中定义所有的列表属性
    这篇文章将为大家详细讲解有关css怎么在一个声明中定义所有的列表属性,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<html> <head> &l...
    99+
    2024-04-02
  • css怎么使用简写属性来将所有背景属性设置在一个声明之中
    小编给大家分享一下css怎么使用简写属性来将所有背景属性设置在一个声明之中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!<...
    99+
    2024-04-02
  • CSS怎么声明分组
    这篇文章主要介绍了CSS怎么声明分组的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS怎么声明分组文章都会有所收获,下面我们一起来看看吧。 因为 background 对...
    99+
    2024-04-02
  • css怎么利用transparent属性设置透明度
    这篇文章给大家分享的是有关css怎么利用transparent属性设置透明度的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。     那么,大家是不是会问cs...
    99+
    2024-04-02
  • 详解Swift中属性的声明与作用
    一、引言 属性将值与类,结构体,枚举进行关联。Swift中的属性分为存储属性和计算属性两种,存储属性用于存储一个值,其只能用于类与结构体,计算属性用于计算一个值,其可以用于类,结构体和枚举。 二、存储属性 ...
    99+
    2022-06-04
    详解 属性 声明
  • Python中类的声明,使用,属性,实例
    类的定义: 定义类 在Python中,类的定义使用class关键字来实现 语法如下: class className: "类的注释" 类的实体 (当没有实体时 使用pass代替) 下面定义一个鸟类; class ...
    99+
    2023-01-31
    实例 属性 声明
  • css中中怎么利用filter:alpha属性设置透明度
    本篇文章给大家分享的是有关css中中怎么利用filter:alpha属性设置透明度,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 ...
    99+
    2024-04-02
  • css声明分组有什么用
    这篇文章主要介绍了css声明分组有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 因为 background 对 color 来说不...
    99+
    2024-04-02
  • CSS属性*-gradient怎么用
    小编给大家分享一下CSS属性*-gradient怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!圆锥渐变!对其感兴趣是因为我发现它竟然可以用来做圆饼图! 比如...
    99+
    2023-06-06
  • 常用的CSS透明属性有哪些
    本篇内容介绍了“常用的CSS透明属性有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码如下:.mas...
    99+
    2024-04-02
  • css中怎么使用border属性与display属性
    这篇文章主要介绍css中怎么使用border属性与display属性,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! css中如何使用border属性与display属性 bord...
    99+
    2024-04-02
  • Css字体属性和文本属性怎么用
    这篇文章主要为大家展示了“Css字体属性和文本属性怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Css字体属性和文本属性怎么用”这篇文章吧。字体属性:主要...
    99+
    2024-04-02
  • css中position属性及z-index属性怎么用
    这篇文章给大家分享的是有关css中position属性及z-index属性怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在网页设计中,position属性的使用是非常重要的...
    99+
    2024-04-02
  • CSS 中padding属性怎么用
    这篇文章将为大家详细讲解有关CSS 中padding属性怎么用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。CSS padding属性元素的内边距在边框和内...
    99+
    2024-04-02
  • css动画属性怎么用
    这篇文章给大家分享的是有关css动画属性怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1 transition(过渡)  使用语法:transition: property...
    99+
    2024-04-02
  • CSS的position属性怎么用
    这篇文章将为大家详细讲解有关CSS的position属性怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 经过使用 position 属性,我们可以选择 ...
    99+
    2024-04-02
  • css轮廓属性怎么用
    小编给大家分享一下css轮廓属性怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!     一、什么是css轮廓(outline)属性    ...
    99+
    2024-04-02
  • CSS属性font-kerning怎么用
    这篇文章主要为大家展示了“CSS属性font-kerning怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS属性font-kerning怎么用”这篇文...
    99+
    2024-04-02
  • CSS中position属性怎么用
    这篇文章主要为大家展示了“CSS中position属性怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS中position属性怎么用”这篇文章吧。目前几...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作