一、CSS簡介

網(wǎng)頁實際上是一個多層的結(jié)構(gòu)，通過CSS（層疊樣式表）可以分別為網(wǎng)頁的每一個層來設(shè)置樣式，而最終我們能看到只是網(wǎng)頁的最上邊一層，總之一句話，CSS用來設(shè)置網(wǎng)頁中元素的樣式，使用CSS來修改元素樣式的方式大致可以分為3種：

① 內(nèi)聯(lián)樣式（行內(nèi)樣式）

在標簽內(nèi)部通過style屬性來設(shè)置元素的樣式

<p style="color:red;font-size:60px;">內(nèi)聯(lián)樣式（行內(nèi)樣式）</p>

問題：使用內(nèi)聯(lián)樣式，樣式只能對一個標簽生效。如果希望影響到多個元素，必須在每一個元素中都復制一遍；并且當樣式發(fā)生變化時，我們必須要一個一個的修改，非常的不方便。（注意：開發(fā)時盡量不要使用內(nèi)聯(lián)樣式）
② 內(nèi)部樣式表

將樣式編寫到head中的style標簽里然后通過css的選擇器來選中元素并為其設(shè)置各種樣式可以同時為多個標簽設(shè)置樣式，并且修改時只需要修改一處即可。內(nèi)部樣式表更加方便對樣式進行復用

<style>
p{
    color:green; 
    font-size:50px;
}
</style>

問題：我們的內(nèi)部樣式表只能對一個網(wǎng)頁起作用，它里邊的樣式不能跨頁面進行復用

③ 外部樣式表

可以將css樣式編寫到一個外部的CSS文件中，然后通過link標簽來引入外部的CSS文件

<link rel="stylesheet" href="./style.css">

外部樣式表需要通過link標簽進行引入，意味著只要想使用這些樣式的網(wǎng)頁都可以對其進行引用使樣式，可以在不同頁面之間進行復用

將樣式編寫到外部的CSS文件中，可以使用到瀏覽器的緩存機制，從而加快網(wǎng)頁的加載速度，提高用戶的體驗

CSS 基本語法

語法：選擇器 聲明塊

選擇器：通過選擇器可以選中頁面中的指定元素

比如p的作用就是選中頁面中所有的p元素聲明塊
聲明塊：通過聲明塊來指定要為元素設(shè)置的樣式

聲明塊由一個一個的聲明組成，聲明是一個名值對結(jié)構(gòu)
一個樣式名對應(yīng)一個樣式值，名和值之間以:連接，以;結(jié)尾

h1{
    color: green;
}

二、CSS 選擇器

2.1 通配選擇器（Universal selector）

• 作用：選中頁面中的所有元素
• 語法：*
• 例子：*{}

*{
    color: red;
}

2.2 元素選擇器（Type selector）

也叫類型選擇器、標簽選擇器

• 作用：根據(jù)標簽名來選中指定的元素
• 語法：elementname{}
• 例子：p{}、h1{}、div{}

p{
    color: red; 
}

h1{
    color: green;
}

2.3 類選擇器（Class selector）

作用：根據(jù)元素的class屬性值選中一組元素
語法：.classname
例子：.blue{}

.blue{
    color: blue;
}
.size{
    font-size: 20px;
}

class是一個標簽的屬性，它和id類似，不同的是class
可以重復使用
可以通過class屬性來為元素分組
可以同時為一個元素指定多個class屬性

<p class="blue size"> 類選擇器（Class selector）</p>

2.4 ID選擇器（ID selector）

作用：根據(jù)元素的id屬性值選中一個元素
語法：#idname{}
例子：#box{}、#red{}

#red{
    color: red;
}

