通过最近几次对网页布局的经历,总结几个常见并且容易出错的的布局样式如下:
1.display 设置元素的显示类型
各属性值的作用
a. Block:类似在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。
b. inline:在元素后面删除换行符,多个元素可以在一行内并列显示。
c. Inline-block:将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
d. none 此元素不会被显示。
2.float 浮动
常见属性及其作用
left:向左浮动
right:向右浮动
none:不浮动
提供一条消除浮动的样式(仅供参考):
.clearfox{-ms-zoom:1;} //作用针对IE浏览器的兼容问题
3.position:定位
常见属性及其作用
static:静态定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
4.box-sizing:
常见属性及其作用
content-box:宽度和高度应用到内容框,在宽度和高度之外绘制内边距和边框
border-box:元素指定的任何内边距和边框都在已设置的的宽度和高度内绘制
inherit:规定从父元素继承box-sizing的值