文檔流（normal flow）

• 網(wǎng)頁是一個多層的結(jié)構(gòu)，一層摞著一層

• 通過CSS可以分別為每一層來設(shè)置樣式

• 作為用戶來講只能看到最頂上一層

• 這些層中瞻佛，最底下的一層稱為文檔流，文檔流是網(wǎng)頁的基礎(chǔ)，我們所創(chuàng)建的元素默認(rèn)都是在文檔流中進行排列

• 對于我們來元素主要有兩個狀態(tài)
  
  在文檔流中
  
  不在文檔流中（脫離文檔流）

• 元素在文檔流中有什么特點：

  • 塊元素

    • 塊元素會在頁面中獨占一行(自上向下垂直排列)
    • 默認(rèn)寬度是父元素的全部（會把父元素?fù)螡M）
    • 默認(rèn)高度是被內(nèi)容撐開（子元素）

  • 行內(nèi)元素

    • 行內(nèi)元素不會獨占頁面的一行伤柄，只占自身的大小
    • 行內(nèi)元素在頁面中左向右水平排列绊困，如果一行之中不能容納下所有的行內(nèi)元素，則元素會換到第二行繼續(xù)自左向右排列（書寫習(xí)慣一致）
    • 行內(nèi)元素的默認(rèn)寬度和高度都是被內(nèi)容撐開

盒模型

盒模型簡介

• 盒模型,又稱盒子模型适刀、框模型（box model）
• CSS將頁面中的所有元素都設(shè)置為了一個矩形的盒子
• 將元素設(shè)置為矩形的盒子后秤朗，對頁面的布局就變成將不同的盒子擺放同的位置
• 每一個盒子都由一下幾個部分組成：
  
  內(nèi)容區(qū)（content）
  
  內(nèi)邊距（padding）
  
  邊框（border）
  
  外邊距（margin）

盒模型-內(nèi)容區(qū)(content)

• 內(nèi)容區(qū)（content），元素中的所有的子元素和文本內(nèi)容都在內(nèi)容區(qū)中排列
• 內(nèi)容區(qū)的大小由width 和 height兩個屬性來設(shè)置
  
  width 設(shè)置內(nèi)容區(qū)的寬度
  
  height 設(shè)置內(nèi)容區(qū)的高度

盒模型-邊框(border)

邊框簡介

• 邊框（border）笔喉，邊框?qū)儆诤凶舆吘壢∈樱吙蚶镞厡儆诤凶觾?nèi)部，出了邊框都是盒子的外部
• 邊框的大小會影響到整個盒子的大小
• 要設(shè)置邊框常挚，需要至少設(shè)置三個樣式：
  
  邊框的寬度 border-width
  
  邊框的顏色 border-color
  
  邊框的樣式 border-style

邊框的寬度 border-width

• 默認(rèn)值作谭，一般都是 3個像素
• border-width可以用來指定四個方向的邊框的寬度
  
  值的情況:
  
  四個值：上 右 下 左
  
  三個值：上 左右 下
  
  兩個值：上下 左右
  
  一個值：上下左右
• 除了border-width還有一組 border-xxx-width,xxx可以是 top right bottom left,用來單獨指定某一個邊的寬度

邊框的顏色 border-color

• border-color用來指定邊框的顏色，同樣可以分別指定四個邊的邊框
• 規(guī)則和border-width一樣
• border-color也可以省略不寫奄毡，如果省略了則自動使用color的顏色值

邊框的樣式 border-style

border-style 指定邊框的樣式

border簡寫屬性

• border簡寫屬性折欠，通過該屬性可以同時設(shè)置邊框所有的相關(guān)樣式，并且沒有順序要求
• 除了border以外還有四個 border-xxx
  • border-top
  • border-right
  • border-bottom
  • border-left

盒模型—內(nèi)邊距(padding)

