CSS语法(布局)

单列布局:
水平居中:
水平居中是一种常见的页面布局,多出现于标题。下面是四中水平居中的方法:(这里面全都是针对child来进行操作的)
使用inline-block和text-align来实现

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

使用table来实现:

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

使用margin:0 auto来实现:

.child{width:200px;margin:0 auto;}

垂直居中:
使用flex来实现:

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

多列布局:
接下来是重点了(虽然前面也很重要)
左列定宽,右面自适应

CSS语法(布局)_第1张图片
D5U_~NL2H$ITT9MOX`)HBSC.png

利用float和margin来实现:

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

两列定宽,中间自适应

![IITFLO~S[9Z(TN~SMK)0.png
利用float和margin来实现

.left{width:100px;float:left;} 
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

你可能感兴趣的:(CSS语法(布局))