2.5 屬性選擇器（Attribute selector）
作用：根據(jù)元素的屬性值選中一組元素
語法1：[屬性名] 選擇含有指定屬性的元素
語法2：[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
語法3：[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
語法4：[屬性名$=屬性值] 選擇屬性值以指定值結(jié)尾的元素
語法5：[屬性名*=屬性值] 選擇屬性值中含有某值的元素

例子：p[title]{}、p[title=e]{}、p[title^=e]{}、p[title$=e]{}、p[title*=e]{}

p[title]{
    color: red;
}
p[title=e]{
    color: black;
}
p[title^=e]{
    color: yellow;
}
p[title$=e]{
    color: orange;
}
p[title*=e]{
    color: orange;
}

2.6 復合選擇器

• ① 交集選擇器

作用：選中同時復合多個條件的元素
語法：選擇器1選擇器2選擇器3選擇器n{}
注意點：交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭

div.red{
    font-size: 30px;
}

.a.b.c{
    color: blue;
}

• ② 并集選擇器（選擇器分組）

作用：同時選擇多個選擇器對應(yīng)的元素
語法：選擇器1,選擇器2,選擇器3,選擇器n{}
例子：#b1,.p1,h1,span,div.red{}

h1,span{
    color: green;
}

2.7 關(guān)系選擇器

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或間接包含后代元素的元素叫做祖先元素；一個元素的父元素也是它的祖先元素
后代元素：直接或間接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
兄弟元素：擁有相同父元素的元素是兄弟元素

• ① 子元素選擇器（Child combinator）

作用：選中指定父元素的指定子元素
語法：父元素 > 子元素

例子：A > B
div.box > p > span{
    color: orange;
}

• ② 后代元素選擇器（Descendant combinator）

作用：選中指定元素內(nèi)的指定后代元素
語法：祖先 后代

例子：A B
div span{
    color: skyblue;
}

2.8 偽類選擇器

偽類（不存在的類，特殊的類），偽類用來描述一個元素的特殊狀態(tài)，比如：第一個子元素、被點擊的元素、鼠標移入的元素.…

偽類一般情況下都是使用:開頭

• :first-child：第一個子元素
• :last-child：最后一個子元素
• :nth-child()：選中第n個子元素
  • n：第n個，n的范圍0到正無窮
  • 2n或even：選中偶數(shù)位的元素
  • 2n+1或odd：選中奇數(shù)位的元素

以上這些偽類都是根據(jù)所有的子元素進行排序的

• :first-of-type：同類型中的第一個子元素
• :last-of-type：同類型中的最后一個子元素
• :nth-of-type()：選中同類型中的第n個子元素

這幾個偽類的功能和上述的類似，不同點是他們是在同類型元素中進行排序的

• :not()否定偽類，將符合條件的元素從選擇器中去除

/* ul下所有l(wèi)i，黑色 */
ul>li {
    color: black;
}

/* ul下第偶數(shù)個li，黃色 */
ul>li:nth-child(2n) {
    color: yellow;
}

/* ul下第奇數(shù)個li，綠色 */
ul>li:nth-child(odd) {
    color: green;
}

/* ul下第一個li，紅色 */
ul>li:first-child {
    color: red;
}

/* ul下最后一個li，黃色 */
ul>li:last-child {
    color: orange;
}

• :link：未訪問的鏈接
• :visited：已訪問的鏈接
  由于隱私的原因，所以visited這個偽類只能修改鏈接的顏色
• :hover：鼠標懸停的鏈接
• :active：鼠標點擊的鏈接

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: blue;
}

2.9 偽元素選擇器
偽元素，表示頁面中一些特殊的并不真實的存在的元素（特殊的位置）

偽元素使用::開頭

• ::first-letter：表示第一個字母
• ::first-line：表示第一行
• ::selection：表示選中的內(nèi)容
• ::before：元素的開始
• ::after：元素的最后
• ::before和::after必須結(jié)合content屬性來使用

/* 段落首字母設(shè)置大小為30px */
p::first-letter{
    font-size: 30px;
}

/* 段落第一行設(shè)置為黃色背景 */
p::first-line{
    background-color: yellow;
}

/* 段落選中的部分變綠色 */
p::selection{
    background-color: green；
}

/* div前加上內(nèi)容 */
div::before{
    content: 'BEFORE';
    color: red;
}

/* div后加上內(nèi)容 */
div::after{
    content: 'AFTER';
    color: blue;
}

實例
html代碼：

<div class="box1">
    <img src="./123.jpg">
</div>

css代碼

.box1 {
    width: 400px;
    height: 200px;
    position: relative;
}
.box1 img{
    width: 100%;
    height: 100%;
}
.box1::before {
    content:"";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgb(0, 0, 0,0.3)
}
/* 當我們鼠標經(jīng)過了這個盒子 就讓里面的遮罩層顯示出來 */
.box1:hover::before{
    /* 經(jīng)過就讓::before 顯示出來 */
    display:block;
}

三、樣式繼承與其他概念

3.1 繼承

• 樣式的繼承，我們?yōu)橐粋€元素設(shè)置的樣式，同時也會應(yīng)用到它的后代元素上

