display, position和float的关系

display, position和float的关系?

(ps:第一次被问到这个问题时候其实是一脸懵逼,因为在此之前压根没把这仨放一起对比研究过,直接把他们有的分到了萝卜筐,有的分到了白菜筐,主观上没觉得有啥关系,只觉得他们是各司其职的,不过稍微一琢磨他们还是有点关联和相互制约的,以下是参考了别人的答案和自己实验得出一些粗浅的关系)


①如果display设置为none,那position和float设置成花都没用,页面上是渲染不出此元素的,这种情况下display比较厉害;

②如果display不为none,假设为inline,然后设置float不为none,如 float: left; 

   此时经浏览器计算后是属性是float: left; display: block; 这种情况下float会强制更改元素display属性;

③如果display不为none,假设为inline,然后设置position: absolute/fixed; float: left;  

   此时经浏览器计算后是属性是 position: absolute; float: none; display: block; 

   这种情况下position会比float和display厉害,然后强制改变float为none、display为block


以上可能只是一些表面的粗浅联系,有时间了再仔细研究下深层次的关系。



  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: displayCSS中的一个属性,用于指定元素的显示方式,常见的取值有block、inline、inline-block、none等。 position也是CSS中的一个属性,用于指定元素的定位方式,常见的取值有static、relative、absolute、fixed等。 float也是CSS中的一个属性,用于指定元素的浮动方式,常见的取值有left、right、none等。浮动元素会脱离文档流,可以让其他元素环绕在其周围。 ### 回答2: displaypositionfloatCSS中常用的布局属性。它们可以帮助我们控制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属性来解决问题。 综上所述,displaypositionfloatCSS中非常重要的属性,它们可以用于实现各种各样的页面布局效果。熟练运用这些属性,可以让页面布局更加灵活多样,并且可以减少HTML代码中的冗余部分,提高代码的可维护性和可读性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值