• 內(nèi)容區(qū)和邊框之間的距離是內(nèi)邊距
• 一共有四個方向的內(nèi)邊距：
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
• 內(nèi)邊距的設(shè)置會影響到盒子的大小
• 背景顏色會延伸到內(nèi)邊距上
• padding 內(nèi)邊距的簡寫屬性吼过，可以同時指定四個方向的內(nèi)邊距锐秦，規(guī)則和border-width 一樣

盒子可見框的大小

盒子的可見框的大小，由內(nèi)容區(qū) 內(nèi)邊距 和 邊框共同決定盗忱，所以在計算盒子大小時酱床，需要將這三個區(qū)域加到一起計算

盒模型-外邊距(margin)

• 外邊距不會影響盒子可見框的大小
• 但是外邊距會影響盒子的位置
• 一共有四個方向的外邊距：
  • margin-top
    • 上外邊距，設(shè)置一個正值趟佃，元素會向下移動
  • margin-right
    • 默認(rèn)情況下設(shè)置margin-right不會產(chǎn)生任何效果
  • margin-bottom
    • 下外邊距扇谣，設(shè)置一個正值，其下邊的元素會向下移動
  • margin-left
    • 左外邊距闲昭，設(shè)置一個正值揍堕，元素會向右移動
• margin也可以設(shè)置負(fù)值，如果是負(fù)值則元素會向相反的方向移動
• 元素在頁面中是按照自左向右的順序排列的汤纸，所以默認(rèn)情況下如果我們設(shè)置的左和上外邊距則會移動元素自身衩茸，而設(shè)置下和右外邊距會移動其他元素
• margin的簡寫屬性： margin 可以同時設(shè)置四個方向的外邊距 ，用法和padding一樣
• margin會影響到盒子實際占用空間

盒子水平方向的布局

• 元素在其父元素中水平方向的位置由以下幾個屬性共同決定“
  • 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 = 其父元素內(nèi)容區(qū)的寬度 （必須滿足）
• 以上等式必須滿足楞慈，如果相加結(jié)果使等式不成立，則稱為過度約束啃擦，則等式會自動調(diào)整
• 調(diào)整的情況：
  • 如果這七個值中沒有為 auto 的情況囊蓝，則瀏覽器會自動調(diào)整margin-right值以使等式滿足
  • 如果某個值為auto，則會自動調(diào)整為auto的那個值以使等式成立
  • 如果將一個寬度和一個外邊距設(shè)置為auto令蛉，則寬度會調(diào)整到最大聚霜，設(shè)置為auto的外邊距會自動為0
  • 如果將三個值都設(shè)置為auto狡恬，則外邊距都是0，寬度最大
  • 如果將兩個外邊距設(shè)置為auto蝎宇，寬度固定值弟劲，則會將外邊距設(shè)置為相同的值，所以我們經(jīng)常利用這個特點來使一個元素在其父元素中水平居中
    
    示例：
    
    width:xxxpx;
    
    margin:0 auto;

盒子垂直方向的布局

• 默認(rèn)情況下父元素的高度被內(nèi)容撐開
• 子元素是在父元素的內(nèi)容區(qū)中排列的姥芥，如果子元素的大小超過了父元素兔乞，則子元素會從父元素中溢出,使用 overflow 屬性來設(shè)置父元素如何處理溢出的子元素
  • 可選值：
    • visible，默認(rèn)值 子元素會從父元素中溢出凉唐，在父元素外部的位置顯示
    • hidden 溢出內(nèi)容將會被裁剪不會顯示
    • scroll 生成兩個滾動條庸追，通過滾動條來查看完整的內(nèi)容
    • auto 根據(jù)需要生成滾動條
• 定義水平方向或者垂直方向的overflow
  • overflow-x:
  • overflow-y:

垂直外邊距的重疊（折疊）

