CSS Display属性的双值写法

更新日期: 2019-11-02阅读: 2.2k标签: 属性

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 属性的标准中现在允许接收两个值,第一个值用来描述他的外在表现,第二个值用来描述其子元素的格式。下面的列表中展示了部分新标准与单一值的对照:


完整版请访问CSS Display Module Level(https://drafts.csswg.org/css-display/#typedef-display-legacy)

目前为止,这个双值的写法只有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.

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

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


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


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

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

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


参考文章

  1. https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/?utm_source=dev-newsletter&utm_medium=email&utm_campaign=oct24-2019&utm_content=css

  2. https://div.io/topic/1973

本文转载自奇舞周刊, 作者奇舞团前端开发工程师刘冰晶。  

原文链接:https://mp.weixin.qq.com/s/vREgwh-T7RiuQaAqyil0Og 

 

链接: https://www.fly63.com/article/detial/6235

display: none;与visibility: hidden;的区别

display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见,display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;

属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;

readonly与disabled的区别

readonly 只对 <input> 和 <textarea> 标签有效;disabled 对所有表单元素都有效, 包括:<input>, <textarea>, <button>, <label>, <option>, <select>等

css的overflow属性

事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差别,今天测试了一下,总算是明白了。visible: 不剪切内容。hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。

Vue Prop属性功能与用法实例

这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值

深入剖析z-index属性

层叠顺序的大小比较;层叠顺序级别高的元素覆盖级别低的元素。首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

css属性分类介绍

CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性

css中word-wrap white-space word-break textoverflow的使用

word-wrap正常来说,在一行文本中,如果出现这一行已经放不下的单词,浏览器会自动将该文字转入下一行。white-space规定段落中的文本不进行换行。

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!