---
tags: CSS,第二章
---
# CSS第二章
## 結構偽類選擇器
作用:根據HTML結構關係查找元素
優勢:減少對於使用class和取名字的依賴，有利於代碼整潔

    <ul>
      <li>這是第1個li</li>
      <li>這是第2個li</li>
      <li>這是第3個li</li>
      <li>這是第4個li</li>
      <li>這是第5個li</li>
      <li>這是第6個li</li>
      <li>這是第7個li</li>
      <li>這是第8個li</li>
    </ul>

      li:first-child {
        background-color: green;
      }
      li:last-child {
        background-color: green;
      }
      li:nth-child(5) {
        background-color: red;
      }
      li:nth-last-child(2) {
        background-color: blue;
      }

## nth常用公式
n的值為0、1、2、3、4......
| 功能 | 公式 | 英文 |
| --------- |:----------:| ---- |
| 偶數 | 2n | even |
| 奇數 | 2n+1、2n-1 | odd |
| 前5個 | -n+5 | 沒有 |
| 第5個之後 | n+5 | 沒有 |

    <ul>
      <li>這是第1個li</li>
      <li>這是第2個li</li>
      <li>這是第3個li</li>
      <li>這是第4個li</li>
      <li>這是第5個li</li>
      <li>這是第6個li</li>
      <li>這是第7個li</li>
      <li>這是第8個li</li>
    </ul>

      li:nth-child(2n) {
        background-color: red;
      }
      li:nth-child(2n + 1) {
        background-color: green;
      }

## 偽元素
區別
元素:HTML設置的標籤
偽元素:由css模擬出的標籤效果
注意
必須設置content屬性才會生效
偽元素默認是行內元素
種類(冒號1個2個都行)
| 偽元素 | 作用 |
| -------- |:--------------------------:|
| ::before | 在父元素內容最前添加偽元素 |
| ::after | 在父元素內容最後添加偽元素 |

    <div class="father">愛</div>

      .father {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      .father::before {
        content: "老鼠";
        color: green;
        width: 100px;/*因為是行內元素不生效*/
        height: 100px;/*因為是行內元素不生效*/
        background-color: blue;
      }
      .father::after {
        content: "大米";
      }

## 標準流
又稱文檔流
就是瀏覽器的默認排版規則
塊級元素:從上往下，垂直布局，獨佔一行
行內元素:從左往右，水平布局，空間不夠自動折行
## 行內塊問題
程式碼換行時，元素間會有小空隙

    <div class="one">one</div>
    <div class="two">two</div>

程式碼不換行，元素會緊貼

    <div class="one">one</div><div class="two">two</div>

      div {
        display: inline-block;
        width: 100px;
        height: 100px;
      }
      .one {
        background-color: pink;
      }
      .two {
        background-color: skyblue;
      }

# 浮動

    <div class="one">one</div>
    <div class="two">two</div>

      div {
        display: inline-block;
        width: 100px;
        height: 100px;
      }
      .one {
        background-color: pink;
        float: left;
      }
      .two {
        background-color: skyblue;
        float: left;
      }

## 浮動特點
浮動元素脫離標準流，相當於浮起來
一樓:普通元素
二樓:普通文字、浮動元素(只看二樓時浮動元素又像塊元素了)
三樓:浮動文字
浮動後類似行內塊
一行顯示多個(父元素寬度不夠會自動換行)
可以設寬高
無法使用margin:0 auto

    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>

      .one {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
      }
      .two {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
      }
      .three {
        width: 300px;
        height: 300px;
        background-color: orange;
        /* float: left; */
      }

## 小米布局

    <div class="top"></div>
    <div class="header">頭部</div>
    <div class="content">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>

      * {
        margin: 0;
        padding: 0;
      }
      .top {
        height: 40px;
        background-color: black;
      }
      .header {
        width: 1226px;
        height: 100px;
        background-color: pink;
        margin: 0 auto;
      }
      .content {
        width: 1226px;
        height: 460px;
        background-color: green;
        margin: 0 auto;
      }
      .left {
        width: 234px;
        height: 460px;
        background-color: orange;
        float: left;
      }
      .right {
        width: 992px;
        height: 460px;
        background-color: skyblue;
        float: right;
      }

## css書寫順序
1.display、float
2.盒子模型:margin、border、padding、寬度、高度、背景色
3.文字樣式
## 小米產品

    <div class="box">
      <div class="left"></div>
      <div class="right">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>

      * {
        margin: 0;
        padding: 0;
      }
      .box {
        margin: 0 auto;
        width: 1226px;
        height: 614px;
        /* background-color: pink; */
      }
      .left {
        float: left;
        width: 234px;
        height: 614px;
        background-color: purple;
      }
      .right {
        float: right;
        width: 978px;
        height: 614px;
        /* background-color: green; */
      }
      ul {
        list-style: none; /*去掉列表的圓點*/
      }
      .right li {
        float: left;
        margin-right: 14px;
        margin-bottom: 14px;
        width: 234px;
        height: 300px;
        background-color: skyblue;
      }
      .right li:nth-child(4n) {
        margin-right: 0;
      }

## 新浪導航3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        margin: 50px auto;
        width: 640px;
        height: 50px;
        background-color: pink;
      }
      ul {
        list-style: none;
      }
      .nav li {
        float: left;
      }
      .nav li a {
        display: block;
        width: 80px;
        height: 50px;
        /* background-color: green; */
        text-align: center;
        line-height: 50px;
        color: white;
        text-decoration: none;
      }
      .nav li a:hover {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <li><a href="#">新聞</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">新聞</a></li>
      </ul>
    </div>
  </body>
</html>

# 清除浮動
## 場景搭建

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top {
        margin: 0 auto;
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
      }
      .bottom {
        height: 100px;
        background-color: green;
      }
      .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: orange;
      }
      .right {
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="top">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

## 額外標籤
清除浮動方法1:直接設置父元素高度
清除浮動方法2:額外標籤法
在父元素內容最後添加一個塊級元素
給添加的塊級元素設置clear:both

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top {
        margin: 0 auto;
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
      }
      .bottom {
        height: 100px;
        background-color: green;
      }
      .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: orange;
      }
      .right {
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
      }
      .clearfix {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="top">
      <div class="left"></div>
      <div class="right"></div>
      <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

## 單偽元素清除法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top {
        margin: 0 auto;
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
      }
      .bottom {
        height: 100px;
        background-color: green;
      }
      .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: orange;
      }
      .right {
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
      }
      .clearfix::after {
        content: "";
        /* 偽元素標籤是行內 */
        display: block;
        clear: both; /* 清除左浮動和清除右浮動 */
        /* 補充寫法:兼容性用途 */
        height: 0;
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="top clearfix">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

## 雙偽元素清除法
增加功能:避免塌陷現象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top {
        margin: 0 auto;
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
      }
      .bottom {
        height: 100px;
        background-color: green;
      }
      .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: orange;
      }
      .right {
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
      }
      .clearfix::before,
      .clearfix::after {
        content: "";
        /* 偽元素標籤是行內 */
        /* 不用行內或塊級或行內塊，而是表格類型 */
        display: table;
      }
      .clearfix::after {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="top clearfix">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

## overflow
清除浮動方法1:直接設置父元素高度
清除浮動方法2:額外標籤法
清除浮動方法3:單偽元素清除法
清除浮動方法4:雙偽元素清除法
清除浮動方法5: overflow: hidden

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top {
        margin: 0 auto;
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
        overflow: hidden;
      }
      .bottom {
        height: 100px;
        background-color: green;
      }
      .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: orange;
      }
      .right {
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="top">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>