# CSS布局常见问题总结（一）

margin水平居中的使用
- margin: 0 auto;
  目标元素为块级元素，并且设置宽度，没有宽度默认为100%，这会导致没有auto值
vertical-align的使用（垂直对齐方式）
- vertical-align设置行内元素垂直对齐方式，对块状元素无感
- vertical-align的值为百分比时，是相对于line-height属性计算的
实现水平方向上的li标签平均占据空间
- 使用display: flex属性
- 设置属性justify-content: space-between;
也可以考虑使用绝对定位+top、left等属性实现布局，但是容易出现不可预知的问题，所以不建议布局时不首先考虑这个方法
flex布局（更加灵活地处理布局问题）
- 意为弹性布局
- 需考虑兼容性的问题，webkit内核的浏览器（比如chrome、safari等）需使用以下代码


    .box{
      display: -webkit-flex; /* 用于兼容webkit内核的浏览器*/
      display: flex;
    }

设置为flex布局之后该父元素成为容器，它的子元素都成为容器成员。
容器包含两根轴，分别是主轴（main start）、交叉轴（cross start）,主轴的开始位置为容器的左边框，结束位置为右边框。交叉轴开始位置是上边框，结束为止为下边框

容器的属性
- justify-content：定义了子元素在主轴上的排列方式
  属性有：flex-start（从主轴开始处）、flex-end（从主轴结束处）、center（居中）、space-between（两端对齐、间隔相等）、space-around（项目间隔相等）
- align-iterms：定义了子元素在交叉轴的对齐方式
  属性有：flex-start、flex-end、center（中点对齐）、baseline（以第一行文字为基线对齐）、stretch（默认占满整个空间）
  了解更详细的信息可以参考阮一峰老师的博客
将背景图片按比例缩放剪裁以满足响应式的需求
假设直接将一个比较大的图片设置为背景
.div{ background: url(ImageSources/hero-banner-homepage.image.large_2x.jpg) no-repeat; width: 100%; height: 680px; }
结果会变的异常诡异：
因为图片本身远远大于要求的框的大小
所以就要用到以下代码：

.div{width: 100%;
    background: url(ImageSources/hero-banner-homepage.image.large_2x.jpg) no-repeat;
    background-size: cover;
    background-position: center 30%;
    position: relative;
    z-index: -1;
    padding-top: 1px;
    height: 680px;
    }

background-size: cover——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。
# CSS布局常见问题总结（一）