• 繼承是發(fā)生在祖先后后代之間的，繼承的設(shè)計是為了方便我們的開發(fā)

• 利用繼承，我們可以將一些通用的樣式，統(tǒng)一設(shè)置到共同的祖先元素上。這樣只需設(shè)置一次即可讓所有的元素都具有該樣式

注意，并不是所有的樣式都會被繼承： 比如背景相關(guān)的，布局相關(guān)等的這些樣式都不會被繼承。

3.2 選擇器的權(quán)重

當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設(shè)置不同的值時，此時就發(fā)生了樣式的沖突。

發(fā)生樣式?jīng)_突時，應(yīng)用哪個樣式由選擇器的權(quán)重（優(yōu)先級）決定選擇器的權(quán)重

內(nèi)聯(lián)樣式 > ID選擇器 > 類和偽類選擇器 >元素選擇器>通配選擇器>繼承的樣式
比較優(yōu)先級時，需要將所有的選擇器的優(yōu)先級進行相加計算，最后優(yōu)先級越高，則越優(yōu)先顯示（分組選擇器是單獨計算的）

可以在某一個樣式的后邊添加!important，則此時該樣式會獲取到最高的優(yōu)先級，甚至超過內(nèi)聯(lián)樣式，注意：在開發(fā)中一定要慎用！

<style>
    #box1{
        background-color: orange;
    }
    div{
        background-color: yellow;
    }
    .red{
        background-color: red;
    }
</style>

<div id="box1" class="red" style="background-color: skyblue;">選擇器的權(quán)重</div>

3.3 長度單位

• 像素

我們先來看下某度上關(guān)于像素（pixel，縮寫px）的介紹

像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數(shù)值，小方格顏色和位置就決定該圖像所呈現(xiàn)出來的樣子。
可以將像素視為整個圖像中不可分割的單位或者是元素。不可分割的意思是它不能夠再切割成更小單位抑或是元素，它是以一個單一顏色的小格存在 [1] 。每一個點陣圖像包含了一定量的像素，這些像素決定圖像在屏幕上所呈現(xiàn)的大小

也就是說，顯示器屏幕實際上是由一個一個的小點（單位色塊，即像素）構(gòu)成的

• 屏幕分辨率

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

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

• 圖像分辨率

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

圖片分辨率越高，1:1縮放時面積越大
圖片分辨率越低，1:1縮放時面積越小
同一臺設(shè)備像素大小是不變的，那把圖片放大超過100%時占的像素點就多了，但是圖像也會變得模糊

• 百分比

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

em

em是相對于元素的字體大小來計算的，1em = <self>.font-size * 10，也就說em值會根據(jù)元素本身的字體大小的改變而改變

rem

rem是相對于根元素的字體大小來計算，1rem = <root>.font-size * 10，也就說rem值會根據(jù)根元素的字體大小的改變而改變

<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>

3.4 瀏覽器的默認樣式

通常情況，瀏覽器都會為元素設(shè)置一些默認樣式。

默認樣式的存在會影響到頁面的布局，通常情況下編寫網(wǎng)頁時必須要去除瀏覽器的默認樣式（PC端的頁面）。我們可以嘗試編寫css樣式，以去除瀏覽器的默認樣式，如：

body {
    margin: 0;
}

完美解決方案：引入外部樣式reset.css和normalize.css

四、盒模型

4.1 盒子模型

網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模型都具備這些屬性。

這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模型。

CSS盒子模型就是在網(wǎng)頁設(shè)計中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。

image.png

• margin(外邊距)：清除邊框外的區(qū)域，外邊距是透明的
• border(邊框)：圍繞在內(nèi)邊距和內(nèi)容外的邊框
• padding(內(nèi)邊距)：清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的
• content(內(nèi)容) ：盒子的內(nèi)容，顯示文本、圖像、圖標等
  ① 內(nèi)容區(qū)（content）

