布局属性

学习布局所需要的到属性。

1、 display

属性用来设置元素的显示方式。

block 块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其它的元素只能另起一行显示。

inline 行间对象与block刚好相反,它允许其它元素在同一行显示。

none 隐藏对象

div{display:block}

2、float

用来控制元素是否浮动显示。

left   向左浮动

right 向右浮动

none  不浮动

浮动的时候元素的显示属性也变化了 变为 “行内元素”

div{ float:left;}

3、position

position : static | absolute | fixed | relative

static : 无定位,默认值

absolute:绝对定位

relative : 相对定位

fixed:固定定位

absolute

说明: 脱离文档流。

通过 top,bottom,left,right 定位。

如果父元素 position 为 static 时,将以body坐标原点进行定位。

如果父元素 position 为 relative 时,将以父元素进行定位。

div { position:absolute; left:100px; top:100px;}

总结:

块的特征

1、默认独占一行

2、没有宽度时,默认撑满一排

3、支持所有css命令

内嵌(内联、内行)的特征

1、同排可以继续跟同类的标签

2、内容撑开宽度

3、不支持宽高

4、不支持上下的margin

5、代码换行被解析           //就是相邻的两个内联之间有个空白处

inline-block

1、块在一行显示

2、行内属性标签支持宽高

3、没有宽高的时候内容撑开宽度

4、代码换行被解析             //就是相邻的两个内联之间有个空白处

浮动的定义:使用元素在脱离文档流,按照指定方向发生移动,遇到父级边界或相邻的浮动元素停下来。

浮动的走向是先后顺序,如给3个div内分别加1、2、3,左浮动是1、2、3;

右浮动是3、2、1;因为1先浮动后到2,再到3 ;

当使用p标签时,p的文字会围绕浮动元素,而不是重合,这个是很重要的知识,所以这也达到文字围绕的目的。

浏览器的窗口缩小,字体还是围绕浮动元素,但这时内容变成多段围绕,就像响应式。

对clear属性的设置要放到文字所在的盒子里,例如一个p段落的css设置中,而不要放到对浮动盒子的设置里面。

经常有初学者没有搞懂原理,误以为在对某个盒子设置了float属性以后,要消除它对外面的文字的影响,就要在

它的css样式增加一条clear,其实这是没有用的。

我们要清除的元素相邻的浮动元素的浮动,让浮动影响不了它。

清除浮动,clear:left|right|both|none|inherit

使元素的某个方向上不能浮动。

清除浮动就是浮动元素在浮动时脱离文档流,而文档流的元素会叠到浮动元素下面,

那么浮动元素是那个方向浮动,你就清除那个方向的浮动,就可以不叠在它之下了,

这个经常使用到撑开父级元素中,因为浮动后父级元素会没有浮动元素的高,这样

父级就没有高了,对于某些操作会很麻烦。

子元素有浮动,父元素就包不住它。

清除浮动的方法:

1、加高(扩展性不好)

2、给父级加浮动,但margin左右自动失效(float bad!)

3、inline-block清除浮动(问题margin左右auto失效)

4、空标签清除浮动(ie最小高度19px;(解决后IE6还有2px的偏差))

5、br清除浮动,br标签上有个属性clear(影响w3c标准,不符合工作要求)

6、:after伪类清除浮动

代码:

.clearfix:after{ content:"";  display:block;   clear:both;}

 .clearfix{*zoom:1;}  为ie6、ie7兼容解决的。

7、overflow:hidden;清除浮动,也会出现问题,如不在这个父级范围内的内容,

就无法显示。

relative

position:relative 相对定位

a、不影响元素本身的特性;

b、不使元素脱离文档流(元素移动之后原始位置会被保留)

c、如果没有定位偏移量,对元素本身没有任何影响

d、提升层级

定位元素位置控制

top、right、bottom、left定位元素偏移量

absolute:

a、使元素完全脱离文档流

b、使内嵌支持宽高

c、块属性标签内容撑开宽度

d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于

document发生偏移

e、相对定位一般都是配合绝对定位元素使用

f、提升层级


z-index:[number];定位层级

a、定位元素默认后者层级高于前者

b、建议在兄弟标签之间比较层级

fixed 固定定位

与绝对定位的特性基本一致,差别是始终相对整个文档进行定位。

问题:IE6不支持固定定位;

定位其他值:

static 默认值

inherit 从父元素继承定位属性的值(火狐不兼容)

原文地址:https://www.cnblogs.com/zhangzhicheng/p/5777487.html