常见css样式

 

  通过最近几次对网页布局的经历，总结几个常见并且容易出错的的布局样式如下：

1.display  设置元素的显示类型

各属性值的作用

a. Block：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。

b. inline：在元素后面删除换行符，多个元素可以在一行内并列显示。

c. Inline-block:将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

d. none 此元素不会被显示。

2.float 浮动

常见属性及其作用

left：向左浮动

right：向右浮动

none：不浮动

提供一条消除浮动的样式（仅供参考）：

.clearfox:after{content:''; clear:both; display:block; height:0px;}
.clearfox{-ms-zoom:1;}  //作用针对IE浏览器的兼容问题

3.position：定位

常见属性及其作用

static：静态定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

4.box-sizing:

常见属性及其作用

content-box：宽度和高度应用到内容框，在宽度和高度之外绘制内边距和边框

border-box：元素指定的任何内边距和边框都在已设置的的宽度和高度内绘制

inherit：规定从父元素继承box-sizing的值