目錄

• 長度單位
  • 像素
  • 百分比
  • em
  • rem
• 顏色單位
  • RGB
  • RGBA
• 文檔流(normalflow)
• 盒子模型
  • 內容區(content)
  • 邊框(border)
  • 內邊距(padding)
  • 外邊距(margin)
  • 水平方向布局
  • 垂直方向布局
  • 邊距折疊(外邊距)
  • 行內元素的盒模型
  • 瀏覽器的默認樣式
    • reset 樣式
    • normalize 樣式
  • 盒子大小
  • 盒子輪廓
    • 邊框與輪廓
    • 陰影
    • 圓角
      • 圓
      • 橢圓

長度單位

• 像素

  我們先來看下某度上關于像素(pixel,縮寫 px)的介紹像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。 可以將像素視為整個圖像中不可分割的單位或者是元素。不可分割的意思是它不能夠再切割成更小單位抑或是元素，它是以一個單一顏色的小格存在 [1] 。每一個點陣圖像包含了一定量的像素，這些像素決定圖像在屏幕上所呈現的大小。也就是說，顯示器屏幕實際上是由一個一個的小點(單位色塊，即像素)構成的
  • 分辨率 = 水平方向像素 * 垂直方向像素
    • 屏幕分辨率

      例如，屏幕分辨率是 1920×1080，則該屏幕水平方向有 1920 個像素，垂直方向有 1080 個像素

      • 不同屏幕的像素大小是不同的，也就是說像素大小不像我們現行的長度單位(如米/m)那樣有著固定的國際標準
      • 所以同樣的像素大小在不同的設備上顯示效果是不一樣的，像素越小的屏幕顯示的效果越清晰
    • 圖像分辨率

      一張圖片分辨率是 300x200，則該圖片在屏幕上按 1:1 縮放時，水平方向有 300 個像素，垂直方向有 200 個像素點

      • 圖片分辨率越高，1:1 縮放時面積越大
      • 圖片分辨率越低，1:1 縮放時面積越小

• 百分比

  也可以將屬性值設置為相對于其父元素屬性的百分比 好處可以使子元素跟隨父元素(暫且先理解成父元素，后面會詳細說)的改變而改變

• em

  em 是相對于元素的字體大小來計算的，1em = <self>.font-size，也就說 em 值會根據元素本身的字體大小的改變而改變 1em = 16px 默認一個font-size位16px

• rem

  rem 是相對于根元素的字體大小來計算，1em = <root>.font-size，也就說 em 值會根據根元素的字體大小的改變而改變 html字體大小計算 <style>* {font-size: 24px;}.box1 {width: 200px;height: 200px;background-color: orange;}.box2 {width: 50%;height: 50%;background-color: aqua;}.box3 {font-size: 20px;width: 10em;height: 10em;background-color: greenyellow;}.box4 {font-size: 20px;width: 10rem; /*當時用rem時，不管怎么改本元素的font-size都是不會變的。需要定義root元素的font-size才可以 */height: 10rem;background-color: red;} </style><div class="box1"><div class="box2"></div> </div><div class="box3"></div><div class="box4"></div>

顏色單位

• 人眼能夠識別多少種顏色？

  正常人有三種視椎細胞，是三色視覺者(紅綠藍)，總共能看到大約 100 萬種顏色 男的大約 130 萬 女的大約 180 萬大概有經驗的油漆工人辨別 1000 種左右，再高就難以分辨了。 比如紅色，可以分為 50 個等級，鄰近的兩個等級能夠別出來，說明他的眼睛辨別能力就很不錯了。 過去的老工人，憑肉眼可辨別 50 種黑色，當然都要有特定的樣板色做對比。

• css 中的顏色名稱

  其中有 140 種顏色名稱是所有瀏覽器都支持的，但是有個問題，就是在 css 中直接使用顏色名非常不方便

