900字范文 > CSS的display的多种布局方式总结(inline-block table flex)

CSS的display的多种布局方式总结(inline-block table flex)

时间：2018-08-27 16:09:18

1.display:inline-block布局

一：display的几个常用的属性值

inline（行内元素）

1.和其他元素都在一行上，可以与其他行内元素共享一行，不会独占一行

2.高，行高及顶和底边距不可改变，大小由内容撑开

3.可以使用padding,margin上下左右都有效block（块级元素）

1.总是在新行上开始，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度

2.高度，行高以及顶和底边距都可控制，宽度是它的容器的100%，除非设定一个宽度

3.可以设置padding，margin的属性值，top，left，bottom，right都能够产生边距效果inline-block（融合行内于块级）

不独占一行的块级元素

测试一下：

<div class="box"><div class="child1">child1</div><div class="child2">child2</div></div>

.box{width: 280px;background-color: rgb(240, 192, 192);}.child1{width: 100px;height: 100px;background-color: lightblue;}.child2{width: 100px;height: 100px;background-color: rgb(44, 168, 209);}

图一：不设置

图二：对child1,child2样式添加display: inline-block;

两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。

二：inline-block布局 vs 浮动float布局

a:不同之处：对元素设置display：inline-block，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

b.相同之处：能在某程度上达到一样的效果

效果测试：

图一：child1,child2样式为display: inline-block;的效果

图二：删除child1,child2的display: inline-block;，对child1,child2样式添加float: left;的效果，父元素会高度坍塌

所以要闭合浮动，对box使用overflow：hidden;

c.浮动布局不太好的地方：参差不齐的现象

添加两个child，都添加float: left;的效果，增高child2的高度为120px，box的宽度为380px；

这并不是我们想要的布局效果

我们把四个child的float: left;删除，都添加display：inline-block，就会排列整齐

三：inline-block存在的小问题

a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符

b.去除空隙的方法：

1.对父元素添加，font-size:0;，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙，这种方法已经可以兼容各种浏览器（子元素的文字消失了，后面要单独设置）

c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：

在ie6/7下：

对于行内元素直接使用dislplay:inline-block;

对于块级元素：需添加display:inline;zoom:1;

总结：

对于横向排列东西来说，倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。对于浮动布局就用于需要文字环绕的时候

2. display:table和display:table-cell结合

一：实现元素垂直居中

对父元素display: table;,子元素display: table-cell;即可实现垂直居中

效果测试：

<div class="parent"><p class="son">这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！</p></div>

.parent {width: 300px;height: 300px;text-align: center;}.son {height: 200px;background-color: rgb(165, 230, 140);vertical-align: middle;}

给父元素添加display: table;,子元素添加display: table-cell;

二：实现元素两端对齐

content：display: table;

left，right：text-align: right;,display: table-cell;

box：display: inline-block;,text-align: center;(文字居中)

<div class="content"><div class="left"><div class="box">B</div></div><div class="right"><div class="box">A</div></div></div>

*{box-sizing:border-box;}.content{display: table;border:1px solid #06c;padding:15px 15px;max-width: 1000px;/*对容器的水平居中*/margin:10px auto;min-width: 320px;width:100%;}.box{width:100px;height:100px;border:1px solid #ccc;text-align: center;display: inline-block;font-size: 40px;line-height: 100px;}.right{text-align: right;display: table-cell;}.left{text-align: left;display: table-cell;}

效果如下：

三：自动平均划分每个小模块，使其一行显示

ul{display: table;}

li{display: table-cell;}

<div class="content"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>

*{box-sizing:border-box;}.content{display: table;border:1px solid #06c;padding:15px 15px;max-width: 1000px;margin:10px auto;min-width:320px;width:100%;}.content ul{display: table;width:100%;padding:0;border-right:1px solid #ccc;}.content ul li{display: table-cell;border:1px solid #ccc;text-align: center;height:100px;border-right: none;line-height: 100px;}