浅谈CSS中display/float/position属性值的相互影响
发布时间：2016-08-17 09:22:46 作者：佚名 
我要评论
我要评论下面小编就为大家带来一篇浅谈CSS中display/float/position属性值的相互影响。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
有3个属性和布局以及box的创建有关：'display', 'position' 和 'float'，彼此交互作用如下：
如果'display'值为'none'，则'position' 和 'float'无作用。这种情况下，不生成box。
否则，如果'position'值为'absolute' 或 'fixed', box被绝对定位，'float'的计算值为'none'，而'display'的值按下表设定。box的位置将由'top', 'right', 'bottom' 和 'left' 属性及其包容块所确定。
否则，如果'float'的值不是'none', box是浮动的并且'display'的值按下表设定。
否则，如果元素为根元素，'display'的值按下表设定（除了list-item指定值，该值被计算为'block'还是'list-item'，在CSS2.1中未定义。）
否则，其余情况下'display'属性值就是其指定的值。
其中inline-flex和flex是CSS3弹性布局模块引入的新属性值。
概括而言，绝对定位、弹性布局和网格布局容器的内容项的display属性会被块级化（blockified）。
以上这篇浅谈CSS中display/float/position属性值的相互影响就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了CSS中的 position属性sticky的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-12
css position属性为absolute时其百分值的计算
这篇文章主要介绍了css position属性为absolute时其百分值的计算,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2019-08-06
这篇文章主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料，position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和stic2018-12-17
这篇文章主要介绍了css中的position属性值的探究(小结)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-25css关于position属性的用法详解(绝对定位和相对定位的混淆)
下面小编就为大家带来一篇css关于position属性的用法详解(绝对定位和相对定位的混淆)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-08- 这篇文章主要介绍了图解CSS中position属性的定位用法,重点讲解了相对定位和绝对定位在页面布局中的作用,需要的朋友可以参考下2016-04-28
- 这篇文章主要介绍了CSS的position属性的完全解析,包括position和overflow在一些相似使用方面的对比,需要的朋友可以参考下2015-11-06
CSS样式position属性的一个小实例:z方向三层布局分析
使用CSS样式中的position属性实现z方向三层布局效果，本文甚是疑惑，于是乎搜集整理一番，晒出代码和大家分享一下2012-12-07- 这篇文章主要介绍了CSS 中的position属性实例详解,定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）2023-09-04
最新评论