css-position，float，display的关系和优先级

最新推荐文章于 2024-07-26 22:49:01 发布

github_34514750

最新推荐文章于 2024-07-26 22:49:01 发布

阅读量3.1k

点赞数

分类专栏： css 文章标签： css position-f

本文链接：https://blog.csdn.net/github_34514750/article/details/51895897

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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-block	block
其他	同设定值

1.display值是none

如果display是none，则position和float不起作用。因为元素不产生框，因此浮动和定位无效。若display不是none，则继续

2. ‘position’ 的值是 ‘absolute’ 或 ‘fixed’

框是相对定位的，计算后的float应该是none。并且display按照上表设置。框的位置将由 ‘top’，’right’，’bottom’ 和 ‘left’ 属性和该框的包含块确定。

也就是说，当元素是绝对定位时，浮动失效，’display’ 会被按规则重置。
若position不是absolute或fixed，则继续

3.float的值不是none

如果float值不是none，则该框浮动并且display按照转换对应表设置，若float是none

4.元素是根元素

如果元素是根元素，display值按照对应表设置，否则，按照5

5.应用指定的display特性值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

github_34514750

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

position属性，display属性，float属性

weixin_57727027的博客

05-08

457

position属性，display属性，float属性讲到盒模型，有三大属性可以用来控制页面的排版。三大属性：position属性，display属性，float属性。 ①position 属性控制页面上元素间的位置关系。规定元素的定位类型。定义建立元素布局要用的定位机制，每一个元素都是可以定位的，不论此元素本身是什么类型，绝对定位（absolute）的元素或固定定位（fixed）的元素会生成一个块级框。而相对定位（relative）的元素会相对于它自身在正常的文档流中的默认..

【CSS布局】详解display，position， float属性！

Sixstar_yanxin的博客

08-14

552

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ..

参与评论您还未登录，请先登录后发表或查看评论

【CSS】display、position、float 三者的优先级

Dora_5537的博客

08-29

1617

1. display 的值是 none 如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。 2. position的值是 absolute或 fixed 如果 position的值是 absolute或 fixed，则浮动失效，并且 display 的值按照对应表设置。否则，继续进行3。此时，元素的位置将由 ‘top’，’...

CSS（十二）——CSS Display（显示）和Position(定位）

最新发布

m0_62701594的博客

07-26

946

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

知识点：float、position与display关系

(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭

12-25

2020

问： position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ float、position 和 display 之间的关系：如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生；除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属

【20】display,float,position的关系

weixin_30339969的博客

05-13

243

【20】display,float,position的关系如果display为none，元素不显示。否则，如果position值为absolute或者fixed，元素绝对定位，float的计算值为none，display根据下面的表格进行调整。否则，如果float不是none，框是浮动的，display根据下表进行调整。其他情况下display的值为指定值。** 转载于:https:...

display、float、position的关系

LuckXinXin的博客

01-27

135

如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。否则，如果float不是none，框是浮动的，display根据下表进行调整否则，如果元素是根元素，display根据下表进行调整其他情况下display的值为指定值总结起来：绝对定位、浮动、根元素都需要调整display ...

display, position和float的关系

Jessica0906的博客

11-13

1057

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

‘display‘、‘position‘和‘float‘的相互关系？

weixin_47450807的博客

04-08

1149

一、这三种属性之间的关系和相互作用效果可以用下图表示： 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-1-样式优先级 position 居中 display 弹性布局盒模型省略号坍塌

sharryling

03-26

730

参考链接：https://blog.csdn.net/sinat_36521655/article/details/80140221 不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...

HTML-and-CSS-Basic

03-19

8. **层叠性**：CSS名字中的"Cascading"意味着当多个样式应用于同一元素时，会根据优先级和层叠规则决定最终样式。 9. **Flexbox布局**：用于创建灵活的、响应式的布局，主要属性有`display: flex;`, `justify-...

Week02-CSS-snippet-cheat-sheet:CSS cheets

03-29

2. **CSS属性**：如颜色、字体、边距、填充、背景、布局属性（如display、position、float、flexbox、grid）等。 3. **盒模型**：理解盒模型的工作原理，包括content、padding、border和margin。 4. **CSS单位**：...

css笔记2-position 定位

weixin_45145722的博客

03-18

163

又来了一个新比喻：HTML就像是我们买的毛坯房，把一个房子分成卧室，卫生间，客厅，厨房这些不同的结构部分，css就是做装饰，把一个灰秃秃的空房子，装饰成一个漂亮的，温馨的家在css出现之前，咱们的网页搞纯html来构建，常用表格来构建网页（见到过了）在书写css的时候，还要引入其他css文件，可以用@import来引入 /* 当然是一个css文件它依赖其他的css文件 */ @import url('other.css'); 标签选择器：对元素进行选择所以标签选择器的作用范围非常广啦，因为

CSS---总结

m0_53586574的博客

01-05

738

CSS 内部样式表、、、 <style> div { color: red; font-size: 12px; } </style> 、、、通过此方式，方便控制当前整个页面中的元素样式设置但是没实现样式与结构完全分离行内样式表、、、青春不常在，抓紧谈恋爱、、、可以控制当前的标签设置样式外部样式表适合于样式比较多的情况. 分为俩步： 1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。 2.在HTML页面中

position+float+display一点理解

Tankpt的专栏

03-14

1372

==感觉不算是原创把，主要是以博客一为例，好多都是他的原话，原博主真是牛逼，有些例子自己重写了，然后有些话写成了自己理解的话，然后又参考了几个其他的文章，不知道对不对，希望看到问题多多指点，多谢了参考博文： [1]http://www.cnblogs.com/coffeedeveloper/p/3145790.html [2]http://www.cnblogs.com/WhiteCu

CSS网页布局心得（样式优先级，块级元素，内联元素，display，position，float）

sinat_32547817的博客

08-18

731

文章涉及的知识点：CSS，样式优先级，块级元素，内联元素，display，position，float

css笔记（三特性、position、float、display）

html标签-meta

11-27

401

一: css三大特性: 层叠、继承、优先级 1.层叠层叠：浏览器对多个样式叠加，最终确定结果。层叠优先级：浏览器默认样式自定义浏览器样式外部引用内部引用内联样式样式冲突，遵从就近原则不冲突，层叠原则相关题目： link与@import区别标签：link是html标签，@import是css标签加载：link页面加载同时加载，@import页面加...

css position属性以及 float、display、position的问题整合

evilemon的博客

07-02

1430

在css中，有两个属性可以破坏文档流：一个就是float属性，另一个就是position属性。假设一个父级元素未定义高度（默认div的宽度是100%，即最大化；高度是最小化，即如果div没有设置高度，则其虽然占据物理空间，但是在页面上显示不出来），它的高度就要由子元素来填充，这时，如果设置子元素float属性，子元素就会脱离文档流，当所有的子元素都脱离了文档流，父级元素的高度就变为0，无法显示

display与position，float之间的关系

weixin_44392745的博客

06-26

849

positon 与 display 的相互关系元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。 relative : 原来是什么类型的依旧是什么类型。 absolute | fixed ：元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位 <span style=”position:absolute; width:100px; height:50px;”>sp

前端面试必备：CSS选择器优先级与继承特性解析

- 相邻兄弟选择器 (如 h1+p)、子选择器 (如 ul>li) 和后代选择器 (如 li a)：优先级为0，用于描述元素之间的关系。 - 通配符选择器 (*)：优先级也为0，用于设置所有元素的默认样式。 优先级规则如下： - !...