• 光的三原色和顏料的三原色

  光學三原色(RGB)：紅、綠、藍(靛藍)。光學三原色混合后，組成顯示屏顯示顏色，三原色同時相加為白色，白色屬于無色系(黑白灰)中的一種。
  顏料三原色(CMYK)：品紅、黃、青(天藍)。色彩三原色可以混合出所有顏料的顏色，同時相加為黑色，黑白灰屬于無色系。

  光是由三種色光組成的，任何一種顏色均可以由這三種顏色調和出來

• RGB

  • RGB 通過三原色的不同濃度來調配出不同的顏色
  • 語法：RGB(red, green, blue)
  • 范圍：每一種顏色的范圍在 0 ~ 255(0% ~ 100%)之間

• RGBA

  就是在 rgb 的基礎上增加了一個 a 表示不透明度

  • 語法：rgb(red, green, blue, 0-1)
  • 1 表示完全不透明
  • 0 表示完全透明
  • .5 半透明

• 十六進制的 RGB

  就是 RGB 值的十六進制寫法

  • 語法：#RRGGBB
  • 范圍：每一種顏色的范圍在 00 ~ ff 之間
  • 特殊地：如果顏色兩位兩位重復可以進行簡寫，如#aabbcc =>#abc

文檔流(normalflow)

網頁是一個多層的結構，一層摞著一層；通過 CSS 可以分別為每一層來設置樣式，作為用戶來講只能看到最頂上一層；
這些層中，最底下的一層稱為文檔流；文檔流是網頁的基礎，我們所創建的元素默認都是在文檔流中進行排列

對于我們來元素主要有兩個狀態

• 在文檔流中

• 不在文檔流中(脫離文檔流)

  ---

  • 元素在文檔流中有什么特點
    • 塊元素
      • 塊元素在頁面中獨占一行
      • 默認寬度是父元素的全部(會把父元素撐滿)
      • 默認高度是被內容撐開(子元素)
    • 行內元素
      • 行內元素不會獨占頁面的一行，只占自身的大小
      • 行內元素在頁面中自左向右水平排列(書寫習慣一致)
      • 如果一行之中不能容納下所有的行內元素，則元素會換到第二行繼續自左向右排列
      • 行內元素的默認寬度和高度都是被內容撐開

盒子模型

網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS 盒子模型都具備這些屬性。這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模型。CSS 盒子模型就是在網頁設計中經常用到的 CSS 技術所使用的一種思維模型。[1]

盒模型、盒子模型、框模型(box model)

• CSS 將頁面中的所有元素都設置為了一個矩形的盒子
• 每一個盒子都由一下幾個部分組成：
  • 內容區(content)
  • 內邊距(padding)
  • 邊框(border)
  • 外邊距(margin)

內容區(content)

內容區是盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型
元素中的所有的子元素和文本內容都在內容區中

