display-float-position

1--当display不为none时,float起作用

当display为none时,float不起作用

2--当display不为none时,position起作用

当display为none时,position不起作用

3--当display不为none,且float与position同时存在时,

当position为absolute和fixed时,float不起作用;当position不为absolute和fixed时,两者同时起作用。

当display为none,且float与position同时存在时,都不起作用。

时间: 2024-12-20 01:17:31

display-float-position的相关文章

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' 属性及其

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,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规范)的区别就好了. 块级元

display与position之间的关系

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

display、position、float----笔记

1.元素分为行元素(span.input...)和块元素(div.ul...) 行元素:在一行中平行排列,不能改变其宽度和高度,自身高度被其内容撑开. 块元素:垂直排列,可以修改其宽和高(top.right.bottom.left),自身带有自动换行功能. 2.display display的常用属性: (1)none:脱离文档流,内容和空间都隐藏(overflow:hidden;内容隐藏,空间依然显示) (2)inline:行内元素 (3)block:块元素 (4)inline-block:行

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

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

css float position 笔记

float: right;   只对后面的元素起作用,围绕在后面元素的右边 clear: rigth;   如果后面的元素有这句,意思是说我的右边不要有人围绕 class="clearfix"  border自适应元素的高度,起到 overflow 的作用 position: static;  只根据文档流定位,也就是他的正常排位 position: relative;  相对于正常位置的定位 position: fixed;  固定位置 position: absolute;  相对

CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group |  |  |  |  |  | |  默认值:inline 适用

float position的测试案例

根据<a target=_blank href="http://blog.csdn.net/goodshot/article/details/44348525">http://blog.csdn.net/goodshot/article/details/44348525</a>我的测试   <p>一.</p> <p>1.Container div is overflow is not seted ,float element