內(nèi)容區(qū)是盒子模型的中心，它呈現(xiàn)了盒子的主要信息內(nèi)容，這些內(nèi)容可以是文本、圖片等多種類型

元素中的所有的子元素和文本內(nèi)容都在內(nèi)容區(qū)中， width和height設(shè)置排列內(nèi)容區(qū)的大小

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}

② 邊框（border

邊框?qū)儆诤凶舆吘墸吙蚶镞厡儆诤凶觾?nèi)部，出了邊框都是盒子的外部。注意：邊框的大小會影響到整個盒子的大小。

• border-width 邊框的寬度：默認3px
  • border-top-width 上邊框的寬度
  • border-right-width 右邊框的寬度
  • border-bottom-width 下邊框的寬度
  • border-left-width 左邊框的寬度

• border-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-width、border-color、border-style還是其衍生出來的屬性寫法，都可以指定每個方向的邊框情況。設(shè)定幾個值就決定了對應(yīng)方向的寬度、顏色或樣式

四個值：上 右 下 左
三個值：上 左右 下
兩個值：上下 左右
一個值：上下左右
其實不管設(shè)置幾個值，只要記?。浩漤樞蚴前错槙r針方向設(shè)置的，剩下的可以由矩形的對稱性推導出來。

• border：簡寫屬性，通過該屬性可以同時設(shè)置邊框所有的相關(guān)樣式，并且沒有順序要求

  • border-top 上邊框的寬度、顏色和樣式
  • border-right 右邊框的寬度、顏色和樣式
  • border-bottom 下邊框的寬度、顏色和樣式
  • border-left 左邊框的寬度、顏色和樣式

.box1{ 
    border: 10px red solid;
}

③ 內(nèi)邊距(padding)

內(nèi)邊距，也叫填充，是內(nèi)容區(qū)和邊框之間的空間

• padding-top 上內(nèi)邊距
• padding-right 右內(nèi)邊距
• padding-bottom下內(nèi)邊距
• padding-left 左內(nèi)邊距

padding內(nèi)邊距的簡寫屬性，可以同時指定四個方向的內(nèi)邊距，規(guī)則和邊框中屬性值設(shè)置一樣

<style>
    .outer{
        width: 200px;
        height: 200px;
        border: 10px orange solid;
        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>

image.png

可以看出，當內(nèi)外div寬度和高度一樣時，由于outer設(shè)置了一個padding屬性，其盒子大小被“撐大了”。

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

④ 外邊距（margin)

外邊距，位于盒子的最外圍，是添加在邊框外周圍的空間?？瞻走吺购凶又g不會緊湊地連接在一起，是CSS布局的一個重要手段

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

一共有四個方向的外邊距：

• margin-top 上外邊距
  設(shè)置正值，元素自身向下移動
  設(shè)置負值，元素自身向上移動
• margin-right 右外邊距
  設(shè)置正值，其右邊的元素向右移動
  設(shè)置負值，其右邊的元素向左移動

注意！??！，對于塊元素，設(shè)置margin-right不會產(chǎn)生任何效果

• margin-bottom 下外邊距
  設(shè)置正值，其下邊的元素向下移動
  設(shè)置負值，其下邊的元素向上移動

注意?。?！對于塊元素，會有垂直方向上的邊距重疊問題（后面會細說）

• margin-left 左外邊距
  設(shè)置正值，元素自身向右移動
  設(shè)置負值，元素自身向左移動
  元素在頁面中是按照自左向右的順序排列的，所以默認情況下，如果我們設(shè)置的左和上外邊距則會移動元素自身， 而設(shè)置下和右外邊距會移動其他元素。

5. 盒子大小

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

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

可選值：

content-box：默認值，寬度和高度用來設(shè)置內(nèi)容區(qū)的大小

image.png

border-box： 寬度和高度用來設(shè)置整個盒子可見框的大小

image.png

6.輪廓
outline用來設(shè)置元素的輪廓線，用法和border一模一樣。輪廓和邊框不同點是，輪廓不會影響盒子的布局。

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

/* 實際使用場景*/
.box:hover {
    outline: 10px red solid;
}

