单列布局
HTML：
<div class="parent">
<div class="child"></div>
</div>
一.水平居中（常见的，那些什么table，导致性能不好的就不说了）
实现效果：
1.使用inline-block和text-align实现
<style>
.parent{
text-align: center;
border: 1px solid red;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
display: inline-block;
}
</style>
原理：
①.text-align是指定元素文本的水平对齐方式，可继承，
②.inline-block行内块级元素，就是还是行内元素的排列方式不换行，但是支持块级元素有的宽高和上下padding
多个inline-block子元素会怎样？
多个inline-block的间隙解决办法：在父级元素中加入font-size:0;
优点：兼容性好，
缺点：需要同时设置子元素和父元素
2.使用margin:0 auto实现
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
margin: 0 auto;
}
优点：兼容性好，
缺点：需要指定宽度
3.绝对定位(position)
效果：
.parent{
border: 1px solid red;
position: relative;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
position: absolute;
left:50%;
transform: translate(-50%);
}
原理：
父元素设置了position:relative,子元素设置了position:absolute,于是就会向父级相对定位，并且脱离文档流（就是浮在上面），left:50%,向左边移动页面的50%像素，但是还是不会居中呀，所以要设置一个平移属性，transform:translate(-50%),就是向x轴，也就是横轴，平移自身元素的50%个像素，正50%是向右，那么-50%就是向左啦！自行想象啦~
优点：不会影响其他元素
缺点：兼容性差ie9级以上才能实现
4.使用flex布局实现
不知道flex，可以看看这个http://www.techug.com/post/flex-examples.html
实现方法有两种
效果都是：
第一种：
.parent{
border: 1px solid red;
display: flex;
justify-content: center;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
}
原理：在父级元素设置弹性布局，justify-content使得子元素水平居中排列；
而且两个子元素的话，不会像displa:inline-block一样中间有间隙，如图：
第二种：
.parent{
display: flex;
border: 1px solid red;
}
.child{
border: 1px solid #667766;
background-color: bisque;
margin: 0 auto;
}
效果如下：
原理：在父级元素设置为弹性布局，然后子元素设置左右自适应，就可以实现没有宽度，也可以用margin:0 auto，居中
优点：简单快捷，代码量少
缺点：兼容性差，如果大面积的布局可能会影响效率
二、垂直居中
1.使用flex实现
html,body{
height: 100%;
}
.parent{
border: 1px solid red;
display: flex;
align-items: center;
height: 100%;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
}
效果如下:
flex原理不解释了,注意要给父级元素设置高度,如果设置为100%,那么也要给html,body设置高度为100%,
一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。
html{height:100%},那么HTML的上级是谁呢?
那么浏览器本身是有宽度和高度的，设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。
2.使用绝对定位
.parent{
border: 1px solid red;
position: relative;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
效果如下
top:50%没有生效，为什么呢?同上,没有设置高度是不会生效的
html,body{
height: 100%;
}
.parent{
border: 1px solid red;
height: 100%;
position: relative;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
三.水平垂直都居中
1.绝对定位
html,body{
height: 100%;
}
.parent{
border: 1px solid red;
height: 100%;
position: relative;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
效果如下:
2.flex
html,body{
height: 100%;
}
.parent{
border: 1px solid red;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.child{
50px;
height: 50px;
border: 1px solid #667766;
background-color: bisque;
}
效果如下:
两列布局
一.要实现的效果:左边固定宽度,右边自适应
1.float浮动实现
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
div{
border: 1px solid #000000;
}
.box1{
100px;
float: left;
background-color: red;
}
.box2{
margin-left: 102px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">我们是兄弟啊,我的宽度是固定的</div>
<div class="box2">我们是兄弟啊,我的宽度是自适应的</div>
</body>
效果如下:
原理:左边兄弟设置浮动,右边设置margin-left空出位置.
2.flex实现
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.parent{
display: flex;
}
.box1{
background-color: red;
100px;
}
.box2{
background-color: green;
flex: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">我们是兄弟啊,我的宽度是固定的</div>
<div class="box2">
我们是兄弟啊,我的宽度是自适应的
</div>
</div>
</body>
效果如下:
原理:父级元素设置display:flex,设置右侧兄弟flex:1,剩余的宽度,由于align-items默认值未stretch,所以两者高度相等.
二.一列不定宽,一列自适应
1.float
.box1{
background-color: red;
border:1px solid #000;
float: left;
}
.box2{
background-color: aqua;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">不固定的</div>
<div class="box2">自适应的</div>
</div>
</body>
2.flex
三列布局
一.两列定宽,一列自适应
1.浮动实现
.box1,.box2{
background-color: red;
border:1px solid #000;
98px;
float: left;
}
.box3{
background-color: green;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">固定的</div>
<div class="box2">固定的</div>
<div class="box3">
自适应的
</div>
</div>
</body>
原理:同上
2.flex实现
.box1,.box2{
background-color: red;
border:1px solid #000;
98px;
float: left;
}
.box3{
background-color: green;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">固定的</div>
<div class="box2">固定的</div>
<div class="box3">
自适应的
</div>
</div>
</body>
二.两侧定宽,中间自适应
1.flex
.parent{
display: flex;
}
.box1,.box3{
background-color: red;
border:1px solid #000;
98px;
}
.box2{
background-color: green;
flex: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">固定的</div>
<div class="box2">自适应的</div>
<div class="box3">
固定的
</div>
</div>
</body>
2.float
.box1,.box3{
background-color: red;
border:1px solid #000;
98px;
}
.box1{
float: left;
}
.box2{
float: left;
background-color: green;
margin-right: -200px;
100%
}
.box3{
float: right;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">左边固定的</div>
<div class="box2">自适应的</div>
<div class="box3">
右边固定的
</div>
</div>
</body>
效果:
总结常用的办法就是:
1.float
2.position
3.flex
建议尽量不要用float,会导致很多问题,其他两个随意用