'display'、'position'和'float'的相互关系

原文链接

(1)首先我们判断display属性是否为none,如果为none,则position和float属性的值不影响元素最后的表现。

(2)然后判断position的值是否为absolute或者fixed,如果是,则float属性失效,并且display的值应该被
设置为table或者block,具体转换需要看初始转换值。

(3)如果position的值不为absolute或者fixed,则判断float属性的值是否为none,如果不是,则display
的值则按上面的规则转换。注意,如果position的值为relative并且float属性的值存在,则relative相对
于浮动后的最终位置定位。

(4)如果float的值为none,则判断元素是否为根元素,如果是根元素则display属性按照上面的规则转换,如果不是,
则保持指定的display属性值不变。

总的来说,可以把它看作是一个类似优先级的机制,"position:absolute"和"position:fixed"优先级最高,有它存在
的时候,浮动不起作用,'display’的值也需要调整;其次,元素的’float’特性的值不是"none"的时候或者它是根元素
的时候,调整’display’的值;最后,非根元素,并且非浮动元素,并且非绝对定位的元素,'display’特性值同设置值。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: display是CSS中的一个属性,用于指定元素的显示方式,常见的取值有block、inline、inline-block、none等。 position也是CSS中的一个属性,用于指定元素的定位方式,常见的取值有static、relative、absolute、fixed等。 float也是CSS中的一个属性,用于指定元素的浮动方式,常见的取值有left、right、none等。浮动元素会脱离文档流,可以让其他元素环绕在其周围。 ### 回答2: displaypositionfloat是CSS中常用的布局属性。它们可以帮助我们控制HTML元素的位置和排布,实现不同的网页布局效果。 首先,display属性用来设置元素的显示方式。常用的取值有block、inline、inline-block、flex等。其中,block元素会在页面中独占一行,可以设置宽度、高度、内外边距等属性;inline元素则会与其它行内元素在同一行中排布,只能设置水平方向的内外边距等属性;inline-block元素则是将两者结合起来,可以与其它行内元素并排排布,同时也可以设置宽度、高度、内外边距等属性。flex布局则是近年来较为流行的一种弹性盒子布局,可以实现比较灵活的布局形式。 其次,position属性用来设置元素的定位方式。常用的取值有static、relative、absolute、fixed等。其中,static为默认值,元素遵循正常文档流排布;relative则是相对定位,元素会按照正常的文档流排布,但是可以通过left、top、right、bottom等属性调整相对于其原本位置的偏移量;absolute则是绝对定位,元素不再按照正常文档流排布,而是相对于其最近的已定位祖先元素(如果没有则相对于body元素)定位,可以通过left、top、right、bottom等属性调整位置;fixed则是固定定位,元素相对于屏幕视口定位,保持在屏幕上始终可见。 最后,float属性用来设置元素的浮动方式。常用的取值有left、right、none等。元素浮动后,会沿着其父元素的边框排布,如果浮动的元素是块级元素,则会从正常的文档流中“脱离”,可能会影响其它元素的排布。float属性常用于实现多栏布局、图文混排等效果。需要注意的是,浮动后的元素需要清除浮动,否则可能会出现布局混乱的问题。常用的清除浮动的方式有给父元素添加clear属性、使用伪元素清除浮动等。 综上所述,displaypositionfloat是实现CSS布局的重要属性,熟练运用它们可以实现各种复杂的网页布局效果。 ### 回答3: displaypositionfloat这三个CSS属性是页面布局中常用的属性。它们分别用于定义元素的显示方式、定位方式和浮动方式。 display属性用于定义一个元素应该怎样显示。常见的display值有block、inline和none。block表示元素将会在一个新行中显示,它会占据一行的全部宽度;inline表示元素将会在一行中显示,它只会占据自身的宽度;none表示元素将不会被显示出来。除了这些常见的值,还有很多其他的display值,比如inline-block、table等可以用来实现更复杂的页面布局。 position属性用于定义元素相对于其父元素的定位方式。常见的position值有static、relative、absolute和fixed。static表示元素不进行定位,默认为static;relative表示元素相对于它原来的位置进行定位;absolute表示元素在文档流中脱离,它的位置相对于最近的已定位的祖先元素,如果没有已定位的祖先元素,则相对于文档的起始点;fixed表示元素在文档流中脱离,它的位置相对于浏览器窗口。 float属性在页面布局中很常见,它用于定义一个元素应该浮动在其父元素的左侧或右侧。当使用float属性时,这个元素会被移动到容器的左侧或右侧,其他元素会在其周围布局。因此,float属性经常用于实现页面中的多列布局。值得一提的是,当使用float属性时,可能会导致元素高度塌陷的问题,这时候可以使用clear属性来解决问题。 综上所述,displaypositionfloat是CSS中非常重要的属性,它们可以用于实现各种各样的页面布局效果。熟练运用这些属性,可以让页面布局更加灵活多样,并且可以减少HTML代码中的冗余部分,提高代码的可维护性和可读性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

请叫我大豆包

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

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

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

打赏作者

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

抵扣说明:

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

余额充值