CSS學習筆記

時間 2021-01-10

標籤 css html web 瀏覽器緩存服務器佈局字體編碼 url 欄目 CSS 简体版

原文原文鏈接

三種嵌套格式：

一、內聯樣式行內樣式：

- 在標籤內部經過style屬性來設置元素的樣式css

- 問題：html

使用內聯樣式，樣式只能對一個標籤生效，web

若是但願影響到多個元素必須在每個元素中都複製一遍瀏覽器

而且當樣式發生變化時，咱們必需要一個一個的修改，很是的不方便緩存

<p style="color:red; font-size: 60px;">鄉音無改鬢毛衰</p>
<p style="color: red; font-size: 60px;">今每天氣真不錯！</p>

二、內部樣式表：

- 將樣式編寫到 head 中的 style 標籤裏服務器

而後經過 CSS 的選擇器來選中元素併爲其設置各類樣式佈局

能夠同時爲多個標籤設置樣式，而且修改時只須要修改一處便可所有應用字體

- 內部樣式表更加方便對樣式進行復用編碼

- 問題：url

咱們的內部樣式表只能對一個網頁起做用，

它裏邊的樣式不能跨頁面進行復用

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

三、外部樣式表：最佳實踐

- 能夠將 CSS 樣式編寫到一個外部的 CSS 文件中,

而後經過 link 標籤來引入外部的 CSS 文件

- 外部樣式表須要經過 link 標籤進行引入，

意味着只要想使用這些樣式的網頁均可以對其進行引用

使樣式能夠在不一樣頁面之間進行復用

- 將樣式編寫到外部的 CSS 文件中，可使用到瀏覽器的緩存機制，

從而加快網頁的加載速度，提升用戶的體驗。

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

網頁分紅三個部分：

結構(HTML)

表現(CSS)

行爲(JavaScript)

CSS

- 層疊樣式表

- 網頁其實是一個多層的結構，經過CSS能夠分別爲網頁的每個層來設置樣式

而最終咱們能看到只是網頁的最上邊一層

- 總之一句話，CSS用來設置網頁中元素的樣式

CSS的基本語法:

選擇器聲明塊

選擇器: 經過選擇器能夠選中頁面中的指定元素

好比 p 的做用就是選中頁面中全部的p元素

聲明塊: 經過聲明塊來指定要爲元素設置的樣式

聲明塊由一個一個的聲明組成

聲明是一個名值對結構

一個樣式名對應一個樣式值，名和值之間以:鏈接，以;結尾

★★選擇器★★

元素選擇器：

做用：根據標籤名來選中指定的元素

語法：標籤名{}

例子：p{} h1{} div{}

p{
     color: red;
        }
h1{
     color: green;
        }

id選擇器：

做用：根據元素的id屬性值選中一個元素

語法：#id屬性值{}

例子：#box{} #red{}

#red{
     color: red;
        }

類選擇器：

做用：根據元素的class屬性值選中一組元素

語法：.class屬性值

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

通配選擇器：

做用：選中頁面中的全部元素

語法: *

*{
    color: red;
  }

複合選擇器：

交集選擇器

做用：選中同時複合多個條件的元素

語法：選擇器1 選擇器2 選擇器3 選擇器n{}

注意點：2

交集選擇器中若是有元素選擇器，必須使用元素選擇器開頭

/* 將class爲red的元素設置爲紅色（字體） */

        .red{
            color: red;
        }

/* 將class爲red的div字體大小設置爲30px */ div.red{ font-size: 30px; } .a.b.c{ color: blue }

並集選擇器

做用：同時選擇多個選擇器對應的元素

語法：選擇器1,選擇器2,選擇器3,選擇器n{}

#b1,.p1,h1,span,div.red{}

h1, span{
         color: green
        }

關係選擇器

父元素

- 直接包含子元素的元素叫作父元素

子元素

- 直接被父元素包含的元素是子元素

祖先元素

- 直接或間接包含後代元素的元素叫作祖先元素

- 一個元素的父元素也是它的祖先元素

後代元素

- 直接或間接被祖先元素包含的元素叫作後代元素

- 子元素也是後代元素

兄弟元素

- 擁有相同父元素的元素是兄弟元素

子元素選擇器

做用：選中指定父元素的指定子元素

語法：父元素 > 子元素

