【20】display,float,position的关系

最新推荐文章于 2023-04-19 17:26:32 发布
最新推荐文章于 2023-04-19 17:26:32 发布
阅读量274 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/moyuling/p/9030807.html
本文详细解析了CSS中display、float及position属性之间的相互作用机制。当display设置为none时，元素将不显示；若position被设定为absolute或fixed，则元素会进行绝对定位，并且float属性的计算值变为none，同时display属性也会根据特定规则进行调整。如果float不是none，则元素为浮动状态，display属性同样会根据表格中的规则进行调整。除此之外的情况，display属性将保持其初始设定。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【20】display,float,position的关系

  1. 如果display为none，元素不显示。
  2. 否则，如果position值为absolute或者fixed，元素绝对定位，float的计算值为none，display根据下面的表格进行调整。
  3. 否则，如果float不是none，框是浮动的，display根据下表进行调整。
  4. 其他情况下display的值为指定值。

715962-20180513012245079-391725349.png
 

**

转载于:https://www.cnblogs.com/moyuling/p/9030807.html

CSS 显示、定位、布局、浮动
corlin6688的博客
11-07 401
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。两者的区别：visibility:hidden可以隐藏某个元素，但隐藏的元素仍占用之前的空间，即该元素虽然被隐藏，但仍然会影响布局；relative定位元素的定位是相对其正常的位置。absolute定位的元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素，那它的位置相对于。Fixed定位：元素的位置相对于浏览器窗口是固定位置，即窗口是滚动的，元素是不会移动的。
css(display,float,position)深入理解
12-13
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否...
CSS中的float position display
不想写代码的一天
04-16 287
css中的浮动：float 四个参数： float：left; 左浮动 float：right; 右浮动 float：none; 不浮动 float：inherit; 不浮动 元素的水平浮动 left right 块级元素 ：元素在浮动之后 会脱离文档流 要想水平浮动，浮动的子元素的总宽小于父元素的宽 注：子元素在浮动之后会导致父元素不能撑开 overflow：hidden 超...
display 、position、float 关系
qq_29738977的博客
01-30 394
1、display 为none ，position和 float都不起作用 2、否则，position为absolute或者fixed，float的计算值为none，display根据下面的表格进行调整。 3、否则，如果float不是none ，display根据下表进行调整。 4、否则，如果元素是根元素，display根据下表进行调整 5、其他情况下display的值为指定值，总结起来：绝对定位...
Css display 和 float
m0_55315930的博客
07-26 333
CSS display和浮动 先了解块级元素和行内元素 1.块级元素：独占一行，其余元素只能另起一行，元素宽高，行高和边距都能设定 常用的有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 2.行内元素：可以与其余元素共占一行，元素宽高，边距不可设定，元素的宽度就是它包
CSS 定位体系概述
gyflyx的专栏
01-16 788
三种定位体系简介 • 选择定位方案：'position' 特性 • 'display'、'position' 和 'float' 的相互关系 作者：武利剑 文章来源：http://w3help.org/zh-cn/kb/009/ 三种定位体系简介 框( box )布局影响因素之一，便是定位体系。定位体系也是其最为重要的影响因素。 CSS2.1 中，一个框可以根据三
浅谈CSS中display/float/position属性值的相互影响
12-13
有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下： 如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。 否则，如果’...
display float position 关系
03-16
display float position关系指的是CSS中的浮动和定位属性之间的关系。浮动属性可以让元素脱离文档流并向左或向右浮动，而定位属性可以让元素相对于其父元素或文档进行定位。在使用浮动和定位属性时，需要注意它们的...
display position float 之间的关系
BigDaddy233333的博客
11-10 3498
三个属性 display属性规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素……….（display种类很多，可查阅资料http://www.w3school.com.cn/cssref/pr_class_display.asp） position属性...
css-position，float，display的关系和优先级
王欢的博客
07-13 3174
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
position 和 display 的取值和各自的意思和用法
splendid_can的博客
11-26 8439
position     1、position属性取值：static(默认)、relative、absolute、fixed、inherit。     2、postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在切换的时候可以尝试这个方法。     3、除了static值，在其他三个值的设置下
css中float，position，display，以及清除浮动的知识点
tian_xiaobai的博客
07-23 502
float：css属性， 指定一个元素应沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它；该元素从网页的正常流动（文档流）中移除，也保持部分的流动性（与绝对定位相反）。 float意味着使用块布局，在某些情况下修改display的值。 left：元素浮动在其所在的块容器左侧的关键字 right：元素浮动在其所在的块容器右侧的关键字 none：元素不浮动的关键字 ...
display, position和float的关系
Jessica0906的博客
11-13 1117
display, position和float的关系？ （ps：第一次被问到这个问题时候其实是一脸懵逼，因为在此之前压根没把这仨放一起对比研究过，直接把他们有的分到了萝卜筐，有的分到了白菜筐，主观上没觉得有啥关系，只觉得他们是各司其职的，不过稍微一琢磨他们还是有点关联和相互制约的，以下是参考了别人的答案和自己实验得出一些粗浅的关系） ①如果display设置为none，那positio
display、float、position的关系
LuckXinXin的博客
05-08 353
如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。 否则，如果float不是none，框是浮动的，display根据下表进行调整 否则，如果元素是根元素，display根据下表进行调整 其他情况下...
css有两个重要的基本属性display和position，是前端开发必需掌握的。
weixin_71087234的博客
04-19 846
css有两个重要的基本属性display和position，是前端开发必需掌握的。
css的display和position属性
qq_42804737的博客
08-13 1323
css的positon和display属性positon属性position：static；position：relative；position：absolute;position：fixed；position：inherit；display属性display：none；display：inline；display:block;display:inline-block;display:flex;f...
CSS（八） display和position
Oliver尹的博客
07-01 880
display，指元素呈现框的类型 常见的有，display:none|inline|block|inline-block|table... 块级元素block：会新开始一行并且尽可能的撑满容器，并且此元素的前后默认带有换行符，可设置宽高并且显示 例如p,h1,div 行内元素：只占据它对应标签的边框内所包含的空间，此元素强制设置成行内元素，不可设置宽高并同行显示，例如：span bu...
css position属性 以及 float、display、position的问题整合
evilemon的博客
07-02 1486
在css中，有两个属性可以破坏文档流：一个就是float属性，另一个就是position属性。 假设一个父级元素未定义高度（默认div的宽度是100%，即最大化；高度是最小化，即如果div没有设置高度，则其虽然占据物理空间，但是在页面上显示不出来），它的高度就要由子元素来填充，这时，如果设置子元素float属性，子元素就会脱离文档流，当所有的子元素都脱离了文档流，父级元素的高度就变为0，无法显示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值