css【详解】display、position、float 之间的关系

已于 2024-07-07 22:48:49 修改
阅读量404 收藏
点赞数
分类专栏： 已归档 # CSS # 前端面试题 文章标签： css 前端
于 2021-07-22 21:41:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41192489/article/details/119009647
版权
CSS 同时被 3 个专栏收录
148 篇文章 8 订阅
订阅专栏
已归档
16 篇文章 1 订阅
订阅专栏
前端面试题
14 篇文章 0 订阅
订阅专栏
本文深入探讨了CSS中display、position和float属性如何影响元素的渲染。当display为none时，元素不会被显示，position为absolute或fixed会使float失效。同时，详细解析了不同display值对元素最终计算值的影响，特别是对于根元素和浮动元素的处理规则。通过理解这些规则，开发者可以更好地控制网页布局和元素定位。
摘要由CSDN通过智能技术生成
  1. 看display是否为none，若是，则position和float 都不起作用，因为该元素不会被渲染；
  2. 看positon是否为absolute或fixed，若是，则float最终的计算值为none’，display最终的计算值为table或block【详见下表】
  3. 看float是否不是none，若float不是none，则元素会浮动，display最终的计算值为table或block【详见下表】
  4. 看该元素是否为根元素，若是根元素，则display最终的计算值为table或block【详见下表】，若不是根元素，则display的计算值为其指定值

在这里插入图片描述

display的指定值最终display的计算值
inline-tabletable
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-blockblock
其它与指定值相同
朝阳39
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
‘display‘、‘position‘和‘float‘的相互关系？
weixin_47450807的博客
04-08 1147
一、这三种属性之间的关系和相互作用效果可以用下图表示： 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 其他 保持设定值 二、具体流程如下所示
【CSS布局】详解display，position， float属性！
Sixstar_yanxin的博客
08-14 542
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ..
display,position和float之间的关系（Relationships between 'display', 'position ',and 'float ')
APieceOfBullshit
06-18 307
三个影响盒子构建和布局的元素——‘display’，‘position’ 和 ‘float’——相互影响如下： 1、如果‘display’ 取 ’none‘ 值，那么’position‘ 和 ’float‘ 的设置都不会应用。在这种情况下，元素不构建盒子（不显示） 2、否则，如果 ’postion‘ 取值为 ’absolute‘ 或者 ’fixed‘ ，那么该盒子就被放在绝对位...
知识点：float、position与display关系
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
12-25 2014
问： position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ float、position 和 display 之间的关系： 如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生； 除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属
display、float、position的关系
LuckXinXin的博客
05-08 326
如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。 否则，如果float不是none，框是浮动的，display根据下表进行调整 否则，如果元素是根元素，display根据下表进行调整 其他情况下...
CSS3 display知识详解
09-24
而当元素使用了position: absolute或fixed时，display的计算值会受到float和position属性的影响，可能会变为block或table等其他值。此外，旧版的Internet Explorer浏览器（如IE6和IE7）在处理display属性时存在限制...
一文掌握CSS 属性display:flow-root声明
11-20
`display:flow-root`是创建BFC的一种方式，与`float`、`position`（absolutely positioned）、`overflow`（除了`visible`）等其他属性创建的BFC不同，`display:flow-root`创建的BFC不会带来额外的副作用，如`...
CSS详解
createcoder的博客
09-07 1549
CSS
通俗易懂的CSS的常见布局方式以及浮动float详解（小白必看，会有帮助滴）
wangshuo0520ai的博客
03-01 882
通俗易懂的CSS的常见布局方式以及浮动float详解（小白必看，会有帮助滴）
浅谈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 之间的关系
BigDaddy233333的博客
11-10 3443
三个属性 display属性规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素……….（display种类很多，可查阅资料http://www.w3school.com.cn/cssref/pr_class_display.asp） position属性...
display 、position、float 关系
qq_29738977的博客
01-30 330
1、display 为none ，position和 float都不起作用 2、否则，position为absolute或者fixed，float的计算值为none，display根据下面的表格进行调整。 3、否则，如果float不是none ，display根据下表进行调整。 4、否则，如果元素是根元素，display根据下表进行调整 5、其他情况下display的值为指定值，总结起来：绝对定位...
display, position和float的关系
Jessica0906的博客
11-13 1056
display, position和float的关系？ （ps：第一次被问到这个问题时候其实是一脸懵逼，因为在此之前压根没把这仨放一起对比研究过，直接把他们有的分到了萝卜筐，有的分到了白菜筐，主观上没觉得有啥关系，只觉得他们是各司其职的，不过稍微一琢磨他们还是有点关联和相互制约的，以下是参考了别人的答案和自己实验得出一些粗浅的关系） ①如果display设置为none，那positio
display，position 和 float 的相互关系
qq_42164670的博客
11-12 571
摘要： 文章转自:http://www.w3help.org/zh-cn/kb/009/三种定位体系简介框(box)布局影响因素之一,便是定位体系。定位体系也是其最为重要的影响因素。CSS2.1中,一个框可以根据三种定位体系布局。CSS2.1中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果。常规流(Normalflow)常规流,是对"normal...
'display'、'position' 和 'float' 的相互关系
lixiaohong2012的博客
05-05 1047
转换对应表：这一节是为了调和三种布局和框形成的关键特性( display )之间的关系而设。总的来说，可以把它看作是一个类似优先级的机制， “position:absolute” 和 “position:fixed” 优先级最高，有它存在的时候，浮动不起作用，’display’ 的值也需要调整； 其次，元素的 ‘float’ 特性的值不是 “none” 的时候或者它是根元素的时候，调整 ‘displ
display与position，float之间的关系
weixin_44392745的博客
06-26 844
positon 与 display 的相互关系 元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。 relative : 原来是什么类型的依旧是什么类型。 absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位 <span style=”position:absolute; width:100px; height:50px;”>sp
'display'、'position'和'float'的相互关系
ApologizeError的博客
05-12 405
原文链接 （1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。 （2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被 设置为table或者block，具体转换需要看初始转换值。 （3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display 的值则按上面的规则转换。注意，如果positi
overflow: hidden;display: flex;display: inline-flex;display: inline-block;position: absolute;position: fixed;
最新发布
05-31
这是一些CSS属性，可以用来控制HTML元素的布局和位置。具体如下： - overflow: hidden： 当元素内容超出其高度和宽度时，隐藏额外的内容。 - display: flex：用于弹性布局，可以使元素在同一方向上对齐，能够轻松控制元素的宽度、高度、间距和排序。 - display: inline-flex：与flex相似，但是它是在行内而不是块内。 - display: inline-block：行内块元素，与默认的行内元素相似，但可以设置宽度和高度。 - position: absolute：基于最近的非 static 定位祖先元素的位置来确定元素自身位置，不会改变其他元素的位置。 - position: fixed：元素相对于视口的位置而不是相对于文档的位置进行定位，即无论滚动条如何滚动，元素的位置都不会改变。 范例： ``` 假设我有一个div元素，它的id为myDiv，并且我希望它始终在浏览器窗口的右下角，宽度为200px，高度为100px，同时不显示溢出的内容，并且在内部使用弹性布局。我会这样设置CSS属性： #myDiv{ position: fixed; bottom: 0; right: 0; width: 200px; height: 100px; overflow: hidden; display: flex; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值