CSS页面布局详解

居中布局

水平居中

父元素和子元素的宽度都未知

inline-block + text-ailgn

.child{display:inline-block;}
.parent{text-align:center;}    

优点:兼容性好
缺点:子元素文本继承了text-align属性,子元素要额外加text-align:left;


table + margin

.child{display:table; margin:0 auto;}

优点:只需要设置子元素的样式


absolute + transform

.parent{position:relative;}
.child{position:absolute; left:50%; transform: translateX(-50%);

优点:居中子元素不会对其他元素产生影响
缺点:transform是CSS3的属性,存在兼容性问题


flex + justify-content

.parent{display:flex; justify-content:center;}

优点:只需要设置父元素的样式
缺点:兼容性问题


flex + margin

.parent{display:flex;}
.child{margin:0 auto;}

垂直居中

父容器和子容器的高度都未知

table-cell + vertical-align

.parent{display:table-cell; vertical-align:middle;}

优点:兼容性好


absolute + transform

.parent{position:relative;}
.child{position:absolute; top:50%; transform:translateY(-50%);}

优点:子元素不会干扰其他元素
缺点:兼容性


flex + align-item

.parent{display:flex; align-items:center;}

优点:只需要设置父元素
缺点:兼容性问题

水平垂直居中

父容器和子容器的高度都未知

inline-block + text-align + table-cell + vertical-align

.parent{text-align:center; display:table-cell; vertical-align:middle;}
.child{display: inline-block;}

absolute + transform

.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

flex + justify-content + align-item

.parent{display:flex; justify-content:center; align-items:center;}

多列布局

定宽-自适应

float+margin

.left{float:left; width:100px;}
.right{margin-left:120px;}

float+margin+fix

<div class="left"></div>
<div class="right-fix">
    <div class="right"></div>
</div>

外层在包裹一个容器

.left{float:left; width:100px; position: relative;}
.right-fix{float:right; width:100%; margin-left:-100px;}
.right{margin-left:120px;}

兼容性很好,但是多了层right-fix的结构

float+overflow

.left{float:left; width:100px; margin-right: 20px;}
.right{overflow:hidden;

table

.parent{display:table; width:100%; table-layout:fixed;}
.left,.right{display:table-cell;}
.left{width:100px; padding-right:20px;}

flex

.parent{display:flex;}
.left{width:100px; margin-right:20px;}
.right{flex:1;}

不定宽-自适应

float + overflow

.left{float:left; margin-right:20px;}
.right{overflow:hidden;}

table

.parent{display:table; width:100%;}
.left,.right{display:table-cell;}
.left{width:0.1%; padding-right:20px;}

flex

.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}

打赏此文

如果您觉得本站的内容对您有所帮助,您可以扫描下面的二维码小额支付请我喝杯茶,感谢!打赏记录
支付宝
微信
承诺:凡打赏捐助的朋友,留言备注自己的邮箱,在打赏捐助时间点的6个月内,本站会每周邮件推送原创专业技术博文,供大家学习和参考!

留下评论

All fields marked (*) are required