CSS行内块级元素布局与定位 - html吧

level 1

无仱楼主

（转）html的元素最开始是只有行内元素和块级元素两种，大多数元素都是块级元素，其特点是独占一行，会尽量占满浏览器的宽度。
但这两种元素在布局上比较无力，因此人们开始利用float浮动，这一最开始用于文字环绕的属性来进行布局。
这样的布局方式时至今日依然有不少的使用场景，但它的缺点也是非常明显的，它破坏了文档流造成高度塌陷，是一种hack的方式。
那么我们还有没有其他的方法来完成布局呢？
答案当然是有的，行内块级元素inline-block。

2018年10月14日 02点10分 1

level 1

无仱楼主

当为元素设置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>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
这样的布局方式也是会有一些去诶按的，比如IE6，7上支持会有一些问题。
解决办法其一是将inline元素直接写成{display: inline-block;}
其二是将block元素写成{display: inline-block; display: inline;}
另外换行符也会有空格间隙的问题
解决办法其一是去掉空格换行符直接连写，但这样代码不太美观。
其二是对父级元素加上font-size:0，这样字体大小为0的情况下空格也不再占据空间因此间隙问题得以解决。

2018年10月14日 02点10分 2

level 1

无仱楼主

2018年10月14日 11点10分 4