‘display‘、‘position‘和‘float‘的相互关系？

于 2022-04-08 16:02:36 发布
阅读量1.1k 收藏 5
点赞数 1
分类专栏： CSS面试 文章标签： css display position float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47450807/article/details/124042985
版权

一、这三种属性之间的关系和相互作用效果可以用下图表示：
在这里插入图片描述
display转化表

设定值 转换后
inline-table table
inline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption table
其他 保持设定值

二、具体流程如下所示
2.1、display为none
当元素的display设置为none时，则position和float都不起作用。
2.2、position是absolute或fixed
当元素display值不为none，而position是absolute或者fixed时，此时float不起作用，计算值也为none（原文中有计算方法，

最低0.47元/天 解锁文章
卖菜的小白
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
weixin_34405557的博客
10-26 342
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block; 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位; position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-...
浅谈CSS中display/float/position属性值的相互影响
12-13
有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、position、float----笔记
agc48488的博客
09-19 91
1、元素分为行元素（span、input。。。）和块元素（div、ul。。。） 行元素：在一行中平行排列，不能改变其宽度和高度，自身高度被其内容撑开。 块元素：垂直排列，可以修改其宽和高（top、right、bottom、left），自身带有自动换行功能。 2、display display的常用属性： （1）none：脱离文档流，内...
display、float、position的关系
笑望灬星辰
04-01 450
display、float、position的关系 如果 display 取值为 none ，那么 position 和 float 都不起作⽤，这种情况下元素不产⽣框 否则，如果 position 取值为 absolute 或者 fixed ，框就是绝对定位的， float 的计 算值为 none ， display 根据下⾯的表格进⾏调整。 否则，如果 float 不是 none ，框是浮动的， display 根据下表进⾏调整 否则，如果元素是根元素， display 根据下表进⾏调整
display position float 之间的关系
BigDaddy233333的博客
11-10 3410
三个属性 display属性规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素……….（display种类很多，可查阅资料http://www.w3school.com.cn/cssref/pr_class_display.asp） position属性...
css(display,float,position)深入理解
12-13
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否...
如何用float配合position:relative实现居中
09-25
总结来说，通过巧妙地结合`float`和`position:relative`，我们能够有效地解决IE6和IE7浏览器中元素居中对齐的问题，而无需使用可能导致兼容性问题的`display:inline-block`。这种方法虽然在某些情况下可能需要额外的...
display:none; 失效原因
热门推荐
harry_yaya的博客
06-14 2万+
可能是元素之前已经设置了 display的类型，例如： .icon-openEye{ display:inline-block; position: relative; left: -12%; width: 22px; height: 22px; } 此时，我再通过jQuery的方法为该元素添加一个none的class. $('.icon-openEye').addClass('non...
'display'、'position' 和 'float' 的相互关系
lixiaohong2012的博客
05-05 1038
转换对应表：这一节是为了调和三种布局和框形成的关键特性( display )之间的关系而设。总的来说，可以把它看作是一个类似优先级的机制， “position:absolute” 和 “position:fixed” 优先级最高，有它存在的时候，浮动不起作用，’display’ 的值也需要调整； 其次，元素的 ‘float’ 特性的值不是 “none” 的时候或者它是根元素的时候，调整 ‘displ
display, position和float的关系
Jessica0906的博客
11-13 1039
display, position和float的关系？ （ps：第一次被问到这个问题时候其实是一脸懵逼，因为在此之前压根没把这仨放一起对比研究过，直接把他们有的分到了萝卜筐，有的分到了白菜筐，主观上没觉得有啥关系，只觉得他们是各司其职的，不过稍微一琢磨他们还是有点关联和相互制约的，以下是参考了别人的答案和自己实验得出一些粗浅的关系） ①如果display设置为none，那positio
position属性，display属性，float属性
weixin_57727027的博客
05-08 440
position属性，display属性，float属性 讲到盒模型，有三大属性可以用来控制页面的排版。 三大属性：position属性，display属性，float属性。 ①position 属性控制页面上元素间的位置关系。规定元素的定位类型。 定义建立元素布局要用的定位机制，每一个元素都是可以定位的，不论此元素本身是什么类型，绝对定位（absolute）的元素或固定定位（fixed）的元素会生成一个块级框。 而相对定位（relative）的元素会相对于它自身在正常的文档流中的默认..
display 、position、float 关系
qq_29738977的博客
01-30 319
1、display 为none ，position和 float都不起作用 2、否则，position为absolute或者fixed，float的计算值为none，display根据下面的表格进行调整。 3、否则，如果float不是none ，display根据下表进行调整。 4、否则，如果元素是根元素，display根据下表进行调整 5、其他情况下display的值为指定值，总结起来：绝对定位...
display，position 和 float 的相互关系
qq_42164670的博客
11-12 560
摘要： 文章转自:http://www.w3help.org/zh-cn/kb/009/三种定位体系简介框(box)布局影响因素之一,便是定位体系。定位体系也是其最为重要的影响因素。CSS2.1中,一个框可以根据三种定位体系布局。CSS2.1中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果。常规流(Normalflow)常规流,是对"normal...
css display position float 之间的关系
朝阳39的博客
07-22 209
看display是否为none，若是，则position和float 都不起作用，因为该元素不会被渲染； 看positon是否为absolute或fixed，若是，则float最终的计算值为none’，display最终的计算值为table或block【详见下表】 看float是否不是none，若float不是none，则元素会浮动，display最终的计算值为table或block【详见下表】 看该元素是否为根元素，若是根元素，则display最终的计算值为table或block【详见下表】，若不是根元.
CSS对display,position,和float之间关系的定义
hwluo12的博客
05-16 595
对‘display’，‘position’和‘float’之间关系的定义影响框的生成和布局的三个属性——’display’，’position’和’float’——间的相互关系如下：1.display值是none如果’display’设置为’none’，用户端必须忽略掉’position’和’float’。在这种情况下，元素不产生框。若display不是none，则继续2.‘position’ 的值
css position属性 以及 float、display、position的问题整合
evilemon的博客
07-02 1415
在css中，有两个属性可以破坏文档流：一个就是float属性，另一个就是position属性。 假设一个父级元素未定义高度（默认div的宽度是100%，即最大化；高度是最小化，即如果div没有设置高度，则其虽然占据物理空间，但是在页面上显示不出来），它的高度就要由子元素来填充，这时，如果设置子元素float属性，子元素就会脱离文档流，当所有的子元素都脱离了文档流，父级元素的高度就变为0，无法显示
CSS布局 ——display，position， float
b850824的博客
06-27 439
CSS布局 ——display，position， float 页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性  块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input
CSS 定位体系概述
gyflyx的专栏
01-16 725
三种定位体系简介 • 选择定位方案：'position' 特性 • 'display'、'position' 和 'float' 的相互关系 作者：武利剑 文章来源：http://w3help.org/zh-cn/kb/009/ 三种定位体系简介 框( box )布局影响因素之一，便是定位体系。定位体系也是其最为重要的影响因素。 CSS2.1 中，一个框可以根据三
display和position和float
最新发布
06-28
display是CSS中的一个属性，用于指定元素的显示方式，常见的取值有block、inline、inline-block、none等。 position也是CSS中的一个属性，用于指定元素的定位方式，常见的取值有static、relative、absolute、fixed...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值