7.陰影

box-shadow屬性用于在一個元素的框架周圍添加陰影效果，你可以設(shè)置多個由逗號分隔的效果。一個盒狀陰影由相對于元素的X和Y的偏移量、模糊和擴散半徑以及顏色來描述

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

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    box-shadow: 10px 10px orange;
}

image.png

border-radius用來設(shè)置圓角，圓角設(shè)置的是圓的半徑大小。

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

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

}

image.png

4.2 邊距折疊

垂直外邊距的重疊（折疊）：相鄰的垂直方向外邊距會發(fā)生重疊現(xiàn)象

① 兄弟元素

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

特殊情況：

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

.box1,.box2{ 
    width:200px; 
    height:200px; 
    font-size:100px;
}

.boxl{
    background-color: #bfa;
    margin-bottom: 100px;
}

.box2{
    background-color: orange;
    margin-top: 100px;
}

image.png

② 父子元素

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

達到下面效果

image.png

代碼：

<style>

   .box1 {
       width: 200px;
       height: 100px;
       background-color: aqua;
   }

   .box2 {
       width: 100px;
       height: 100px;
       background-color: orange;
       margin-top: 100px;
   }
</style>

<div class="box1">
    <div class="box2"></div>
</div>

實際效果如下：父子外邊距的折疊會影響到頁面的布局

image.png

解決方式1:

.box1 {
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-top: 1px solid aqua;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 100px;
}

使用了border屬性，就讓子元素的外邊距不去傳遞給父元素了，這是為什么呢？

如果父盒子沒有設(shè)置border，那么他的子元素無法利用margin-top來遠離父元素的上邊框；如果使用了margin-top會使子元素和父元素一起往下移

父不設(shè)置border邊框則離得是流不是父盒子，使用了border讓元素脫離了文檔流（margin塌陷）

文檔流
網(wǎng)頁是一個多層的結(jié)構(gòu)，一層摁著一層。通過CSS可以分別為每一層來設(shè)置樣式，作為用戶來講只能看到最頂上一層。

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

對于我們來元素主要有兩個狀態(tài)

• 在文檔流中
• 不在文檔流中（脫離文檔流）

解決方式2:

.box1 {
    width: 200px;
    height: 100px;
    background-color: aqua;
    padding-top:100px;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
}

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

塊元素

• 塊元素會在頁面中獨占一行
• 默認寬度是父元素的全部（會把父元素撐滿）
• 默認高度是被內(nèi)容撐開（子元素）

行內(nèi)元素

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

行內(nèi)元素盒模說明

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

使用display屬性

• inline：將元素設(shè)置為行內(nèi)元素
• block：將元素設(shè)置為塊元素
• inline-block：將元素設(shè)置為行內(nèi)塊元素行內(nèi)塊，既可以設(shè)置寬度和高度又不會獨占一行
• none：元素不在頁面中顯示

5. 布局

5.1 浮動介紹

通過浮動可以使一個元素向其父元素的左側(cè)或右側(cè)移動。

使用float屬性來設(shè)置于元素的浮動

• none：默認值，元素不浮動
• left：元素向左浮動
• right：元素向右浮動

注意
元素設(shè)置浮動以后，水平布局的等式便不需要強制成立
元素設(shè)置浮動以后，會完全從文檔流中脫離，不再占用文檔流的位置，所以元素下邊的還在文檔流中的元素會自動向上移動

浮動的特點

