505,display,float,position之间的关系(有疑问)

(display属性设置元素如何显示)

如果display取值为none,那么position和float都不起作用,这种情况下元素不产生框

否则,如果position设置框是绝对定位,float的计算值就为none,display根据下面的表格进行调整

否则,float不是none,框是浮动的,display根据下表进行调整

否则,如果元素是根元素,display根据下表进行调整

其他情况下,display的值是指定值

总之:绝对定位,浮动,根元素都需要调整display

原文地址:https://www.cnblogs.com/1998Archer/p/12357422.html

时间: 2024-09-30 12:00:20

505,display,float,position之间的关系(有疑问)的相关文章

display与position之间的关系

以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height. relative : 原来是什么类型的依旧是什么类型. absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位 <span style=”position:absolute; width:100px; he

【总结整理】display与position之间的关系【较完整】(转)

以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height. relative : 原来是什么类型的依旧是什么类型. absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位 <span style="position:absolute; width:100px;

CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block; 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位; position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱离文档流

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

有3个属性和布局以及box的创建有关:'display', 'position' 和 'float',彼此交互作用如下: 如果'display'值为'none',则'position' 和 'float'无作用.这种情况下,不生成box.否则,如果'position'值为'absolute' 或 'fixed', box被绝对定位,'float'的计算值为'none',而'display'的值按下表设定.box的位置将由'top', 'right', 'bottom' 和 'left' 属性及其

两层容器的position 之间的关系

在HTML的CSS种,容器如DIV有三种position属性:static, relative,absolute.其中static为默认属性,relative意为相对父容器定位,absolute意为相对可定位的上层容器进行定位,这个上层容器不一定是父容器,若找不到可定位的上层容器,则会以document.body进行定位. 若容器套容器,它们之间如何相互作用?见下面的实验. 1.两级DIV定位实验 <html> <head> <meta http-equiv="Co

NGUI的localPosition和Position之间的关系

假设有子节点为child, 父节点为parent, 且都是Transform类型. 则: child.localPosition = (child.position - parent.position) * k k = NGUI高度的一半 解释: NGUI高度的一半 如果设置的NGUI的高度为720, 那就是*360. 一般做NGUI都是高度固定, K会是一个固定值 如果你做的是宽度固定为W,  k可以这样计算出来 k = 0.5f * W * (float)Screen.height / (f

CSS布局 ——从display,position, float属性谈起

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

CSS布局 ——从display,position, float属性谈起(转)

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

做饭与进程线程之间的关系

炒菜与进程线程之间的关系 body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10px; padding-bottom: 10px; background-color: white; padding: 30px; } body > *:first-child { margin-top: 0 !important; } body > *:last-chi