一、浮動

浮動的影響

父級高度塌陷

清除浮動的方法

1. 給父元素設(shè)置寬高（不推薦，高度一般由內(nèi)容撐開）

2. 給父元素設(shè)置溢出隱藏（不推薦，如果有下拉列表的話，會看不到）

   overflow:hidden;
   

3. 給父元素添加一個偽類after

   .clear:after{
    content:"";//內(nèi)容為空
    clear:both;//清除左右兩邊的浮動
    height:0;//高度為0
    display:block;//塊元素
    visiblity:hidden;//不可見
   }
   

4. 給父元素添加一個沒有意義的子元素div在最后，并且給子元素添加clear:both;的屬性

   div{
       width:0;
       height:0;
       clear:both;
   }
   

二、margin的一些問題

margin-top

margin-top會把父元素一起推下來，解決方案

1. 給父元素添加內(nèi)容

   比如加一個空格 &nbsp；（不推薦）

2. 給父元素加一個邊框

3. 給父元素設(shè)置溢出隱藏

   overflow:hidden;
   

margin 上下左右

同級關(guān)系margin外邊距上下取最大的值，左右取和

三、居中

水平居中

1. 文字的水平居中

   text-algin:center;
   

2. 塊元素的水平居中

   給元素設(shè)置一個寬度，設(shè)置水平外邊距自動；

   margin:0 auto;
   

垂直居中

1. 文字的垂直居中

   如果容器中是單行文字，設(shè)置容器的高度等于行高

   height:50px;
   line-height:50px;
   

   如果容器中有n行文字，那么將行高設(shè)置為容器高度的n分之一

2. 容器的垂直居中

   給父元素設(shè)置一個相對定位 position:relative;

   給子元素設(shè)置絕對定位,top設(shè)置為50%并且設(shè)置margin-top為子元素高度的一半的負數(shù)

   例如 結(jié)構(gòu)如下

   <div id="big">
       <div id="small">
       </div>
   </div>
   

   設(shè)置樣式

   #big{
       position:relative;
       height:100px;
   }
   #small{
    width:50px;
    heigth:50px;
       position:absolute;
       top:50%;
       margin-top:-25px;
   }
   

總結(jié)一下垂直居中

例如 html結(jié)構(gòu)如下

<div id="div_big">
    <div id="div_small">    
    </div>
</div>

1. 父元素高度已知

   1. 子元素高度已知且為單行文本

      用line-height

      #div_big{
          width:100px;
          height:100px;
          line-height:100px;
      }
      

   2. 子元素高度已知且為多行文本

      設(shè)置垂直方向的margin值設(shè)置為（父元素高度-子元素高度）/2

      #div_big{
          width:100px;
          height:100px;
      }
      #div_small{
            width:50px;
          height:50px;
          margin:auto;
      }
      

   3. 子元素高度未知

      position+transform

      css如下

      #div_big{
          width:100px;
          height:100px;
          position:relative;
      }
      #div_small{
          position:absolute;
          left:50%;
          top:50%;
          transform:translateX(-50%)  translateY(50%);
      }
      

2. 父元素高度未知

   1. 子元素高度已知

      position+margin

      #div_big{
          position:relative;
      }
      #div_small{
          height=50px;
          position:absolute;
          left:50%;
          top:50%;
          margin-top:-25px;/*子元素的高度除以2*/
      }
      

   2. 子元素高度未知

      position+transform

      #div_big{
          position:relative;
      }
      #div_small{
          position:absolute;
          left:50%;
          top:50%;
          transform:translateX(-50%)  translateY(50%);
      }
      

四、定位

一般情況下用父相子絕

相對定位

position:relative;

特點：

1. 占位置
2. 相對于自己本身的位置，他不會脫離正常文檔流。

絕對定位

position：absolute；

1. 絕對定位會相對于某個點定位，這個點是根據(jù)祖先元素，
   如果祖先元素有定位屬性，那么就是相對于最近的祖先位置 ，
   如果沒有，它會一級一級往上找，直到找到瀏覽器x0，y0，這是就是
   相對于瀏覽器的位置
2. 脫離文檔流，不占文檔流位置

固定定位

position:fixed;

1. 相對于瀏覽器的位置，可做固定到瀏覽器
2. 脫離文檔流，不占文檔流位置

默認定位

position static

1. 給絕對定位添加一個參照物（無意義）

定位中的層級問題

z-index：用來調(diào)整元素的層級關(guān)系

注意：

1. 結(jié)構(gòu)決定層級感必須是兄弟關(guān)系，父子關(guān)系，父親永遠在底下。
2. 默認的都是0，數(shù)字越大層級越高。
3. 使用這個屬性該元素必須有定位屬性（定位屬性不能改變層級結(jié)構(gòu)，
   父元素始終會在子元素下面）
4. 必須有定位屬性才能使用

五、圖片回車解析為空格

把容器的font-size設(shè)置為0；

如果有文字，則再單獨設(shè)置元素font-size的值

六、隱藏

5個隱藏：

1. display：none； 消失 （不占位置）（不能設(shè)置過度）

2. visibility：hidden；隱藏（占位置）（不能設(shè)置過度）

3. opacity：0-1；透明度，可以設(shè)置過度

4. overflow：hidden；溢出隱藏（要寫寬度）

5. background-color：rgba；僅背景透明，文字不影響

   color有繼承，寫字體顏色時注意