1. 浮動元素會完全脫離文檔流，不再占據(jù)文檔流中的位置
2. 設(shè)置浮動以后，元素會向父元素的左側(cè)或右側(cè)移動
3. 浮動元素默認不會從父元素中移出

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: gold;
        float: left;
    }
    .box2 {
        width: 300px;
        height: 300px;
        background-color: green;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

image.png

4. 浮動元素向左或向右移動時，不會超過前邊的浮動元素（先來后到的順序）

<style>
    .box1, .box2, .box3 {
        width: 200px;
        height: 200px;
        float: left;
    }

    .box1 {
        background-color: gold;
    }

    .box2 {
        background-color: green;
    }

    .box3 {
        background-color: red;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

image.png

5. 浮動元素不會超過上邊的浮動的兄弟元素，最多就是和它一樣高

   
   
   dbb89038c1b24896991fae6908fccc78.gif

6. 如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移

7. 浮動元素不會蓋住文字，文字會自動環(huán)繞在浮動元素的周圍，所以我們可以利用浮動來設(shè)置文字環(huán)繞圖片的效果

   
   
   image.png

1. 浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，通過浮動可以制作一些水平方向的布局
2. 元素設(shè)置浮動以后，將會從文檔流中脫離，從文檔流中脫離后，元素的一些特點也會發(fā)生變化

高度塌陷
在浮動布局中，父元素的高度默認是被子元素撐開的

當子元素浮動后，其會完全脫離文檔流，子元素從文檔流中脫離將會無法撐起父元素的高度，導致父元素的高度丟失

父元素高度丟失以后，其下的元素會自動上移，導致頁面的布局混亂

cfbb9f9100474d0a9e09179e2b290999.gif

所以高度塌陷是浮動布局中比較常見的一個問題，這個問題我們怎么進行處理

終極解決辦法

.fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    } 
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
  .clearfix:after{/*偽元素是行內(nèi)元素 正常瀏覽器清除浮動方法*/
        content: ""; /* 在父元素體內(nèi)的最后生成一個新的空白子元素 */
        display: block; /* 只有塊級元素才能使用clear屬性 */
        height: 0;
        clear:both; /* 清除前面所有朝兩個方向浮動帶來的影響 */
        visibility: hidden;
    } 

    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>  
    <div class="footer"></div>

5.3 彈性布局- Flex

Flex布局是什么?

Flex是Flexible Box的縮寫，意為”彈性布局”，是一種用于按行或按列布局元素的一維布局方法，可以為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

flex布局默認有兩條軸，水平的主軸和垂直的交叉軸 :

image.png

Flex布局

主軸 (main size) 是彈性容器的主要軸線，彈性項目(items)是沿著這個軸線布置的。請注意，它不一定是水平的；它取決于flex-direction屬性（見下文）。在開始學習之前，我們先確定一下頁面（容器）布局：

最外邊的容器我們稱為container：

image.png

container里面的每個小盒子，我們稱為items：

image.png

1Flex布局有哪些屬性?

假如現(xiàn)在有一個這樣的初始結(jié)構(gòu):
HTML:

<div class="container">
  <div class="items1">1</div>
  <div class="items2">2</div>
  <div class="items3">3</div>
</div>

css：

.container {
  height: 400px;
  width: 600px;
  background-color: #e1e1e1;
}

image.png

1. display: flex;
想要使用flex布局，我們必須先給外邊的container容器加上一個display:flex;屬性, 那么容器里面的元素才遵循flex布局:

.container{
   display:flex;
}

2. flex
再給container容器里面的items1 items2 items3一個統(tǒng)一的顏色、邊框并添加flex 屬性:

.container div {
  background-color: #ffb84d;
  border: 2px solid #666;
}
.items1 {
  flex: 1;
}
.items2 {
  flex: 1;
}
.items3 {
  flex: 1;
}

image.png

如果我們把items1的flex的值改為2：

image.png

image.png

image.png

• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。
  4. flex-wrap
  flex-wrap屬性作用在container上，決定了當一排items排不下的時候，應(yīng)該怎么排布。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

image.png

flex-wrap屬性的默認值是nowrap，即不換行(按照寬度比例排列在一行)，當然我們也可以通過改變它的值來進行換行

如果container的屬性為：flex-wrap: wrap;

image.png

若改為flex-wrap: wrap-reverse;

image.png

5. justify-content
作用于container上，這個屬性定義了項目在主軸上的對齊方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

image.png

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center：居中
• space-between：兩端對齊，items之間的間隔都相等。
• space-around：每個items兩側(cè)的間隔相等。所以，items之間的間隔比items與邊框的間隔大一倍。
• justify-content: space-evenly：每個items之間的間隔相等。

6. align-items
定義在container上，決定了items在交叉軸上的對齊方式。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

image.png

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 以items里第一行文字的基線對齊。
• stretch（默認值）：如果items未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

align-self
align-self屬性定義在items上，它允許單個items有與其他items有不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

image.png