div.box > span{
            color: orange;
        }

後代元素選擇器

做用：選中指定元素內的指定後代元素

語法：祖先後代

div span{
        color: skyblue
         }

或

div > p > span{
             color: red;
         }

兄弟選擇器

選擇下一個兄弟

語法：前一個 + 下一個

選擇下邊全部的兄弟

語法：兄 ~ 弟

p + span{
         color: red;
          }


p ~ span{
         color: red;
          }

屬性選擇器

[屬性名] 選擇含有指定屬性的元素

[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素

[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素

[屬性名$=屬性值] 選擇屬性值以指定值結尾的元素

[屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素

 p[title]{ */
 p[title=abc]{ */
 p[title^=abc]{ */
 p[title$=abc]{ */
 
 p[title* = e]{
            color: orange;
        }

★★僞類選擇器★★

僞類（不存在的類，特殊的類）

- 僞類用來描述一個元素的特殊狀態

好比：第一個子元素、被點擊的元素、鼠標移入的元素...

- 僞類通常狀況下都是使用:開頭

:first-child 第一個子元素

:last-child 最後一個子元素

:nth-child() 選中第n個子元素

特殊值：

n 第n個 n的範圍0到正無窮

2n 或 even 表示選中偶數位的元素

2n+1 或 odd 表示選中奇數位的元素

- 以上這些僞類都是根據全部的子元素進行排序

難點：

:first-of-type

:last-of-type

:nth-of-type()

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

每種類型第一次出現的類型

- :not() 否認僞類

- 將符合條件的元素從選擇器中去除

a元素的僞類

:link 用來表示沒訪問過的連接（正常的連接）

:visited 用來表示訪問過的連接

因爲隱私的緣由，因此visited這個僞類只能修改連接的顏色

:hover 用來表示鼠標移入的狀態

:active 用來表示鼠標點擊

a:link{
            color: red;   
        }
a:visited{
            color: orange;         
        }
a:hover{
            color: aqua;
       }
a:active{
             color: yellowgreen;            
       }

僞元素選擇器

僞元素，表示頁面中一些特殊的並不真實的存在的元素（特殊的位置）

僞元素使用 :: 開頭

::first-letter 表示第一個字母

::first-line 表示第一行

::selection 表示選中的內容

::before 元素的開始

::after 元素的最後

- before 和 after 必須結合content屬性來使用

p::first-letter{
            font-size: 50px;
        }
p::first-line{
            background-color: yellow; 
        }
p::selection{
            background-color: greenyellow;
        }       
div::before{
            content: '『';
         }
div::after{
            content: '』';
        }

繼承

樣式的繼承，咱們爲一個元素設置的樣式同時也會應用到它的後代元素上

繼承是發生在祖前後後代之間的

繼承的設計是爲了方便咱們的開發，

利用繼承咱們能夠將一些通用的樣式統一設置到共同的祖先元素上，

這樣只需設置一次便可讓全部的元素都具備該樣式

注意：並非全部的樣式都會被繼承：（能不能繼承查手冊）

好比背景相關的，佈局相關等的這些樣式都不會被繼承。

選擇器的權重

樣式的衝突

- 當咱們經過不一樣的選擇器，選中相同的元素，而且爲相同的樣式設置不一樣的值時，此時就發生了樣式的衝突。

發生樣式衝突時，應用哪一個樣式由選擇器的權重（優先級）決定

選擇器的權重

內聯樣式 1,0,0,0

id選擇器 0,1,0,0

類和僞類選擇器 0,0,1,0

元素選擇器 0,0,0,1

通配選擇器 0,0,0,0

繼承的樣式沒有優先級

比較優先級時：

須要將全部的選擇器的優先級進行相加計算，最後優先級越高，則越優先顯示（分組選擇器是單獨計算的）累加不跨位

選擇器的累加不會超過其最大的數量級，類選擇器在高也不會超過id選擇器

若是優先級計算後相同，此時則優先使用靠下的樣式

能夠在某一個樣式的後邊添加 !important ，則此時該樣式會獲取到最高的優先級，甚至超過內聯樣式，

注意：在開發中這個玩意必定要慎用！

a標籤的選擇器順序

涉及到的a標籤僞類經常使用的有四個：

:link

:visited

:hover

:active

這四個選擇器的優先級是同樣的。

a:link {color: #FF0000;} 連接被訪問以前選中

a:visited {color: #000000;} 連接被訪問以後選中

a:hover {color: #008000;} 鼠標懸停被選中

a:active {color: #FFFF00;} 連接被按下以後

注意

因爲樣式的疊加特性和用戶的操做順序影響，以上四個僞類選擇器在書寫時儘可能按照link vistied hover active的順序來書寫。

長度單位

像素

- 屏幕（顯示器）其實是由一個一個的小點點構成的

- 不一樣屏幕的像素大小是不一樣的，像素越小的屏幕顯示的效果越清晰

- 因此一樣的200px在不一樣的設備下顯示效果不同

百分比

- 也能夠將屬性值設置爲相對於其父元素屬性的百分比

- 設置百分比可使子元素跟隨父元素的改變而改變

- em是相對於元素的字體大小來計算的

- 1em = 1font-size

- em會根據字體大小的改變而改變

rem

- rem是相對於根元素的字體大小來計算

顏色單位

RGB值：

- RGB經過三種顏色的不一樣濃度來調配出不一樣的顏色

- R red，G green ，B blue

- 每一種顏色的範圍在 0 - 255 (0% - 100%) 之間

- 語法：RGB(紅色,綠色,藍色)

background-color: rgb(255,255,255);    表明白色
background-color: rgb(0,0,0);          表明黑色

RGBA:

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

- 須要四個值，前三個和rgb同樣，第四個表示不透明度

1表示徹底不透明 0表示徹底透明 .5半透明

十六進制的RGB值：

- 語法：#紅色綠色藍色

- 顏色濃度經過 00-ff

- 若是顏色兩位兩位重複能夠進行簡寫

#aabbcc --> #abc

 background-color: #0000;             表明黑色
 background-color: #bbffaa;           護眼色

HSL值 HSLA值

H 色相(0 - 360)

S 飽和度，顏色的濃度 0% - 100%

L 亮度，顏色的亮度 0% - 100%

文檔流

- 網頁是一個多層的結構，一層摞着一層

- 經過CSS能夠分別爲每一層來設置樣式

- 做爲用戶來說只能看到最頂上一層

- 這些層中，最底下的一層稱爲文檔流，文檔流是網頁的基礎

咱們所建立的元素默認都是在文檔流中進行排列

- 對於咱們來元素主要有兩個狀態

在文檔流中

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

- 元素在文檔流中有什麼特色：

塊元素

- 塊元素會在頁面中獨佔一行(自上向下垂直排列)

- 默認寬度是父元素的所有（會把父元素撐滿）

- 默認高度是被內容撐開（子元素）

行內元素

- 行內元素不會獨佔頁面的一行，只佔自身的大小

- 行內元素在頁面中左向右水平排列，若是一行之中不能容納下全部的行內元素

則元素會換到第二行繼續自左向右排列（書寫習慣一致）

- 行內元素的默認寬度和高度都是被內容撐開

盒子模型

盒模型、盒子模型、框模型（box model）

- CSS將頁面中的全部元素都設置爲了一個矩形的盒子

- 將元素設置爲矩形的盒子後，對頁面的佈局就變成將不一樣的盒子擺放到不一樣的位置

- 每個盒子都由一下幾個部分組成：

內容區（content）

內邊距（padding）

邊框（border）

外邊距（margin）

內容區（content）

元素中的全部的子元素和文本內容都在內容區中排列
內容區的大小由width 和 height兩個屬性來設置
idth 設置內容區的寬度
height 設置內容區的高度

邊框（border）

邊框屬於盒子邊緣，邊框裏邊屬於盒子內部，出了邊框都是盒子的外部

一、邊框的大小會影響到整個盒子的大小

二、要設置邊框，須要至少設置三個樣式：

三、邊框的寬度 border-width

四、邊框的顏色 border-color

五、邊框的樣式 border-style

沒有次序要求！！！

/* 				border-width: 10px;
				border-color: red;
				border-style: solid; */
          等同於
				border:10px solid red ;

border-width

border-width: 10px;

默認值，通常都是 3個像素

border-width能夠用來指定四個方向的邊框的寬度

值的狀況

四個值：上右下左(順時針)

三個值：上左右下

兩個值：上下左右

一個值：上下左右

除了border-width還有一組 border-xxx-width

xxx能夠是 top right bottom left

用來單獨指定某一個邊的寬度

border-color

用來指定邊框的顏色，一樣能夠分別指定四個邊的邊框

規則和border-width同樣

border-color也能夠省略不寫，若是省略了則自動使用color的顏色值

border-style

指定邊框的樣式

solid 表示實線

dotted 點狀虛線

dashed 虛線

double 雙線

border-style的默認值是none 表示沒有邊框

border

簡寫屬性，經過該屬性能夠同時設置邊框全部的相關樣式，而且沒有順序要求

除了border之外還有四個 border-xxx

border-top

border-right

border-bottom

border-left

設置border一條邊的樣式

對比 outline

內邊距

內邊距（padding）

- 內容區和邊框之間的距離是內邊距

- 一共有四個方向的內邊距：

padding-top

padding-right

padding-bottom

padding-left

- 內邊距的設置會影響到盒子的大小（內邊距變化，盒子大小會變化）

- 背景顏色會延伸到內邊距上

盒子的可見框的大小，由內容區+內邊距+邊框共同決定，

因此在計算盒子大小時，須要將這三個區域加到一塊兒計算

外邊距

- 外邊距不會影響盒子可見框的大小

- 可是外邊距會影響盒子的位置

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

margin-top

- 上外邊距，設置一個正值，元素會向下移動

margin-right

- 默認狀況下設置margin-right不會產生任何效果

margin-bottom

- 下外邊距，設置一個正值，其下邊的元素會向下移動

margin-left

- 左外邊距，設置一個正值，元素會向右移動

- margin也能夠設置負值，若是是負值則元素會向相反的方向移動

- 元素在頁面中是按照自左向右的順序排列的，

因此默認狀況下若是咱們設置的左和上外邊距則會移動元素自身

而設置下和右外邊距會移動其餘元素

- margin的簡寫屬性

margin 能夠同時設置四個方向的外邊距，用法和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 = 其父元素內容區的寬度（必須知足）

0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

100 + 0 + 0 + 200 + 0 + 0 + 400 = 800

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

- 以上等式必須知足，若是相加結果使等式不成立，則稱爲過分約束，則等式會自動調整

- 調整的狀況：

- 若是這七個值中沒有爲 auto 的狀況，則瀏覽器會自動調整margin-right值以使等式知足

- 這七個值中有三個值和設置爲auto

width

margin-left

maring-right

- 若是某個值爲auto，則會自動調整爲auto的那個值以使等式成立

0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800

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

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

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

auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300

- 若是將一個寬度和一個外邊距設置爲auto，則寬度會調整到最大，設置爲auto的外邊距會自動爲0

- 若是將三個值都設置爲auto，則外邊距都是0，寬度最大

- 若是將兩個外邊距設置爲auto，寬度固定值，則會將外邊距設置爲相同的值

因此咱們常常利用這個特色來使一個元素在其父元素中水平居中

示例：

width:xxxpx;

margin:0 auto;

居中操做：

            margin-right: auto;
            margin-left: auto;

垂直方向佈局

子元素是在父元素的內容區中排列的，

若是子元素的大小超過了父元素，則子元素會從父元素中溢出

使用 overflow 屬性來設置父元素如何處理溢出的子元素

可選值：

visible，默認值子元素會從父元素中溢出，在父元素外部的位置顯示

hidden 溢出內容將會被裁剪不會顯示

scroll 生成兩個滾動條，經過滾動條來查看完整的內容

auto 根據須要生成滾動條

overflow-x:

overflow-y:

外邊距的摺疊

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

- 相鄰的垂直方向外邊距會發生重疊現象

- 兄弟元素

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

- 特殊狀況：

若是相鄰的外邊距一正一負，則取二者的和

若是相鄰的外邊距都是負值，則取二者中絕對值較大的

- 兄弟元素之間的外邊距的重疊，對於開發是有利的，因此咱們不須要進行處理

- 父子元素

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

- 父子外邊距的摺疊會影響到頁面的佈局，必需要進行處理

行內盒模型

行內元素的盒模型

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

- 行內元素能夠設置padding，可是垂直方向padding不會影響頁面的佈局

- 行內元素能夠設置border，垂直方向的border不會影響頁面的佈局

- 行內元素能夠設置margin，垂直方向的margin不會影響佈局

行內元素的盒模型

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

- 行內元素能夠設置padding，可是垂直方向padding不會影響頁面的佈局

- 行內元素能夠設置border，垂直方向的border不會影響頁面的佈局

- 行內元素能夠設置margin，垂直方向的margin不會影響佈局

樣式表

重置樣式表

專門用來對瀏覽器的樣式進行重置的

reset.css 直接去除了瀏覽器的默認樣式

normalize.css 對默認樣式進行了統一

默認樣式

- 一般狀況，瀏覽器都會爲元素設置一些默認樣式

- 默認樣式的存在會影響到頁面的佈局，

一般狀況下編寫網頁時必需要去除瀏覽器的默認樣式（PC端的頁面）

盒子的尺寸

默認狀況下，盒子可見框的大小由內容區、內邊距和邊框共同決定

box-sizing 用來設置盒子尺寸的計算方式（設置width和height的做用）

可選值：

content-box 默認值，寬度和高度用來設置內容區的大小

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

width 和 height 指的是內容區和內邊距和邊框的總大小

盒子的輪廓圓角

box-shadow 用來設置元素的陰影效果，陰影不會影響頁面佈局

第一個值水平偏移量設置陰影的水平位置正值向右移動負值向左移動

第二個值垂直偏移量設置陰影的水平位置正值向下移動負值向上移動

第三個值陰影的模糊半徑

第四個值陰影的顏色

outline 用來設置元素的輪廓線，用法和border如出一轍

輪廓和邊框不一樣的點，就是輪廓不會影響到可見框的大小

border-radius: 用來設置圓角圓角設置的圓的半徑大小

border-radius 能夠分別指定四個角的圓角

四個值左上右上右下左下

三個值左上右上/左下右下

兩個個值左上/右下右上/左下

/* 要讓一個文字在父元素中垂直居中，只需將父元素的line-height設置爲一個和父元素height同樣的值 */

line-height: 25px; 文字垂直居中

浮動

經過浮動可使一個元素向其父元素的左側或右側移動

使用 float 屬性來設置於元素的浮動

可選值：

none 默認值，元素不浮動

left 元素向左浮動

right 元素向右浮動

注意，元素設置浮動之後，水平佈局的等式便不須要強制成立

元素設置浮動之後，會徹底從文檔流中脫離，再也不佔用文檔流的位置，

因此元素下邊的還在文檔流中的元素會自動向上移動

浮動的特色

一、浮動元素會徹底脫離文檔流，再也不佔據文檔流中的位置

二、設置浮動之後元素會向父元素的左側或右側移動，

三、浮動元素默認不會從父元素中移出

四、浮動元素向左或向右移動時，不會超過它前邊的其餘浮動元素

五、若是浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素沒法上移

六、浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它同樣高

<!-- 如果有display：inline-block(行內元素)則浮動的b會佔據a的位置

若沒有有display(塊元素)則浮動的b不會佔據a的位置 */-->

    <style>
        .a{
            width:100px;
            height:100px;
            background-color:red;
<!--     如果有display：inline-block(行內元素)則浮動的b會佔據a的位置
            若沒有有display(塊元素)則浮動的b不會佔據a的位置 
-->
            display:inline-block;  


        }
        .b{
            width:100px;
            height:100px;
            background-color:yellow;
            float:left;
        }


    </style>


 </head>
 <body>
    <div class = "a"></div>
    <div class = "b">bbb</div>
 </body>

總結：

浮動目前來說它的主要做用就是讓頁面中的元素能夠水平排列，

經過浮動能夠製做一些水平方向的佈局

浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，因此咱們能夠利用浮動來設置文字環繞圖片的效果

元素設置浮動之後，將會從文檔流中脫離，從文檔流中脫離後，元素的一些特色也會發生變化

脫離文檔流的特色：

塊元素：

一、塊元素不在獨佔頁面的一行

二、脫離文檔流之後，塊元素的寬度和高度默認都被內容撐開

行內元素：

行內元素脫離文檔流之後會變成塊元素，特色和塊元素同樣

脫離文檔流之後，不須要再區分塊和行內了

★★高度塌陷★★

高度塌陷的問題：

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

當子元素浮動後，其會徹底脫離文檔流，子元素從文檔流中脫離

將會沒法撐起父元素的高度，致使父元素的高度丟失

父元素高度丟失之後，其下的元素會自動上移，致使頁面的佈局混亂

因此高度塌陷是浮動佈局中比較常見的一個問題，這個問題咱們必需要進行處理！

解決方案：

BFC塊級格式化環境

(Block Formatting Context)

BFC是一個CSS中的一個隱含的屬性，能夠爲一個元素開啓BFC

開啓BFC該元素會變成一個獨立的佈局區域

元素開啓BFC後的特色：

1.開啓BFC的元素不會被浮動元素所覆蓋

2.開啓BFC的元素子元素和父元素外邊距不會重疊

3.開啓BFC的元素能夠包含浮動的子元素

措施：

能夠經過一些特殊方式來開啓元素的BFC：

一、設置元素的浮動（不推薦）

二、將元素設置爲行內塊元素（不推薦）

三、將元素的overflow設置爲一個非visible的值

經常使用的方式爲元素設置 overflow:hidden 開啓其BFC 以使其能夠包含浮動元素

clear

因爲box1的浮動，致使box3位置上移

也就是box3收到了box1浮動的影響，位置發生了改變

若是咱們不但願某個元素由於其餘元素浮動的影響而改變位置，

能夠經過clear屬性來清除浮動元素對當前元素所產生的影響

做用：

清除浮動元素對當前元素所產生的影響

- 可選值：

left 清除左側浮動元素對當前元素的影響

right 清除右側浮動元素對當前元素的影響

both 清除兩側中最大影響的那側

原理：

設置清除浮動之後，瀏覽器會自動爲元素添加一個上外邊距，

以使其位置不受其餘元素的影響

.box1::after

 .box1::after{
         content: '';
         display: block;
         clear: both;
     }

clearfix

這個樣式能夠同時解決高度塌陷和外邊距重疊的問題，當你在遇到這些問題時，直接使用clearfix這個類便可

.clearfix::before,
.clearfix::after{
       content: '';
       display: table;
       clear: both;
    }

定位

定位（position）

- 定位是一種更加高級的佈局手段

- 經過定位能夠將元素擺放到頁面的任意位置

- 使用position屬性來設置定位

可選值：

static 默認值，元素是靜止的沒有開啓定位

relative 開啓元素的相對定位

absolute 開啓元素的絕對定位

fixed 開啓元素的固定定位

sticky 開啓元素的粘滯定位

相對定位：

當元素的position屬性值設置爲relative時則開啓了元素的相對定位

相對定位的特色：

1.元素開啓相對定位之後，若是不設置偏移量元素不會發生任何的變化

2.相對定位是參照於元素在文檔流中的位置進行定位的

3.相對定位會提高元素的層級

4.相對定位不會使元素脫離文檔流

5.相對定位不會改變元素的性質塊仍是塊，行內仍是行內

偏移量（offset）

當元素開啓了定位之後，能夠經過偏移量來設置元素的位置

top

定位元素和定位位置上邊的距離

bottom

定位元素和定位位置下邊的距離

定位元素垂直方向的位置由top和bottom兩個屬性來控制

一般狀況下咱們只會使用其中一

top值越大，定位元素越向下移動

bottom值越大，定位元素越向上移動

left

定位元素和定位位置的左側距離

right

定位元素和定位位置的右側距離

定位元素水平方向的位置由left和right兩個屬性控制

一般狀況下只會使用一個

left越大元素越靠右

right越大元素越靠左

★絕對定位

當元素的position屬性值設置爲absolute時，則開啓了元素的絕對定位

絕對定位的特色：

1.開啓絕對定位後，若是不設置偏移量元素的位置不會發生變化

2.開啓絕對定位後，元素會從文檔流中脫離

3.絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開

4.絕對定位會使元素提高一個層級

5.絕對定位元素是相對於其包含塊進行定位的

包含塊( containing block )

正常狀況下：

包含塊就是離當前元素最近的祖先塊元素

<div><span><em>hello</em></span></div>

絕對定位的包含塊:

包含塊就是離它最近的開啓了定位的祖先元素，

若是全部的祖先元素都沒有開啓定位則根元素就是它的包含塊

html（根元素、初始包含塊）

固定定位

固定定位：

將元素的position屬性設置爲fixed則開啓了元素的固定定位

固定定位也是一種絕對定位，因此固定定位的大部分特色都和絕對定位同樣

惟一不一樣的是：

固定定位永遠參照於瀏覽器的視口進行定位

固定定位的元素不會隨網頁的滾動條滾動

粘滯定位

當元素的position屬性設置爲sticky時則開啓了元素的粘滯定位

粘滯定位和相對定位的特色基本一致，

不一樣的是粘滯定位能夠在元素到達某個位置時將其固定

水平佈局

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含塊的內容區的寬度

當咱們開啓了絕對定位後:

水平方向的佈局等式就須要添加left 和 right 兩個值

此時規則和以前同樣只是多添加了兩個值：

當發生過分約束：

若是9個值中沒有 auto 則自動調整right值以使等式知足

若是有auto，則自動調整auto的值以使等式知足

可設置auto的值

margin width left right

由於left 和 right的值默認是auto，因此若是不指定left和right

則等式不知足時，會自動調整這兩個值

垂直方向佈局的等式的也必需要知足

top + margin-top/bottom + padding-top/bottom + border-top/bottom + height

= 包含塊的高度

元素的層級

對於開啓了定位元素，能夠經過z-index屬性來指定元素的層級

z-index須要一個整數做爲參數，值越大元素的層級越高

元素的層級越高越優先顯示

若是元素的層級同樣，則優先顯示靠下的元素

祖先的元素的層級再高也不會蓋住後代元素

z-index: 1;

字體

字體相關的樣式

color 用來設置字體顏色

font-size 字體的大小

和font-size相關的單位

em 至關於當前元素的一個font-size

rem 相對於根元素的一個font-size

font-family 字體族（字體的格式）

可選值：

serif 襯線字體

sans-serif 非襯線字體

monospace 等寬字體

- 指定字體的類別，瀏覽器會自動使用該類別下的字體

font-family 能夠同時指定多個字體，多個字體間使用,隔開

字體生效時優先使用第一個，第一個沒法使用則使用第二個以此類推

Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino

Sans GB, "\5B8B\4F53", sans-serif

font-face能夠將服務器中的字體直接提供給用戶去使用

問題：

1.加載速度

2.版權

3.字體格式

@font-face {
            /* 指定字體的名字 */
            font-family:'myfont' ;
            /* 服務器中字體的路徑 */
   src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
   }

圖標字體（iconfont）

- 在網頁中常常須要使用一些圖標，能夠經過圖片來引入圖標

可是圖片大小自己比較大，而且很是的不靈活

- 因此在使用圖標時，咱們還能夠將圖標直接設置爲字體，

而後經過font-face的形式來對字體進行引入

- 這樣咱們就能夠經過使用字體的形式來使用圖標

fontawesome 使用步驟

1.下載 https://fontawesome.com/

2.解壓

3.將css和webfonts移動到項目中

4.將all.css引入到網頁中

5.使用圖標字體

- 直接經過類名來使用圖標字體

   class="fas fa-bell"
   class="fab fa-accessible-icon"

<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
    <i class="fas fa-bell-slash"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>

僞元素設置圖標字體

1.找到要設置圖標的元素經過before或after選中

2.在content中設置字體的編碼

3.設置字體的樣式

第一種方式:

fab
font-family: 'Font Awesome 5 Brands';

第二種方式:

fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;

iconfont使用步驟

....

行高（line height）

- 行高指的是文字佔有的實際高度

- 能夠經過line-height來設置行高

行高能夠直接指定一個大小（px em）

也能夠直接爲行高設置一個整數

若是是一個整數的話，行高將會是字體的指定的倍數

- 行高常常還用來設置文字的行間距

行間距 = 行高 - 字體大小

字體框

字體框就是字體存在的格子，設置font-size實際上就是在設置字體框的高度

行高會在字體框的上下平均分配

/* 能夠將行高設置爲和高度同樣的值，使單行文字在一個元素中垂直居中 */

            line-height: 200px;

水平對齊

text-align 文本的水平對齊

可選值：

left 左側對齊

right 右對齊

center 居中對齊

justify 兩端對齊

            /* text-align: justify; */

垂直對齊

vertical-align 設置元素垂直對齊的方式

可選值：

baseline 默認值基線對齊

top 頂部對齊

bottom 底部對齊

middle 居中對齊

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。