display、float、position的关系

最新推荐文章于 2025-05-24 23:26:38 发布
原创 最新推荐文章于 2025-05-24 23:26:38 发布 · 203 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文详细阐述了元素的定位方式（绝对定位、浮动和根元素）如何影响display属性，以及不同display值的调整策略。理解这些规则有助于提升前端布局和定位技巧。
  • 如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框
  • 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。

  • 否则，如果float不是none，框是浮动的，display根据下表进行调整
  • 否则，如果元素是根元素，display根据下表进行调整
  • 其他情况下display的值为指定值
  • 总结起来：绝对定位、浮动、根元素都需要调整display
‘display‘、‘position‘和‘float‘的相互关系？
weixin_47450807的博客
04-08 1236
一、这三种属性之间的关系和相互作用效果可以用下图表示： 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 其他 保持设定值 二、具体流程如下所示
display 、float 、position的关系 display作用是什么?display:inline-block会不会显示间隙？行内元素float:left后是否变为块级元素？flex 布局
星辰迷上大海的博客
01-03 2378
使用Flex布局可以轻松实现响应式设计、等高布局、对齐等复杂的布局需求，比传统布局方式更加灵活方便。
浅谈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之间的关系
weixin_44392745的博客
06-26 938
positon 与 display 的相互关系 元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。 relative : 原来是什么类型的依旧是什么类型。 absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位 <span style=”position:absolute; width:100px; height:50px;”>sp
display float position 关系
03-16
display float position关系指的是CSS中的浮动和定位属性之间的关系。浮动属性可以让元素脱离文档流并向左或向右浮动，而定位属性可以让元素相对于其父元素或文档进行定位。在使用浮动和定位属性时，需要注意它们的...
css(display,float,position)深入理解
12-13
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否...
display 、position、float 关系
qq_29738977的博客
01-30 412
1、display 为none ，position和 float都不起作用 2、否则，position为absolute或者fixed，float的计算值为none，display根据下面的表格进行调整。 3、否则，如果float不是none ，display根据下表进行调整。 4、否则，如果元素是根元素，display根据下表进行调整 5、其他情况下display的值为指定值，总结起来：绝对定位...
知识点：float、position与display关系
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
12-25 2137
问： position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ float、position 和 display 之间的关系： 如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生； 除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属
'display'、'position' 和 'float' 的相互关系
lixiaohong2012的博客
05-05 1145
转换对应表：这一节是为了调和三种布局和框形成的关键特性( display )之间的关系而设。总的来说，可以把它看作是一个类似优先级的机制， “position:absolute” 和 “position:fixed” 优先级最高，有它存在的时候，浮动不起作用，’display’ 的值也需要调整； 其次，元素的 ‘float’ 特性的值不是 “none” 的时候或者它是根元素的时候，调整 ‘displ
【CSS 面经】display、float、position 的关系
lph159的博客
12-07 1032
在网页布局中，`display`、`float` 和 `position` 是三个非常重要的属性，它们直接影响元素的显示方式和位置安排。掌握它们之间的关系，对理解 CSS 布局模型至关重要。本文将深入探讨这三个属性的作用、区别以及如何正确地将它们组合使用来实现各种布局效果。
display,position和float之间的关系
zccst的专栏
03-17 649
作者：zccst [b]对‘display’，‘position’和‘float’之间关系的定义[/b] 英文原文：[url]http://dbaron.org/css/test/sec0907[/url] 影响框的生成和布局的三个属性——'display'，'position'和'float'——间的相互关系如下： 1，如果'display'设置为'none'，用户端必须忽略掉'po...
CSS 定位体系概述
gyflyx的专栏
01-16 808
三种定位体系简介 • 选择定位方案：'position' 特性 • 'display'、'position' 和 'float' 的相互关系 作者：武利剑 文章来源：http://w3help.org/zh-cn/kb/009/ 三种定位体系简介 框( box )布局影响因素之一，便是定位体系。定位体系也是其最为重要的影响因素。 CSS2.1 中，一个框可以根据三
display,position和float之间的关系（Relationships between 'display', 'position ',and 'float ')
APieceOfBullshit
06-18 379
三个影响盒子构建和布局的元素——‘display’，‘position’ 和 ‘float’——相互影响如下： 1、如果‘display’ 取 ’none‘ 值，那么’position‘ 和 ’float‘ 的设置都不会应用。在这种情况下，元素不构建盒子（不显示） 2、否则，如果 ’postion‘ 取值为 ’absolute‘ 或者 ’fixed‘ ，那么该盒子就被放在绝对位...
css【详解】display、position、float 之间的关系
朝阳39的博客
07-22 568
看display是否为none，若是，则position和float 都不起作用，因为该元素不会被渲染； 看positon是否为absolute或fixed，若是，则float最终的计算值为none’，display最终的计算值为table或block【详见下表】 看float是否不是none，若float不是none，则元素会浮动，display最终的计算值为table或block【详见下表】 看该元素是否为根元素，若是根元素，则display最终的计算值为table或block【详见下表】，若不是根元.
搞懂 display、position 和 float 的关系，布局题不再慌！
最新发布
残影的博客
05-24 987
在构建网页布局时，是三种最基础但又最容易被忽视的布局机制。display决定元素的外部表现形式position决定元素的定位方式float原本用于文字环绕，但也常被用于布局排版这三者虽然各自独立，但在实际使用中却又频繁“打架”，互相影响，因此成为前端面试中经典“送命题”。display、position 和 float 是前端面试中布局类问题的核心，不但要知道怎么用，还要理解为什么这么用。建议多动手尝试 layout 方案，用三者分别实现双栏布局、三栏布局、水平垂直居中等经典问题，加深理解。
'display'、'position'和'float'的相互关系
ApologizeError的博客
05-12 475
原文链接 （1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。 （2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被 设置为table或者block，具体转换需要看初始转换值。 （3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display 的值则按上面的规则转换。注意，如果positi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小码哥・Martin

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

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

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

打赏作者

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

抵扣说明：

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

余额充值