CSS中display/float/position属性值的相互影响

最新推荐文章于 2021-08-04 19:59:51 发布
原创 最新推荐文章于 2021-08-04 19:59:51 发布 · 638 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS #display #float #position

本文深入探讨了CSS中关键的布局属性：display、position和float。这些属性对于网页设计至关重要，文章详细解释了它们的作用及相互之间的优先级关系，帮助读者更好地理解和应用。

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

CSS中有三个属性与页面布局和box的创建有关：display，position和float，但是如何同时设置了三个属性，则三者之间有优先级关系：
在这里插入图片描述

position属性，display属性，float属性
weixin_57727027的博客
05-08 518
position属性，display属性，float属性 讲到盒模型，有三大属性可以用来控制页面的排版。 三大属性：position属性，display属性，float属性。 ①position 属性控制页面上元素间的位置关系。规定元素的定位类型。 定义建立元素布局要用的定位机制，每一个元素都是可以定位的，不论此元素本身是什么类型，绝对定位（absolute）的元素或固定定位（fixed）的元素会生成一个块级框。 而相对定位（relative）的元素会相对于它自身在正常的文档流中的默认..
‘display‘、‘position‘和‘float‘的相互关系？
weixin_47450807的博客
04-08 1220
一、这三种属性之间的关系和相互作用效果可以用下图表示： 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 其他 保持设定值 二、具体流程如下所示
浅谈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
CSS的position/float/display的取值方法
Developer of XingKong22star
08-26 1005
position  position属性取值：static(默认)、relative、absolute、fixed、inherit。     postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在切换的时候可以尝试这个方法。     除了static值，在其他三个值的设置下，z-inde
dispaly、position、float之间的关系与相互作用
weixin_33699914的博客
07-23 182
一、首先看一下这三个属性display属性规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素……….（display种类很多，可查阅资料www.w3school.com.cn/cssref/pr_c…）position属性规定元素的定位类型，常用于布局。st...
知识点：float、position与display关系
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
12-25 2118
问： position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ float、position 和 display 之间的关系： 如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生； 除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属
css(display,float,position)深入理解
09-24
CSS中的`display`, `float`, 和`position`是布局设计中的关键属性，它们共同决定了元素在页面上的显示方式和相互关系。以下是对这三个属性的详细解释： **display** `display`属性用于设置元素的显示类型，它有多种...
CSS深度解析：Position与Float属性的运用与影响
"本文深入探讨了CSS中的Position和Float属性，包括它们的基本使用方法、对元素的影响、交叉使用的影响以及一些实用技巧。文章首先强调理解HTML布局的基本要点，如盒子模型和普通流，这是有效使用Position和Float的...
css中属性值继承全面总结（推荐）
09-24
在CSS中，属性值继承是一项重要的机制，允许子元素从其父元素继承特定的样式属性。这大大减少了在样式表中重复定义相同属性的需求。然而，并非所有CSS属性都能被继承，理解哪些属性可以继承以及如何操作继承是优化...
dispaly、position、float的关系与相互作用
qq_44158936的博客
03-11 237
1、属性分析 display属性：规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素等。 position属性：规定元素的定位类型，常用于布局。static-默认值，元素出现在正常文档流中（此时不受top、left、right、bottom、z-index...
flex布局与position定位存在冲突
heerey525
03-09 5599
情况：现在布局很多时候用到flex方式，有次我将flex布局后的元素B，然后给元素B添加position定位，发现元素B无法被子元素撑开 <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>flex布
css布局，display：flex，float浮动布局，position定位
qq_43787947的博客
08-04 2117
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、float、position的关系
LuckXinXin的博客
05-08 354
如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。 否则，如果float不是none，框是浮动的，display根据下表进行调整 否则，如果元素是根元素，display根据下表进行调整 其他情况下...
CSS网页布局心得（样式优先级，块级元素，内联元素，display，position，float）
sinat_32547817的博客
08-18 784
文章涉及的知识点：CSS，样式优先级，块级元素，内联元素，display，position，float
position: absolute 和 borde-sizing: border-box 的相互影响
weixin_43844975的博客
12-24 979
个人理解： box-sizing: border-box虽然是怪异盒子模式，但是是基于 正常文档流 前提的，如果设置了 position： absolute ，即 脱离了 正常的文档流，那么box-sizing: border-box就会 失效 栗子如下： 设置position: absolute后 ，原本的宽度限制box-sizing： border-box失效 ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
weixin_34405557的博客
10-26 418
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block; 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位; position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-...
css position 对 display 的影响
ISaiSai的专栏
12-11 1810
所有元素的position 设置为 absolute与fixed 的时候  display 都会被修改为block（无法显式的修改） 元素的positon设置为relative的时候 display 不变
display,position和float之间的关系
zccst的专栏
03-17 632
作者：zccst [b]对‘display’，‘position’和‘float’之间关系的定义[/b] 英文原文：[url]http://dbaron.org/css/test/sec0907[/url] 影响框的生成和布局的三个属性——'display'，'position'和'float'——间的相互关系如下： 1，如果'display'设置为'none'，用户端必须忽略掉'po...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值