「CSS深度指北」前端知識梳理之CSS篇（中秋國慶特別篇）

認識瀏覽器

組成部分

可能一說組成部分，小夥伴們就直接懵了，開門見山地說，別怕，還有更懵的在後面呢！

組成分為兩大部分： shell 和核心（其中核心是核心部分，它代表著瀏覽器所使用的技術手段，而shell就是我們使用者所看到的介面）

例舉你知道的比較大的瀏覽器產商？

shell	核心
Google Chrome	webkit（谷歌和蘋果safari一起開發）/ blink（谷歌將技術獨立出來）
safari	webkit
firefox	gecko
IE	trident
opera（目前屬於360和崑崙萬維）	presto

===== 手動分界線 =====

360
QQ
遨遊
獵豹
全球
搜狗
…

分界線的意義：分介面下面部分只是在 shell 上做了手段，沒有專屬的核心。我們回答的話答分界線上部分即可。

核心

包含渲染（rendering）引擎和 JS 引擎

渲染引擎如字面意思，就是渲染我們頁面的，大致瞭解即可，本文在這裡講解一下 JS 引擎。 JS 引擎早期是不存在的，通過同步渲染引擎來負責JS的解析。而渲染引擎效能是有限的，所以JS解析程式碼能力就比較低，100行多程式碼可能就崩潰了。因此，引入了 JS 引擎，大大加大了對 JS 解析的優化，速度相當快。

比較有名的就是谷歌推出的 V8 引擎，針對 JS 解析做了非常多的優化。只能一句，谷歌，牛！

認識CSS

cascading style sheet （層疊樣式表）

選擇器

<!-- 內聯樣式 -->
<div style="width: 100px; height: 100px;"></div>

<style type="text/css">
  /* 內部樣式 */
  div{
    width: 100px;
    height: 100px;
    background-color: #000;
  }
</style>

<!-- 外部樣式 -->
<link rel="stylesheet" href="./index.css">

權重優先順序問題

檢視如下程式碼，會顯示什麼顏色呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS樣式基礎</title>
  <!-- 外部樣式 -->
  <link rel="stylesheet" href="./index.css">
  <style type="text/css">
  /* 內部樣式 */
    div{
      background-color: blue;
    }
  </style>
</head>
<body>
  <div style="background-color: red;"></div>
</body>
</html>

外部樣式 index.css 檔案程式碼如下：

div{
  width: 100px;
  height: 100px;
  background-color: yellow;
}

答案是 紅色

權重：內聯樣式（用的較少，可以使用 display: none 快取資料） > 內部樣式表（一般測試用） > 外部樣式表（主要使用方式）

選擇器的優先順序

!important > id > class | 屬性 > 標籤 > *

分組選擇器

清除輸入框的輪廓

input,
textarea{
  outline: none;	
}

瀏覽器對父子選擇器的匹配規則

從下到上，從右到左

button

button{
  border: none; // 去掉按鈕的邊框
  color: white; // 更改按鈕字型顏色
  background-color: red; // 更改按鈕顏色
  font-size: 12px; // 更改字型大小
}

單行文字截斷和顯示省略號的三大件

div{
  width: 200px;
  height: 22px;
  border: 1px solid #000;
  white-space: nowrap; /*不換行*/
  overflow: hidden; /*超出部分隱藏*/
  text-overflow: ellipsis; /*隱藏部分加省略號*/
}

visibility:hidden 和 display:none 區別

visibility:hidden 保留被隱藏的元素所佔據的HTML檔案空間

display:none 不保留被隱藏的元素所佔據的HTML檔案空間

行內塊和行內元素文字對齊問題

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行內塊和行內元素文字對齊問題</title>
  <style type="text/css">
    .block{
      display: inline-block;
      width: 150px;
      height: 100px;
      border: 1px solid #000;
      vertical-align: middle; /*對齊*/
    }
  </style>
</head>
<body>
  <span class="block">123</span>
  <span>123</span>
</body>
</html>

容器內多行文字居中的方法

1、將容器的 display 設定為 table
2、將容器內的文字的 display 設定成 table-cell （表格單元格屬性）
3、將容器內的文字的 vertical-aligin 設定成 middle

行內塊元素之間預設間距問題

在產生邊距的行內塊的父元素設定屬性：font-size：0px;

在父元素上設定，word-spacing(詞邊距)的值設為合適的負值即可

