转:CSS常用布局

作者：饥人谷_朱笑笑啊
链接：https://www.jianshu.com/p/ca624b52b400
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

1、左右布局

1) float实现，左侧宽带固定，右侧宽度自适应

核心代码：
左侧：width:100px ；float:left;
右侧：width:auto；margin-left:100px;

image.png

2) flex实现

核心代码：
父容器设置 display：flex；Right部分设置 flex：1

image.png

2、左中右布局

1) float实现，左右两列定宽，不可伸缩；中间内容区自适应

image.png

2) flex实现

image.png

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;
}