CSS阶段总结

CSS布局之左右布局与左中右布局

html部分：
<div class="parent clearfix">
  <div class="child">a</div>
  <div class="child">b</div>
  <div class="child">c</div>
</div>

CSS部分：
.child{
  float: left;
}
.clearfix::after {
    display: block;
    content: '';
    clear: both;
}
           

水平居中

子元素为内联元素、单个块状及多级块状元素布局方案不同，具体总结如下：

1. 内联元素：对父元素设置

   text-align: center；

2. 单个块状元素：对子元素设置

   margin: 0 auto;

3. 多个块状元素：有三种方式

   a、子元素全部设置为

   display: inline-block;

   ，父元素设置为

   text-align: center；

   b、flex布局，父元素

   display: flex; justify-content: center;

   c、如果是在多行各自居中，直接给子元素设置

   margin: 0 auto;

垂直居中

子元素为单行内联、多行内联及块状元素布局方案不同，具体总结如下：

1. 单行内联元素：父元素高度一定，设置

   line-height

   等于

   height

2. 多行内联元素：父元素设置：

   display: table-cell; vertical-align: middle;

3. 2、未知高度的块级元素：借助CSS3中的`transform`属性向Y轴反向偏移50%的方法来实现
   
              

一些小技巧

• 合理使用伪元素
• a标签去掉其默认样式时，颜色可设置为继承父元素

  a{color:inherit;}

• 合理使用

  max-width

  属性