本文介绍了CSS中的行内块级元素布局，包括如何利用display:inline-block实现九宫格布局及其在IE6、7上的兼容性问题。同时详细讲解了定位(position)的四种属性：static、relative、absolute和fixed，通过实例展示了它们在页面布局中的应用和效果。
1.行内块级元素布局
上一节里面我们讲到了float浮动布局以及它的一些使用方法，在这一节里会将到行内块级元素布局的方法。
html的元素最开始是只有行内元素和块级元素两种，大多数元素都是块级元素，其特点是独占一行，会尽量占满浏览器的宽度。
但这两种元素在布局上比较无力，因此人们开始利用float浮动，这一最开始用于文字环绕的属性来进行布局。
这样的布局方式时至今日依然有不少的使用场景，但它的缺点也是非常明显的，它破坏了文档流造成高度塌陷，是一种hack的方式。
那么我们还有没有其他的方法来完成布局呢？
答案当然是有的，行内块级元素inline-block。
当为元素设置display为inline-block时，该元素就成为一个行内块级元素，既可以在一行内放置多个这样的元素，又可以为它设置宽高内外边距等属性。
比如当我们要完成九宫格布局的代码是这样的：
<style media="screen">
body {
margin: 0;
font-size: 0;
}
div {
display: inline-block;
background-color: orange;
border-radius: 5px;
width: 30vw;
height: 30vw;
margin: 1.5vw 0 0 1.5vw;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<di
最低0.47元/天 解锁文章
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
