1、左右布局
1) float实现，左侧宽带固定，右侧宽度自适应
核心代码：
左侧：width:100px ；float:left;
右侧：width:auto；margin-left:100px;
1
2) flex实现
核心代码：
父容器设置 display：flex；Right部分设置 flex：1
2
2、左中右布局
1) float实现，左右两列定宽，不可伸缩；中间内容区自适应
3
2) flex实现
4
3、水平居中
1) 行内元素，在其父级元素上设定
text-align:center;
2) 确定宽度的块级元素
margin: 0 auto;
3）对于未知宽度的块级元素
（1）table标签配合margin左右auto实现水平居中
使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto
（2）inline-block实现水平居中方法
display：inline-block;（或display:inline）和text-align:center;实现水平居中
（3）flex实现
.container{
display: flex;
flex-direction: column;
}
.content{
align-self:center;
4、垂直居中
1) table-cell实现
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}
1) flex实现
.box {
display: flex;
justify-content: center;
align-items: center;
}
5、其他小技巧
1） 图片宽度的自适应
使得较大的图片，能够自动适应小容器的宽度
img {max-width: 100%}
2） 用图片充当列表标志
ul {list-style: none}
ul li {
background-image: url("path-to-your-image");
background-repeat: none;
background-position: 0 0.5em;
}
3）表格单元格等宽
用 table-layout: fixed 来保持单元格的等宽：
.calendar {
table-layout: fixed;
}