• 相鄰的垂直方向外邊距會發(fā)生重疊現(xiàn)象
• 兄弟元素
  • 兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
  • 特殊情況：
    • 如果相鄰的外邊距一正一負(fù)，則取兩者的和
    • 如果相鄰的外邊距都是負(fù)值台囱，則取兩者中絕對值較大的
  • 兄弟元素之間的外邊距的重疊淡溯，對于開發(fā)是有利的，所以我們不需要進行處理
• 父子元素
  • 父子元素間相鄰?fù)膺吘嗖狙担釉氐臅鬟f給父元素（上外邊距）
  • 父子外邊距的折疊會影響到頁面的布局咱娶，必須要進行處理

行內(nèi)元素的盒模型

行內(nèi)元素的盒模型

• 行內(nèi)元素不支持設(shè)置寬度和高度
• 行內(nèi)元素可以設(shè)置padding，但是垂直方向padding不會影響頁面的布局
• 行內(nèi)元素可以設(shè)置border煎楣，垂直方向的border不會影響頁面的布局
• 行內(nèi)元素可以設(shè)置margin，垂直方向的margin不會影響布局

display

• display 用來設(shè)置元素顯示的類型
• 可選值：
  • inline 將元素設(shè)置為行內(nèi)元素
  • block 將元素設(shè)置為塊元素
  • inline-block 將元素設(shè)置為行內(nèi)塊元素
    （行內(nèi)塊元素车伞，既可以設(shè)置寬度和高度又不會獨占一行）
  • table 將元素設(shè)置為一個表格
  • none 元素不在頁面中顯示

visibility

• visibility 用來設(shè)置元素的顯示狀態(tài)
• 可選值：
  • visible 默認(rèn)值择懂，元素在頁面中正常顯示
  • hidden 元素在頁面中隱藏 不顯示，但是依然占據(jù)頁面的位置

默認(rèn)樣式

默認(rèn)樣式

• 通常情況另玖，瀏覽器都會為元素設(shè)置一些默認(rèn)樣式
• 默認(rèn)樣式的存在會影響到頁面的布局困曙，通常情況下編寫網(wǎng)頁時必須要去除瀏覽器的默認(rèn)樣式（PC端的頁面）

重置樣式表

• 作用：專門用來對瀏覽器的樣式進行重置的
  • reset.css 直接去除了瀏覽器的默認(rèn)樣式
  • normalize.css 對默認(rèn)樣式進行了統(tǒng)一

盒子的尺寸

可見框的尺寸

默認(rèn)情況下，盒子可見框的大小由內(nèi)容區(qū)谦去、內(nèi)邊距和邊框共同決定

盒子的尺寸

• box-sizing 用來設(shè)置盒子尺寸的計算方式（設(shè)置width和height的作用）
• 可選值：
  • content-box 默認(rèn)值慷丽，寬度和高度用來設(shè)置內(nèi)容區(qū)的大小
  • border-box 寬度和高度用來設(shè)置整個盒子可見框的大小
• width 和 height 指的是內(nèi)容區(qū) 和 內(nèi)邊距 和 邊框的總大小

輪廓和圓角

輪廓

box-shadow 用來設(shè)置元素的陰影效果，陰影不會影響頁面布局

• 第一個值 水平偏移量 設(shè)置陰影的水平位置 正值向右移動 負(fù)值向左移動
• 第二個值 垂直偏移量 設(shè)置陰影的水平位置 正值向下移動 負(fù)值向上移動
• 第三個值 陰影的模糊半徑
• 第四個值 陰影的顏色

  box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ; 

圓角

• border-radius: 用來設(shè)置圓角 圓角設(shè)置的圓的半徑大小
• 設(shè)置左上角的圓角border-top-left-radius
• 設(shè)置右上角的圓角border-top-right-radius
• 設(shè)置左下角的圓角border-bottom-left-radius
• 設(shè)置右下角的圓角border-bottom-right-radius:
• border-radius 可以分別指定四個角的圓角
  • 四個值 左上 右上 右下 左下
  • 三個值 左上 右上/左下 右下
  • 兩個個值 左上/右下 右上/左下