CSS 基礎概念

最近開始整理CSS，先來整理一下CSS基礎概念，本文主要介紹一下CSS文檔流和盒模型。

CSS簡介

CSS 全稱層疊樣式表。層疊分爲三種：

1. 樣式層疊，能夠屢次對同一選擇器進行樣式聲明
2. 選擇器層疊，能夠用不一樣選擇器對同一個元素進行樣式聲明
3. 文件層疊，能夠用多個文件進行層疊

目前使用最普遍的版本是 CSS 2.1，CSS 3 開始，CSS 使用模塊化升級，這就致使有些瀏覽器可能不支持某些新特性，咱們能夠經過使用 caniuse.com 來查詢瀏覽器是否支持。

CSS 語法

• 語法一：樣式語法

選擇器{
    屬性名：屬性值;
    /*註釋*/
}
複製代碼

注意：

1. CSS 沒有//註釋
2. CSS區分大小寫
3. 任何一個地方寫錯，瀏覽器都不會報錯，會直接忽略

• 語法二：@語法

@charset "UTF-8";
@import url(2.css);
@media (min-width:100px) and (max-width:200px){
    語法一
}
複製代碼

注意：

1. @charset 必須放在第一行，charset 是字符集的意思，但 UTF-8 是字符編碼 encoding，屬於歷史遺留問題。
2. 前兩個 @ 語法必須以 ; 結尾

文檔流

文檔流指的是文檔流動方向，方向從左到右、從上到下。

• 從左到右：內聯元素 (inline 元素，span 元素)，inline-block 元素。元素排滿就會另起一行。

inline 元素

• 從上到下：塊級元素 (block 元素，div 元素)，一個塊級元素佔一行。

block 元素

寬度

• inline 元素的寬度爲內部 inline 元素的和，不能用 width 指定
• block 元素默認自動計算寬度，能夠用 width 指定
• inline-block 元素結合前二者的特色，可用 width 指定高度

高度

• inline 元素高度由 line-height 間接肯定，跟 height 無關
• block 元素由內部文檔流元素決定，能夠指定 height
• inline-block 元素和 block 元素相似，能夠指定 height

inlin-block 元素，結合了 inline 元素和 block 元素的特色。必定是成塊的，佈局從左到右，不會一部分在上一行，一部分在下一行。

inline-block 元素

注意：

1. 不要在內聯元素裏寫塊級元素！
2. 塊級元素佔滿寬度是 auto ，不是 100% ，通常不要寫寬度 100% ！
3. 若是 div 裏面什麼都沒有，div 高度爲0；span 的實際高度是行高，改變字體，行高會變
4. 經過 padding 撐高的是可視範圍，不是實際的範圍

overflow 溢出

當內容寬度或高度大於容器的時，會出現溢出的狀況，能夠用 overflow 來設置是否出現滾動條。overflow 能夠分爲 overflow-x 和 overflow-y。

• auto 靈活設置
• scroll 永遠顯示，不超出容器也顯示滾動條
• hidden 直接隱藏溢出部分
• visible 直接顯示溢出部分

脫離文檔流

上面咱們提到，block 元素高度由內部文檔流元素決定，能夠設置 height ，因此有些元素不在文檔流中，就不會計算高度。那麼，要如何實現元素脫離文檔流，有兩種方法。

1. 設置 float 佈局
2. position：absolute / fixed

那麼怎麼讓元素不脫離文檔流呢？不要用上面的屬性就不會脫離文檔流。

盒模型

盒模型就是封裝 HTML 元素的盒子。由外邊距 margin、邊框 border、內邊距 padding、內容 content 組成。

盒模型分爲兩種：一種是 border-box、一種是 content-box。

如圖所示。

使用 content-box 時，咱們給元素設置 width ，width 的值表明 content 寬度。

元素總寬度 = maring + border + padding + width
複製代碼

使用 border-box 時，咱們給元素設置 width ，width 的值表明 border 的 + padding 的值 + content 寬度

元素總寬度 = margin + width
複製代碼

margin 合併

在使用盒模型的過程當中，會存在 margin 合併的現象，有以下兩種狀況會合並

1. 父子 margin 合併
2. 兄弟 margin 合併

注意：

• 只有上下 margin 會重疊合並，左右 margin 不會重疊合並
• 誰的邊距長，誰的 margin 合併在外面
• 合併的前提是元素之間什麼都沒有

知道了存在 margin 合併的狀況，接下來看下如何阻止合併。

1. 父子合併

   • 設置 border / padding 擋住
   • 設置 overflow: hidden 擋住
   • 設置 display: flex

2. 兄弟合併能夠用 inline-block 消除，兄弟合併是符合預期的

最後，瞭解一下 CSS 基本單位

基本單位

長度單位

• px 像素
• em 相對自身 font-size 的倍數
• 百分數
• 整數
• rem
• vw 和 vh

顏色

• 十六進制 #FF6600 或者 #F60
• RGBA 顏色 rgb(0, 0, 0) 或者 rgba(0, 0, 0, 1)
• hsl 顏色 hsl(360, 100%, 100%, 1)