web前端入门到实战:CSS Display属性的双值写法

display属性

display 属性用来控制一个元素及其子元素的 格式化上下文, 你应该在刚刚学习CSS的时候就知道,有些元素是块级元素,有些则是行内元素。

有了 display 属性,你就可以切换元素不同的状态。比如说,通常一个 h1 元素是一个块级元素,但是通过切换,它就能以内联元素展现。

这几年,我们也知道了Grid 布局和弹性盒布局。我们只需要将 display 属性的值设置为 display: grid 或 display: flex 就可以实现这两种布局。当 display 属性改变后,其子元素才变成了flex或者grid元素,从而对一些特性进行响应。

display: grid 和 display: flex 对一个元素的产生了对外和对内两方面的影响。当一个原本是内联元素 span 的 display 属性被设置为 flex ,这个 span 元素就会变为一个块级元素,但其子元素却变为flex元素。如果我们想要这个被应用 display: grid 或 display: flex 的元素保持内联效果不变,则可以设置其为 display: inline-grid 或 display: inline-flex 。请看下面的代码片段:

改造display属性

display 属性可以从两个维度描述元素,对外来说它用来确认一个元素在普通文档流中的表现,比如说是块级元素或是内联元素;对内来说它改变其子元素的格式化上下文。

为了更好地描述这个行为,css的 display 属性的标准中现在允许接收两个值,第一个值用来描述他的外在表现,第二个值用来描述其子元素的格式。下面的列表中展示了部分新标准与单一值的对照:

目前为止,这个双值的写法只有Firefox 70实现了支持。

display: inline-block和display: flow-root

你也许注意到了, 原来的 display: block 变成了 display: block flow , display: inline 变成了 display: inline flow ,但是 flow-root 这个值是什么意思呢?

实际上,这个属性并不是一个新的属性,而是在CSS2里面就有的属性。

[flow-root]

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

翻译过来就是,应用这个属性之后的元素会生成一个块级容器盒,并使用流式布局将其内容展示出来,它总是为其内容创建新的块级上下文。

下面的示例中展现了应用 flow-root 及未应用的区别。

实际上 display: inline-block 和 display: flow-root 两个关联紧密,因为 display: inline-block 实际上就是 display: inline flow-root 。

我们现在能用这个双值属性吗?

目前这个只有Firefox70支持了这一语法,其他的浏览器仍将其当成非法的语法处理,因此生产情况下使用还是为时过早。目前所有的功能都可以用单一值来实现,所以这个新的语法可能会作为别名的形式存在,并且没有必要进行一刀式切换。

然而,这种双值的写法有助于理解display属性的对内对外表现,它很清晰地展示了display对其自己以及其子元素的影响。无论是教学还是自学层面来说,清晰的关系总是会更好一些,不是吗?

原文地址:https://blog.51cto.com/14592820/2448607

时间: 2024-10-25 10:16:00

web前端入门到实战:CSS Display属性的双值写法的相关文章

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

web前端入门到实战:css之background-position属性实现雪碧图

什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分. 为什么要用雪碧图 可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象. 用雪碧图有什么弊端 个人认为如果你的雪碧图不是很大,也不是很复杂基本没什么弊端.如果你的雪碧图很大又复杂的话就有出现css代码复查,网页占内存大等各种问题. 实例 上面是一个按钮

web前端入门到实战:CSS属性width和height

width 是定义元素内容区的宽度:height是定义元素在内容区的高度. 在内容区外面可以增加内边距(padding).边框(border)和外边距(margin),这样的话就成了我们常说的盒子模型,后期内容中会给大家讲到这些, 在行内非替换元素会忽略width这个属性,也就是我们不定义这个元素的时候,默认值为auto,由内容将其撑开. 绝对单位 1. 像素px(pixels),在web上,像素px是典型的度量单位,这也是我们最常用的单位.像其他一些单位最终,都会被按照像素处理2. 英寸in(

web前端入门到实战:html/css弹性布局的几大常用属性详解

弹性布局的名称概念: 1.容器:需要添加弹性布局的父元素:项目:弹性布局容器中的每一个子元素,称为项目. 2.主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴:与主轴垂直的另一方向,称为交叉轴. 弹性布局的重要的几大基础属性: 1.flex-direction属性决定主轴的方向(即项目的排列方向). row(默认值): 主轴为水平方向,起点在左端: row-reverse: 主轴在水平方向,起点在右端 : column:主轴为垂直方向,起点在上沿. co

web前端入门到实战:CSS box-sizing属性的正确用法

CSS自定义属性(变量) CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框. 没有CSS box-sizing属性 默认情况下,元素的宽度和高度计算如下: width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着:当您设置元素的宽度/高度时,元素通常看起来比您设置的大(因为元素的边框和填充被添加到元素的指定宽度/高度). 下图显示了两个具有相同指定宽度和高度的<div>元素:

web前端入门到实战:CSS实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而实现平行四边形效果 HTML如下: <div class="input-x"> <input class="input" placeholder="您的姓名"> </div> CSS如下,形状的关键就是下面红色高亮

web前端入门到实战:CSS自定义属性+CSS Grid网格实现超级的布局能力

最近我还注意到的一件事就是CSS自定义属性.CSS自定义属性的工作方式有点像SASS和其他预处理器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是原本的CSS写法.CSS自定义属性是真正的动态变量,可以在样式表中或使用javascript即时更新,这使得它们具有更多的可能性.如果你熟悉JavaScript,我喜欢把预处理器变量和CSS自定义属性之间的区别想象成与const和let之间的区别相似--它们都有不同的用途. CSS自定义属性可以方便的实现很多功能(例如主题变化).最近我一

web前端入门到实战:CSS阴影效果的比较 drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影.底下是二个css属性的用法: .drop-shadow { -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)); filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.

web前端入门到实战:css浮动的特性,与浮动带来的影响以及如何清除浮动

块元素在文档流中默认垂直排列,所以多个div从上至下依次排开 如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动的特性 1.浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围 2.元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素 3.如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素 4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤 5.块元素脱离