前言

• CSS是前端三件套之一，在MarkDown中也完美兼容這些語法；
• 這篇文章是本人大一學(xué)習(xí)前端的筆記；
• 歡迎點贊 + 收藏 + 關(guān)注，本人將會持續(xù)更新。

Emmet語法：

1. 生成標(biāo)簽，如：div + tab
2. 如果想同時生成多個標(biāo)簽，如：div*3
3. 如果有父子級標(biāo)簽，如：ul > li
4. 兄弟關(guān)系標(biāo)簽，如：div + p
5. 生成含有類名，如：.demo（默認(rèn)是div） p.red
6. 生成含有順序，如：div$*3
7. 如果想在標(biāo)簽內(nèi)有內(nèi)容{ }表示

CSS基本語法：

css語法結(jié)構(gòu)只有3種：選擇器、樣式屬性和值

css代碼風(fēng)格：

• 樣式格式：重點，展開格式
• 樣式大小書寫：全部用小寫
• 空格規(guī)范：
  • 空格

添加css的方法：

• 鏈接外部樣式

• 內(nèi)部樣式表：控制一個頁面

• 導(dǎo)入外部樣式表

  第一步建立一個css
  <style><link rel="styleheet" href="鏈接">
  </style>
  

• 內(nèi)嵌樣式：控制一個

CSS選擇器：

• 分為：基礎(chǔ)選擇器和復(fù)合選擇器

基礎(chǔ)選擇器：

• 標(biāo)簽選擇器
• 類選擇器（class 點開頭)，一個html標(biāo)簽中可以有多個
• 多類選擇武器
• id選擇器（#名），一個html標(biāo)簽中只能有一個
• 通配符選擇器（*）

復(fù)合選擇器：

• 后代選擇器
• 子代選擇器（選擇最近一個子元素）
  • 元素1(父)>元素2(兒)
• 并集選擇器
  • 元素1，元素2
• 偽類選擇器
  • 如：a： link
  • a: visited
  • a: hover
  • a: active(也是規(guī)范的順序)

字體屬性

• font-family：
• font-size：
• font-style：italic normal（默認(rèn)）
• font-weight：400 700
• font-variant(小寫轉(zhuǎn)為大寫)

字體復(fù)合屬性：

font：font-style fone-weight font-size/line-height font-family

• 必須保留size和family
• 順序一定要嚴(yán)格

背景顏色屬性：

• background-color：
  • background-color: 顏色取值
• background-image:
  • background-image: url(圖像地址)
• background-repeat：
  • background-repeat: 取值
  • 取值：（默認(rèn)）no-repeat repeat-x repeat-y
  • background-attachment：（固定或者滾動）
  • background-attachment：scroll/fixed
• background-position：
  • background-position：位置取值
  • 位置取值：數(shù)值和方向位置
    • 注意：數(shù)組一定是 X Y結(jié)構(gòu)
• background: rgba(0,0,0,0.5); 必須四個值

背景復(fù)合屬性：

background: 背景顏色 背景圖片 背景重復(fù) 背景附件 背景位置

• 順序隨意

文本屬性：

• color：
• text-align:
  • 值：center left right
• text-decoration：
  • none（默認(rèn)） underline（下劃線） overline（上劃線） line-through（刪除線）
• text-indent：
  • px單位
  • em單位
• 行間距：line-height

CSS三大屬性

1、層疊性

相同選擇器給設(shè)置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。層疊性主要解決樣式?jīng)_突的問題

原則：

• 樣式?jīng)_突，遵循的原則是就近原則，哪個樣式離結(jié)構(gòu)近，就執(zhí)行哪個樣式，不會沖突

2、繼承性

CSS中的繼承: 子標(biāo)簽會繼承父標(biāo)簽的某些樣式，如文本顏色和字號。恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低 CSS 樣式的復(fù)雜性。

口訣：龍生龍，鳳生鳳，老鼠生的孩子會打洞

3、優(yōu)先級

注意點：

• 權(quán)重是有4組數(shù)字組成,但是不會有進(jìn)位。
• 等級判斷從左向右，如果某一位數(shù)值相同，則判斷下一位數(shù)值。
• 可以簡單記憶法: 通配符和繼承權(quán)重為0, 標(biāo)簽選擇器為1,類(偽類)選擇器為 10, id選擇器 100, 行內(nèi)樣式表為 1000, !important 無窮大.
• 繼承權(quán)重為0.無論父類有多大權(quán)重

權(quán)重疊加：

復(fù)合選擇器，會有權(quán)重疊加

• div ul li---------> 0,0,0,3
• .nav ul li---------> 0,0,1,2
• a:hover--------->0,0,1,1
• .nav a --------------> 0,0,1,1

盒子模型：

網(wǎng)頁布局的核心：利用CSS擺盒子

• content padding margin border

網(wǎng)頁布局本質(zhì)

利用CSS實現(xiàn)盒子模型

網(wǎng)頁布局過程

1. 先準(zhǔn)備好相關(guān)的網(wǎng)頁元素，網(wǎng)頁元素基本都是盒子 Box 。
2. 利用 CSS 設(shè)置好盒子樣式，然后擺放到相應(yīng)位置。
3. 往盒子里面裝內(nèi)容

網(wǎng)頁布局三大核心

• 盒子模型
• 浮動
• 定位

盒子模型組成

盒子模型：把 HTML 頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。

邊框：

邊框使用

• 三部分：寬度 樣式 顏色
  • border-width
  • border-color
  • border-style
    • solid（實線邊框）
    • dashed（虛線框）
    • dotted（點線邊框）
  • none
• 復(fù)合邊框：border：（無順序）
• 上下左右邊框，如：border->top
• 重點：border-collapse(控制相領(lǐng)的邊框，表格的細(xì)線邊框)
  • border-collapse：collapse
