css常用布局
在前端我们常用css进行网页的布局。下面介绍几种常用的布局方式。
1、水平垂直居中对齐
第一种
需要居中的元素定宽定高：
对于定宽定高的会计元素进行垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height: 100%;
background: green;
}
.inner-block{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
border: 1px solid red;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="inner-block">水平垂直居中对齐</div>
</body>
</html>
其中核心代码分析：position：absoute让元素脱离文档流，left:50%;top:50%;让被包含元素左右边界偏离包含元素的左边和右边各50%距离（这里比较拗口，如果不理解可查阅top,left的定义），设置margin-left,margin-top的值为被包含元素的宽度和高度的一半，并且为负值，这样就可以实现水平垂直居中定位。这种方式是兼容性最好，最普遍使用的一种方式。
第二种
需要居中的元素定宽不定高。我们经常在项目中会遇到，一些文本提醒框里面的文本较多，我们希望高度自适应，且水平垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height: 100%;
background: green;
}
.block{
position: absolute;
width: 400px;
left: 50%;
top: 50%;
border: 1px solid red;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="block">这是一个不定高元素这是一个不定高元素这是一个不定高元素这是一个不定高元素这是一个
不定高元素这是一个不定高元素这是一个不定高元素这是一个不定高元素这是一个不定高元素这是一个不定高元素不定高元素这是一个不定高元素这是一个不定高元素这是一个不定高元素</div>
</body>
</html>
这里我们使用了css3属性transform，其中translate(-50%, -50%)是设置相对于自身元素的宽高个向左向右偏移50%。这种设置的原理和第一种一样，可以实现不定高元素的垂直居中。在移动端非常实用，由于实用了css3的属性所以对于ie10以下的版本不兼容。
2、左右两栏布局
如图左边固定宽度，右边自适应宽度
第一种写法：
传统写法，无兼容性问题。
.left{
width: 300px;
float: left;
height: 100%
}
.right{
margin-left: 300px;
height: 100%;
}
此种写法通过设置左边元素左浮动脱离文档流，右边元素设置margin-left:'大于等于左边元素的宽度'就可以实现两栏布局。这种写法最传统没有兼容问题。
第二种：
flex布局
.main{
display: -webkit-box;
display: flex;
height: 100%
}
.left{
width: 300px;
height: 100%;
background: green;
}
.right{
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 100%;
background: red;
}
.mian为外层包裹元素的的类，设置-webkit-box，.left设置宽度，.right设置flex:1。这种方法由于使用了css3属性，pc端无法兼容低版本ie，移动端这种写法比较常见。
对于flex布局我们要考虑兼容性问题，对于flex弹性布局在设计出来后进行了一次比较大的改版。对于版本号比较低的现代浏览器版浏览器弹性布局声明的方式是display: box。改版后使用的是display:flex。由于不同浏览器需要加不同的修饰前缀，我们为了兼容不同版本浏览器可以加上前缀-webkit-*, -moz-* ,-ms-*分别兼容谷歌，火狐，ie，对于设置flex的值低版本用box-flex，高版本对应改成了flex。所以我们用flex弹性布局时如果对兼容性要求比较高要充分考虑兼容性问题。
