CSS階段總結

CSS布局之左右布局與左中右布局

方法：為子元素設定浮動，然後在其父元素上使用clearfix類來清除浮動。代碼示例：

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. 塊狀元素：1、固定高度的塊級元素：通過絕對定位元素距離頂部50%，并設定

   margin-top

   為向上偏移元素高度的一半

2、未知高度的塊級元素：借助CSS3中的`transform`屬性向Y軸反向偏移50%的方法來實作

           

一些小技巧

• 合理使用僞元素
• a标簽去掉其預設樣式時，顔色可設定為繼承父元素

  a{color:inherit;}

• 合理使用

  max-width

  屬性

來源：

https://segmentfault.com/a/1190000017482862