display、float、position的关系

最新推荐文章于 2022-06-27 07:34:35 发布
最新推荐文章于 2022-06-27 07:34:35 发布
阅读量315 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/105989054
版权
  1. 如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框
  2. 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
  3. 否则，如果float不是none，框是浮动的，display根据下表进行调整
  4. 否则，如果元素是根元素，display根据下表进行调整
  5. 其他情况下display的值为指定值
  6. 总结起来：绝对定位、浮动、根元素都需要调整display
LuckXinXin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 5——常见”display”属性、浮动（float）、如何清除浮动带来的影响、定位（position）、列表样式、其他样式补充
ranran0306的博客
03-12 1177
1、标签的几种常见”display”属性 block “块”元素 inline “行内”元素 inline-block 行内块元素 none 隐藏 块元素、行内元素和行内块元素可以互相转化 2、浮动（float） float : left 左浮动 float ：right 右浮动 float : none 默认 不浮动 加了浮动的元素会自动块化 3、如何清除浮动带来的影响 1.给父元素加height 2.给父元素加overf...
‘display‘、‘position‘和‘float‘的相互关系？
weixin_47450807的博客
04-08 1127
一、这三种属性之间的关系和相互作用效果可以用下图表示： 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
屿屿屿屿屿的博客
06-27 968
块级元素：独占一行 h1-h6 p div 列表…行内元素：不独占一行 span a img strong 3、float 1、左右浮动 float 4、父级边框塌陷问题(以float为例) 增加父级元素的高度 增加一个空的div标签，设置属性 父级元素增加属性 父类增加一个伪类 小结：**浮动元后面增加空div简单，代码中尽量避免空div设置父元素的高度简单，元素假设有了固定的高度，就会被限制overflow简单，下拉的一些场景避免使用父类添加一个伪类：after写法稍微复杂一
display与float的区别
qq_43372535的博客
11-30 926
display display属性 display特性 块级元素与行级元素的转变 控制块元素排到一行 控制元素的显示和隐藏 float float属性 display：inline-block和float的区别 display可以让元素排在第一行，并且支持宽度和高度代码实现起来方便 位置方向不可控，会解析空格 IE6.IE7上不支持 float可以让元素排在一行并制作宽度和高度，可以决定排列方向 float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添..
CSS浮动（display、float、边框塌陷、溢出处理）
baolingye的博客
06-19 2458
CSS浮动 一、标准文档流 标准文档流指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。 这也是元素默认的排列方式 ，浮动一般用于图片，也可用于页面布局 标准文档流的组成 u块级元素（block） h1~h6 、p 、 div 、列表 内联元素（inline） span 、 a 、 img 、 strong 内联标签可以包含于块级标签中，成为它的子元...
css(display,float,position)深入理解
09-24
下面小编就为大家带来一篇css(display,float,position)深入理解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈CSS中display/float/position属性值的相互影响
12-13
有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下： 如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。 否则，如果’...
如何用float配合position:relative实现居中
09-25
想着用display:inline-block;实现，但是ie6和ie7对块元素使用这个属性不是特理想，只能用hack解决，经请教发现个号东西使用float也可以解决，具体如下，感兴趣的朋友可以参考下
display与position，float之间的关系
weixin_44392745的博客
06-26 802
positon 与 display 的相互关系 元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。 relative : 原来是什么类型的依旧是什么类型。 absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位 <span style=”position:absolute; width:100px; height:50px;”>sp
css布局，display：flex，float浮动布局，position定位
qq_43787947的博客
08-04 1891
Flex布局： display：flex; 水平布局： justify-contant: center -----水平居中; justify-contant: flex-start ------左对齐; justify-contant: flex-end -----右对齐; justify-contant: space-between ------两侧对齐; justify-contant: space-around -------自动分配； flex-wrap: nowrap | wra.
display position float 之间的关系
BigDaddy233333的博客
11-10 3408
三个属性 display属性规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素……….（display种类很多，可查阅资料http://www.w3school.com.cn/cssref/pr_class_display.asp） position属性...
display, position和float的关系
Jessica0906的博客
11-13 1039
display, position和float的关系？ （ps：第一次被问到这个问题时候其实是一脸懵逼，因为在此之前压根没把这仨放一起对比研究过，直接把他们有的分到了萝卜筐，有的分到了白菜筐，主观上没觉得有啥关系，只觉得他们是各司其职的，不过稍微一琢磨他们还是有点关联和相互制约的，以下是参考了别人的答案和自己实验得出一些粗浅的关系） ①如果display设置为none，那positio
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的值为指定值，总结起来：绝对定位...
css-position，float，display的关系和优先级
王欢的博客
07-13 3088
display的转换对应表 设定值 计算值 inline-table table inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-b
float与position:absolute会改变display
一个安全研究员
03-12 1252
float与position会改变display的值为inline-block(除了display：none) 我们来看下几个实验： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&am
行内元素在为什么设置浮动后可以设置高宽？？
IT技术宅-北方的刀郎
03-21 4983
行内元素在设置浮动后可以设置高宽？当该属性(display)不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat（ie）或cssfloat（非ie）。(注意这里为stylefloat或cssflo
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 float position 关系
最新发布
03-16
display float position关系指的是CSS中的浮动和定位属性之间的关系。浮动属性可以让元素脱离文档流并向左或向右浮动，而定位属性可以让元素相对于其父元素或文档进行定位。在使用浮动和定位属性时，需要注意它们的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值