• 注意：邊框會影響盒子的實際大小

邊框會影響盒子實際大小

邊框會額外增加盒子實際大小，需要根據(jù)實際情況布局

內(nèi)邊框：

• padding

  • padding-top
  • padding-bottom
  • padding-right
  • padding-left

• padding的復(fù)合寫性

  • padding：1px 代表上下左右都是1px
  • padding：1px 2px 代表上下是1px，左右是2px
  • padding：1px 2px 3px 代表上是1px，下是3px，左右是2px
  • padding：1px 2px 3px 4px ，代表順時針

  內(nèi)邊距的影響：

  • 內(nèi)容與邊框有距離，增加了內(nèi)邊距
  • padding影響了盒子的實際大小
  • 解決方案，改變height和width的大小，或者不寫height和width

外邊距：

• margin， 其他寫法與padding一樣
• 外邊距的典型運用：
  • 讓盒子水平居中，屬性值為：auto
• 外邊距合并
  • 嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷比較大
    • 解決方案：
    • 可以為父元素定義一個上邊框
    • 可以為父元素定義內(nèi)邊框
    • 可以為父元素添加overflow：hidden；
    • 可以用浮動,定位

一些放在css首位的選擇器：

• 清除內(nèi)外邊距

  * {margin：0；padding：0；
  }
  

• ul-li不顯示小圓點

  li {list-style：none；
  }
  

圓角邊框：

border-radius：length；

• length：數(shù)值/百分比
• 正方形想要圓，50%
• 圓角矩形：設(shè)置高度的一般就行了
• 也可以分開寫，如：border-top-left-radius：
• 也可以合起來寫：border-radius：

簡單盒子、文字陰影：

盒子陰影：

• box-shadow：h-shadow v-shadow blur spread color inset
  • h-shadow v-shadow 必須有，h水平陰影 v垂直陰影
  • blur 模糊距離
  • spread 陰影尺寸
  • color 陰影的顏色 rgba（0，0，0，.3）
  • inset 將外部陰影改為內(nèi)部種（默認(rèn)外部陰影）

文字陰影：

• text-shadow
• 其余同上

浮動：

標(biāo)準(zhǔn)流：

• 就是標(biāo)簽按照規(guī)定好默認(rèn)方式排列
• 最基本的頁面布局

浮動：

• float：none（默認(rèn)）
  • left（左浮動）
  • right（右浮動）
• 兩個最重要的的特征
  1. 脫離標(biāo)準(zhǔn)普通流的控制，移動到指定位置 （托標(biāo)）
  2. 浮動盒子不再保留原來的位置

塊元素、行內(nèi)元素、行內(nèi)塊元素：

塊元素：

• div（最金典）
• h1-h6
• p
• ul、ol、dl
• form
• table
• 特點
  • 獨占一行
  • 高、寬度以及內(nèi)邊距都可以控制
  • 是一個融器
  • 注意：p h1-h6 內(nèi)不可以存在塊元素

行內(nèi)元素：

• a
• strong
• br
• del
• span（最經(jīng)典）
• textarea
• 特點：
  • 一行可以多個
  • 高、寬不能設(shè)置
  • 默認(rèn)寬就是本身內(nèi)容寬度
  • 行內(nèi)元素只能放在文本或者其它行內(nèi)元素

行內(nèi)塊：

• img
• input
• td
• 特點：
  • 默認(rèn)文本高度
  • 高度、寬度都可以控制
  • 一行可以多個

元素顯示模式轉(zhuǎn)換：

• 轉(zhuǎn)為塊元素：display：block；
• 轉(zhuǎn)為行內(nèi)元素：display：inline；
• 轉(zhuǎn)為行內(nèi)塊元素：display：line-block；

定位

定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子

定位 = 定位模式 + 邊偏移

定位模式用于指定一個元素在文檔的定位方式。邊偏移則決定了該元素的最終位置

邊偏移

邊偏移屬性	示例	描述
top	top: 80px	頂端偏移量，定義元素相對于其父元素上邊線的距離
bottom	bottom: 80px	底部偏移量，定義元素相對于其父元素下邊線的距離
left	left: 80px	左側(cè)偏移量，定義元素相對于其父元素左邊線的距離
right	right: 80px	右測偏移量，定義元素相對于其父元素右邊線的距離

靜態(tài)定位（了解）

靜態(tài)定位是元素的默認(rèn)定位方式，無定位的意思

語法：

選擇器 {position: static;}

• 靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置，無邊偏移
• 靜態(tài)定位在布局中很少用

相對定位 （重要）

相對定位是元素在位移位置的時候，是相對于他原來的位置來說的

語法：

選擇器 {position: relative;
}

相對定位的特點：（重要）

• 它是相對于自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置)
• 原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有

絕對定位（重要）

絕對定位是元素在移動的時候，是相對于它祖先元素來說的

語法：

選擇器 {position: absolute;}

特點（重要）：

• 如果沒有父元素或者祖先元素，則以瀏覽器為準(zhǔn)定位
• 如果祖元素有定位（相對、絕對、固定定位），則以最近定位元素為參考點
• 絕對定位不再占有原先位置

子絕父相

因為父親要占有位置，因此是相對定位，子盒子不需要占有位置，則是絕對定位

固定定位（重要）

固定定位是元素固定于瀏覽器可視區(qū)位置

選擇器 {position: fixed;}

特點（重要）：

• 跟父元素沒有關(guān)系
• 不隨滾動條滾動
• 固定位置不在占有原先的位置

粘性定位（了解）

語法：

選擇器 {position: sticky;
}

display 屬性

• display: none; 隱藏對象
• display: block;

opacity屬性

顏色透明

• opacity: .5;

z-index屬性

提高層級

• z-index: 999; （999最高層級）