• width和height 設置排列內容區的大小
• width 設置內容區的寬度
• height 設置內容區的高度.box1 {width: 200px;height: 200px;background-color: #bfa; }

邊框(border)

邊框屬于盒子邊緣，邊框里邊屬于盒子內部，出了邊框都是盒子的外部注意：邊框的大小會影響到整個盒子的大小

• border-width 邊框的寬度：默認 3px
  • border-top-width 上邊框的寬度
  • border-right-width 右邊框的寬度
  • border-bottom-width 下邊框的寬度
  • border-left-width 左邊框的寬度border-width: 10px 20px 30px 40px; /*上右下左，順時針*/ border-width: 10px 20px 30px; /*上，左右，下*/ border-width: 10px 20px; /*上下，左右*/ border-width: 10px; /*上下左右*/
• border-color 邊框的顏色：默認使用 color 的顏色值，color(前景色)默認值就是黑色
  • border-top-color 上邊框的顏色
  • border-right-color 右邊框的顏色
  • border-bottom-color 下邊框的顏色
  • border-left-color 左邊框的顏色
• border-style 邊框的樣式：沒有默認值，必須指定
  • border-top-style 上邊框的樣式
  • border-right-style 右邊框的樣式
  • border-bottom-style 下邊框的樣式
  • border-left-style 左邊框的樣式
  .box1 {border-width: 10px;border-color: red;/* solid 實線 dotted 點狀虛線 dashed 虛線 double 雙線 */border-style: solid; }
• border：簡寫屬性，通過該屬性可以同時設置邊框所有的相關樣式，并且沒有順序要求
  • border-top 上邊框的寬度、顏色和樣式
  • border-right 右邊框的寬度、顏色和樣式
  • border-bottom 下邊框的寬度、顏色和樣式
  • border-left 左邊框的寬度、顏色和樣式
  .box1 {border: 10px red solid; }

內邊距(padding)

內邊距，也叫填充，是內容區和邊框之間的空間

內邊距的設置會影響到盒子的大小，背景顏色會延伸到內邊距上

• padding-top 上內邊距
• padding-right 右內邊距
• padding-bottom 下內邊距
• padding-left 左內邊距<style>.outer {width: 200px;height: 200px;border: 10px orange solid;padding-top: 100px;padding-right: 100px;padding-bottom: 100px;padding-left: 100px;}.inner {width: 200px;height: 200px;background-color: greenyellow;} </style><div class="outer"><div class="inner"></div> </div>盒子可見框的大小，由內容區、內邊距和邊框共同決定，所以在計算盒子大小時，需要將這三個區域加到一起計算

外邊距(margin)

外邊距，也叫空白邊，位于盒子的最外圍，是添加在邊框外周圍的空間。空白邊使盒子之間不會緊湊地連接在一起，是 CSS 布局的一個重要手段

外邊距不會影響盒子可見框的大小，但是外邊距會影響盒子的位置和占用空間

• margin-top 上外邊距
  • 設置正值，元素自身向下移動
  • 設置負值，元素自身向上移動
• margin-right 右外邊距
  • 設置正值，其右邊的元素向右移動
  • 設置負值，其右邊的元素向左移動
  • 上述說法并不準確，對于塊元素，設置margin-right不會產生任何效果
• margin-bottom 下外邊距
  • 設置正值，其下邊的元素向下移動
  • 設置負值，其下邊的元素向上移動
  • 上述說法并不準確，對于塊元素，會有垂直方向上的邊距重疊問題(后面會細說)
• margin-left 左外邊距
  • 設置正值，元素自身向右移動
  • 設置負值，元素自身向左移動

元素在頁面中是按照自左向右的順序排列的，所以默認情況下

• 如果我們設置的左和上外邊距則會移動元素自身
• 而設置下和右外邊距會移動其他元素.box1 {width: 200px;height: 200px;background-color: #bfa;border: 10px orange solid;margin-bottom: 100px; }.box2 {width: 200px;height: 200px;background-color: #bfa;border: 10px red solid;margin-top: 100px; }100px

水平方向布局

元素在其父元素中水平方向的位置由以下幾個屬性共同決定

• margin-left

• border-left

• padding-left

• width

• padding-right

• border-right

• margin-right一個元素在其父元素中，水平布局必須要滿足以下的等式

  margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的寬度

  以上等式必須滿足，如果相加結果使等式不成立，則稱為過渡約束

  則等式會自動調整調整的情況：

  • 如果這七個值中沒有auto的情況，則瀏覽器會自動調整margin-right值以使等式滿足

    100 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ==> 100 + 0 + 0 + 200 + 0 + 0 + 500 = 800

  • 如果這七個值中有auto的情況，則會自動調整auto值以使等式成立

    這七個值中有三個值可以設置為auto ：width、margin-left、maring-right

    • 如果某個值為 auto，則會自動調整auto的那個值以使等式成立

      200 + 0 + 0 + auto + 0 + 0 + 200 = 800 ==> 200 + 0 + 0 + 400 + 0 + 0 + 200 = 800
      auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 ==> 400 + 0 + 0 + 200 + 0 + 0 + 200 = 800
      200 + 0 + 0 + 200 + 0 + 0 + auto = 800 ==> 200 + 0 + 0 + 200 + 0 + 0 + 400 = 800

    • 如果寬度為auto，則寬度會調整到最大，其他auto的外邊距會自動設置為 0

      auto + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 0 + 0 + 0 + 600 + 0 + 0 + 200 = 800
      200 + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 600 + 0 + 0 + 0 = 800
      auto + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800

    • 如果外邊距都為auto，則auto的外邊距會自動均分以使等式成立

      auto + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 300 + 0 + 0 + 200 + 0 + 0 + 300 = 800

  • 示例<style>.box1 {width: 200px;height: 200px;background-color: #bfa;border: 10px orange solid;/* 下列條件等價于 margin: 0 auto */margin-left: auto;margin-right: auto;} </style> <div class="box1"></div>

垂直方向布局

• 元素溢出

  子元素是在父元素的內容區中排列的，如果子元素的大小超過了父元素，則子元素會從父元素中溢出

  使用overflow/overflow-x/overflow-y屬性來設置父元素如何處理溢出的子元素可選值：visible/hidden/scroll/autovisible 溢出內容會在父元素外部位置顯示，默認值hidden 溢出部分將被裁剪掉scroll 生成上下、左右滾動條，通過滾動查看內容auto 根據需要生成滾動條，不會生成多余的滾動條

邊距折疊(外邊距)

垂直外邊距的重疊(折疊)：相鄰的垂直方向外邊距會發生重疊現象

• 兄弟元素

  兄弟元素間的相鄰，垂直外邊距會取兩者之間的較大值(兩者都是正值)

  • 特殊情況：
    • 如果相鄰的外邊距一正一負，則取兩者的和
    • 如果相鄰的外邊距都是負值，則取兩者中絕對值較大的

• 父子元素

  父子元素間相鄰外邊距，子元素會傳遞給父元素(上外邊距)

  .box3{ width：200px;height:200px;background-color: #bfa; }.box4{width: 100px;height: 100px;background-color: orange;margin-top: 100px; }

  父子外邊距的折疊會影響到頁面的布局，必須要進行處理

  • 方式一：對子元素的調整轉為對父元素的調整

    .box3 {width: 200px;height: 200px;background-color: #bfa;padding-top: 100px; /* 不調整子元素的margin，而是轉而調整父元素的padding */ }.box4 {width: 100px;height: 100px;background-color: orange;/* margin-top: 100px; */ }

  • 方式二：仍然保留子元素的margin-top屬性，但是給父元素加一個上邊框

    .box3 {width: 200px;height: 199px; /* height: 200px; */background-color: #bfa;border-top: 1px #bfa solid; }.box4 {width: 100px;height: 100px;background-color: orange;margin-top: 99px; /* margin-top: 100px; */ }

行內元素的盒模型

• 行內元素不支持設置寬度和高度

  .s1 {/* 行內元素設置了寬高也沒用，不會生效 */width: 100px;height: 100px;background-color: yellow; }

• 行內元素可以設置padding，但是垂直方向padding不會影響頁面的布局

  .s1 {/* 下方的div元素并沒有因span設置了padding屬性，而受到位置上的影響 */padding: 100px;background-color: yellow; }.box1 {width: 200px;height: 200px;background-color: #bfa; }

• 行內元素可以設置border，垂直方向的border不會影響頁面的布局

  .s1 {border: 10px orange solid;background-color: yellow; }.box1 {width: 200px;height: 200px;background-color: #bfa; }

• 行內元素可以設置margin，垂直方向的margin不會影響頁面的布局

  .s1 {margin: 100px;background-color: yellow; }.box1 {width: 200px;height: 200px;background-color: #bfa; }

• display用來設置元素顯示的類型

  • inline將元素設置為行內元素

  • block 將元素設置為塊元素

  • inline-block 將元素設置為行內塊元素行內塊，既可以設置寬度和高度又不會獨占一行 類似于img替換元素

  .s1 {margin: 100px;background-color: yellow;/* 將行內元素設置為行內塊元素，兼顧行內元素和塊元素的特點 */display: inline-block; }

  • table將元素設置為一個表格

  • none元素不在頁面中顯示，不同于hidden連位置都不占用

  • visibility用來設置元素的顯示狀態

    • visible默認值，元素在頁面中正常顯示
    • hidden元素在頁面中隱藏不顯示，但是依然占據頁面的位置

瀏覽器的默認樣式

通常情況，瀏覽器都會為元素設置一些默認樣式
默認樣式的存在會影響到頁面的布局，通常情況下編寫網頁時必須要去除瀏覽器的默認樣式(PC 端的頁面)

在當今網頁設計/開發實踐中，使用 CSS 來為語義化的(X)HTML 標記添加樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的一個完美世界：所有的瀏覽器都能夠理解和適用多有 CSS 規則，并且呈現相同的視覺效果(沒有兼容性問題)。但是，我們并沒有生活在這個完美的世界，現實中發生的失竊卻總是恰恰相反，很多 CSS 樣式在不同的瀏覽器中有著不同的解釋和呈現。當今流行的瀏覽器(如:Firefox、Opera、Internet Explorer、Chrome、Safari 等等)中，有一些都是以自己的方式去理解 CSS 規范，這就會導致有的瀏覽器對 CSS 的解釋與設計師的 CSS 定義初衷相沖突，使得網頁的樣子在某些瀏覽器下能正確按照設計師的想法顯示而且有些瀏覽器卻并沒有按照設計師想要的樣子顯示出來，這就導致瀏覽器的兼容性問題。更糟的是，有的瀏覽器完全無視 CSS 的一些聲明和屬性。

• body默認樣式

  存在外邊距8px

• 段落

  有 16px 的默認行距

• 列表

  有 16px 的上下外邊距和 40px 的左內邊距，而且每項列表前有一個小黑點
  去除項目符號：list-style: none;

• 手動通式

  * {margin: 0;padding: 0;list-style: none; }

• 前賢工作

  • reset 樣式

    <link rel="stylesheet" href="xxx/reset.css" />

    • 官方地址：reset.css
    • 直接去除了游覽器的默認樣式

  • normalize 樣式

    <link rel="stylesheet" href="assets/normalize.css">

    • 官方地址：normalize.css
    • 對默認樣式進行統一，這樣在不同的瀏覽器里顯示效果也是統一的

盒子大小

默認情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定box-sizing用來設置盒子尺寸的計算方式(設置 width 和 height 的作用)

.box {width: 200px;height: 200px;background-color: yellow;border: 10px red solid;/* box-sizing: content-box; */box-sizing: border-box; 此時width、height作用在邊框 }

盒子輪廓

• 邊框與輪廓

  • 邊框

    .box {width: 200px;height: 200px;background-color: yellow;border: 10px red solid; }

  • 輪廓

    .box {width: 200px;height: 200px;background-color: yellow;outline: 10px red solid; }
    • 輪廓的使用

      outline屬性不會改變盒子的布局

      .box:hover {outline: 10px red solid; }

• 陰影

box-shadow屬性用于在一個元素的框架周圍添加陰影效果

你可以設置多個由逗號分隔的效果
一個盒狀陰影由相對于元素的 X 和 Y 的偏移量、模糊和擴散半徑以及顏色來描述

• 例子

  .box {width: 200px;height: 200px;background-color: yellow;box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2); 水平偏移量、垂直偏移量、陰影的模糊半徑、陰影的顏色 } 同樣不影響布局

• 圓角

  border-radius屬性使一個元素的外邊框邊緣的角變圓
  你可以設置一個半徑來做圓角，或者設置兩個半徑來做橢圓角

  • border-radius 用來設置圓角，圓角設置的是圓的半徑大小
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-left-radius
    • border-bottom-right-radius
    border-radius: 20px;border-radius 可以分別指定四個角的圓角四個值：左上 右上 右下 左下 順時針，左上為起點三個值：左上 右上/左下 右下兩個值：左上/右下 右上/左下一個值：左上/右上/右下/左下 border-top-right-radius: 50px 100px;

• 圓

  .box {width: 200px;height: 200px;background-color: yellow;border-radius: 50%; }

• 橢圓

  設置width和height屬性不相等即可

  .box {width: 300px;height: 200px;background-color: yellow;border-radius: 50%; }

總結

以上是生活随笔為你收集整理的前端基础之CSS盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。