水平垂直居中：外盒子固定內邊距，內盒子寬高100%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平垂直居中方式1</title>
  <style type="text/css">
    .box {
      width: 100px;
      height: 100px;
      padding: 30px;
      border: 1px solid #000;
    }
    .box .box1 {
      width: 100%;
      height: 100%;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>
</html>

瀏覽器body預設margin

ie8 -> 上下16px 左右8px
ie7 -> 上下15px 左右11px

定位

浮動流

浮動流，塊級元素無法識別浮動流元素的位置。而定位 position 會新建一個圖層。

內聯、內聯塊、浮動、溢位隱藏、純文字都可以識別浮動元素的位置，除了塊級元素。

float以後，元素就變成內聯塊級元素

清除浮動方式1

因為設定了浮動流了之後，塊級元素沒辦法識別浮動流元素的位置，自然會出現高度塌陷的問題。可採用如下方式清除，通過一個塊級元素，設定 clear: both 即可，但此方法不是特別好，額外新增了一個元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮動方式1</title>
  <style type="text/css">
    .box {
      width: 200px;
      border: 1px solid #000;
    }

    .box .inner-box{
      float: left;
      width: 100px;
      height: 100px;
    }

    .box .inner-box.box1{
      background-color: green;
    }

    .box .inner-box.box2{
      background-color: orange;
    }

    .clearfix{
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner-box box1"></div>
    <div class="inner-box box2"></div>
    <p class="clearfix"></p>
  </div>
</body>
</html>

偽類

直接看下面例子，看看偽類是怎麼使用的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>偽類簡單使用</title>
  <style type="text/css">
    p:before{
      content: "Chocolate";
    }

    p:after{
      content: "寫部落格！";
    }
  </style>
</head>
<body>
  <p>喜歡</p>
</body>
</html>

其中， content 這個屬性值必須加上！

清除浮動方式2

利用偽元素來清除浮動，通過新增一個塊級並且設定 clear:both來清除。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮動方式2</title>
  <style type="text/css">
    ul::after,
    div::after{
      content: "";
      display: block;
      clear: both;
    }

    .box {
      width: 200px;
      border: 10px solid #000;
    }
    /* 下面這種方式也可以，但沒有上述直接設定div好 */
    /* .box::after{
      content: "";
      display: block;
      clear: both;
    } */

    .box .inner-box{
      float: left;
      width: 100px;
      height: 100px;
    }

    .box .inner-box.box1{
      background-color: green;
    }

    .box .inner-box.box2{
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner-box box1"></div>
    <div class="inner-box box2"></div>
  </div>
</body>
</html>

清除浮動方式3

下面才是清除浮動的最好方式，直接寫一個類 clearfix，然後需要清除浮動的話，直接在父級元素上新增這個類就好了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮動方式3</title>
  <style type="text/css">
    .clearfix::after{
      content: "";
      display: block;
      clear: both;
    }

    .box {
      width: 200px;
      border: 10px solid #000;
    }

    .box .inner-box{
      float: left;
      width: 100px;
      height: 100px;
    }

    .box .inner-box.box1{
      background-color: green;
    }

    .box .inner-box.box2{
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="inner-box box1"></div>
    <div class="inner-box box2"></div>
  </div>
</body>
</html>

content 實現動態資料

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>content動態資料獲取</title>
  <style type="text/css">
    p::before{
      content: attr(data-username);
    }
  </style>
</head>
<body>
  <p data-username="Chocolate">,歡迎您的來訪!</p>
</body>
</html>

CSS3

盒子陰影

box-shadow：水平位置（必）垂直位置（必）模糊距離陰影的尺寸（相當於在水平和垂直上的一個增量）陰影顏色陰影的種類

相容性寫法

-webkit-box-shadow: 0 0 10px;
-moz-box-shadow: 0 0 10px;
-o-box-shadow: 0 0 10px;

邊框圓角

純圓 50% 寬高一樣

半圓角 height/2 + px

遇到圖片突出覆蓋問題，可以用 overflow: hidden 來解決。

網站cover背景圖縮放不改變比例

.banner{
  width: 100%;
  height: 600px;
  background-color: orange;
  background-image: url(img/xxx.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

背景圖不隨卷軸變化

background-attachment 有兩個屬性值， scrool（預設值，會跟隨卷軸而變化），fixed（不會隨著卷軸變化）

html{
  height: 100%;
  background-color: orange;
  background-image: url(img/xxx.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}

logo公司常用寫法模板

解決因為網路問題導致css載入不出來時有一個補救措施

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>logo公司常用寫法模板</title>
  <style type="text/css">
    h1{
      margin: 0;
    }

    .logo{
      width: 142px;
      height: 58px;
    }

    .logo h1 .logo-hd{
      display: block;
      width: 142px;
      height: 0;
      padding-top: 58px;
      background: url(img/logo.png) no-repeat 0 0/142px 58px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="logo">
    <h1>
      <a href="" class="logo-hd">淘寶網</a>
    </h1>
  </div>
</body>
</html>

BFC特點

有點像完全獨立出來的容器，不會對外面元素的佈局產生影響。
屬於普通流的範疇

如何讓一個元素成為BFC

body本身就是BFC元素
被定義float: left / right
position: absolute / fixed
display: inline-block / table-cell / flex
overflow: auto / hidden / scroll

BFC解決了什麼問題

它解決了什麼問題？

margin合併問題
高度塌陷問題
margin塌陷問題

還是講解一下 margin塌陷問題，如下程式碼，當我們在子級盒子裡面設定 margin-top 發現會帶著父級盒子一起下去了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC：margin塌陷問題</title>
  <style type="text/css">
    .box1{
      width: 300px;
      height: 300px;
      background-color: #000;
    }

    .box2{
      width: 50px;
      height: 50px;
      margin: 0 auto;
      margin-top: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

解決方式，就是利用BFC特性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC：margin塌陷問題</title>
  <style type="text/css">
    .box1{
      /* 可選方式 */
      /* border: 1px solid transparent; */

      /* 解決方式，形成BFC */
      /* display: inline-block; */
      /* display: table-cell; */
      /* overflow: hidden; */
      /* float: left; */
      width: 300px;
      height: 300px;
      background-color: #000;
    }

    .box2{
      width: 50px;
      height: 50px;
      margin: 0 auto;
      margin-top: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>