CSS基礎知識總結

前言：學習Vue要求要有中級的html,css和js的基礎，來補一下css的基礎

一、CSS簡介

1.1頁面美容師

• 功能：美化網頁，布局頁面
• CSS是層疊樣式表的簡稱，也是一門标簽語言

• 最大價值：讓HTML專心去做結構，結構（HTML）與樣式（CSS）分離

  1.2CSS文法規範

• 由兩部分構成：選擇器+一條或者多條聲明
• 選擇器是指定HTML标簽

• 屬性和屬性值之間用：隔開

  1.3CSS代碼風格

• 選擇器與大括号之間要有一個空格
• 屬性值與前面的冒号之間要有空格

• 選擇器的作用：根據不同的需求将标簽選出來

  1.4選擇器分類

• 基礎選擇器和複合選擇器
• 基礎選擇器包括：标簽選擇器；類選擇器；id選擇器;通配符選擇器
• 标簽選擇器：用HTML标簽名作為選擇前，但不能差異化設計
• 類選擇器：單獨選一個或者幾個标簽，使用類選擇器；類名是自己命名的，盡量使用英文命名，但不能和标簽名重名；長名稱或詞組可以使用中橫線來；命名要盡量做到見名知意；樣式點（.）定義，結構類（class）調用，一個或多個，開發最常用;多個類名之間使用空格隔開
• id選擇器：樣式#定義，結構id調用，隻能調用一次，一般和js搭配使用

• 通配符選擇器：*選擇所有的标簽，特殊情況下使用

  二、字型屬性

  2.1字型系列(font-family)

• 多個字型間要使用逗号隔開
• 有多個單詞組成的字型加單引号
• 微軟雅黑：Microsoft Yahei
• 字型大小（font-size):不同浏覽器預設顯示的字型大小不一緻，盡量明确規定px(像素）；可以給body指定整個頁面文字的大小；
• 字型粗細（font-weight):更經常用number,700為加粗，400為正常（變細）,數字後面不加px
• 文字樣式（font-style 斜體/不斜體）：很少給文字加斜體（italic),更多的是讓傾斜的正過來（normal)

• font複合屬性寫法：font: style weight size family,前兩者都可省，但後面兩個不可省略

  三、文本屬性

  3.1文本顔色

• 預定義的顔色值 red blue
• 16進制#FF00000(開發中更多用，但不用記，後期提取即可）

• rgb代碼：rhgb(250,0,0)

  3.2文本對齊

• text-align:left(預設）、right、center

  3.3裝飾文本

• text-decoration（裝飾文本）:none(預設無裝飾線線）underline(下劃線）line-through(删除線） overline(上劃線）

  3.4行間距

• line-height:用于設定行之間的距離，分為上間距、文本高度、下間距三個部分，像素變大改變的是上下間距

  四、CSS的引入方式：

  4.1内部樣式表：CSS代碼寫在HTML頁面中，實作結構與樣式的部分分離

  4.2行内樣式表：在元素标簽内的style屬性中中設定CSS樣式，一般很少用

  4.3外部樣式表（開發使用較多）

• 需要實作的樣式比較多

• 單獨開個.css檔案，需要引用的時候在head中寫link按table，後面寫上css的路徑即可

  五、Emmet文法

• 生成标簽：直接寫标簽名然後按tab鍵
• 生成多個多個标簽：加即可，如div3
• 父子級關系：如ul>li
• 兄弟級關系：如div+p
• 如果要生成帶有類名或者id名的，直接寫.demo和#two，tab鍵即可，如果是在p裡面寫類名可以使用p.one這樣寫
• 如果要生成的div類名是有順序的，使用自增符号$
• 在生成的标簽内寫内容可以用{}表示

• 也可以使用簡寫按Tab鍵來快速實作CSS樣式的書寫

  六、複合選擇器

  6.1後代選擇器（很經常使用）

• 兩元素可以是任意選擇器，之間使用空格隔開

• 不僅可以是兒子，還可以是孫子，如.nav ol li

  6.2子元素選擇器（親兒子選擇器）

• 兩元素使用>隔開

• 隻選擇離他最近的那一個，孫子重孫都不歸他們管

  6.3并集選擇器

• 文法規範：元素1，元素2{}

• 任何選擇器都可作為并集選擇器的一部分

  6.4僞類連結選擇器

• a🔗選擇未被通路過的連結
• a:visited:選擇已經被通路過的連結
• a:hover（重點）:選擇滑鼠位置位于其上的連結
• a:active:選擇滑鼠點選了但還沒有松開的連結
• 為確定生效：按照LVHA的順序聲明

• 開發時候最常用的是給a顔色，然後寫一個a:hover就行了

  6.5僞類focus選擇器

• ：focus:光标定在哪裡，就修改哪裡，如input:focus

  七、CSS的元素顯示模式

  7.1顯示模式

• 釋義：标簽以什麼方式顯示

• HTML标簽分為塊元素和行内元素兩種

  7.2塊元素

• 比較霸，自己占一行
• 高度、寬度、外邊距、内邊距可以設定
• 寬度預設和父級容器一樣
• 裡面可以放行内或者塊元素

• 注意:p和h這種屬于文字類塊元素，裡面不能再放其他塊元素（比如p裡面不能再放div）

  7.3行内元素

• 一行中可以顯示多個
• 高、寬直接設定無效
• 預設寬度是本身的寬度
• 裡面隻能放文本或者其它行内元素

• 注：連結内不能再放連結；a裡面可以塊級元素

  7.4行内塊元素

• img,input,td，既具有塊元素特點，也具有行内元素特點

• 一行可以顯示多個，寬度預設為本身寬度，可以直接設定寬和高

  7.5顯示模式轉換

• 轉換為塊元素：display:block
• 轉換為行内元素：display:inline

• 轉轉換為行内塊元素：display:block-inline

  7.6單行文字垂直居中

• 文字行高等于盒子高度（讓上空隙和下空隙把文字擠到中間）

  八、CSS背景

  8.1背景顔色

• background-color

  8.2背景圖檔

• background-image:url()
• 常用于一些Logo/ 裝飾性的小圖檔/很大的背景圖
• 優點：便于控制位置

• 背景平鋪（background-repeat):repeat(橫向縱向平鋪）no-repeat(不平鋪） repeat-x(x軸方向平鋪） repeat-y(y軸方向平鋪）

  8.3背景位置

• background-position: x y,可以使用方位名詞或者精确機關
• 方位名詞：top center left right bottom
• 如果兩個值都是方位名詞，則兩個值寫的順序無關
• 如果隻寫了一個方位名詞，另一個省略，後者預設居中
• 也可以使用參數：使用參數的話嚴格按照前x後y來寫
• 如果隻寫了一個，y就預設是居中

• 如果用混合機關：前者是x,後者是y

  8.4背景固定

• background-attachment:scroll或者fixed,前者圖檔會随滾輪滾動而滾動

• 背景符合寫法：background:背景顔色 背景圖檔位址 背景平鋪 背景圖像滾動 背景圖檔位置（無硬性要求，這隻是推薦寫法）

  8.5背景顔色半透明

• background:rgba(0,0,0,x)最後一個參數是透明度參數，取值範圍在0-1之間，0.3可以省略掉0寫.3

  九CSS三大特性

  9.1介紹

• 層疊性、繼承性、優先級

  9.2層疊性

• 層疊性：相同選擇器設定相同樣式，後面的樣式會覆寫沖突的樣式

  9.3繼承性

  繼承性：子标簽會繼承父标簽的某些樣式（并不是所有樣式），一般為文字樣式，如給div上樣式，子标簽p也會被上樣式

• 像素可以不跟機關px,代表的是目前文字大小的倍數，友善不同的子集根據自身的文字大小調整自身的行高

  9.4優先級

• ！important>标簽内style>ID選擇器>類選擇器、僞類選擇器>元素選擇器
• 繼承的權重是0
• a是比較特殊的，浏覽器預設了是藍色且有下劃線，權重要高于0

• 複習選擇器存在權重疊加問題（ul li=0,0,0,2>li=0,0,0,1)

  十、盒子模型

  10.1網頁布局本質

• 網頁是由許許多多盒子來組成的，利用CSS來擺盒子、往盒子裡面裝内容

• 盒子模型的組成：邊框、外邊距（盒子與盒子之間的間距）、内邊距、内容

  10.2邊框（border)

• border-weight:邊框粗細（機關為px)
• border-style:邊框樣式（solid-實線，dashed虛線，dotted加點）
• border-color:邊框顔色
• 邊框的符合寫法：border:沒有順序硬性規定
• 邊框是可以分開寫的：border-top
• 合并相鄰邊框（border-collapse:collapse)

• 邊框會影響盒子實際的大小

  10.3内容、内邊距

• 内邊距（padding):padding-top:10px等調節上下左右的邊距
• padding的複合寫法：一個值：上下左右都是這個；兩個值：前為上下，後為左右；三個值：前為上，中為左右，後為下；四個值就正常
• 内邊距會撐大盒子，需要相應調整盒子大小
• 導航欄中的文字不一樣多，可以不設定盒子的寬度，設定相同的内邊距，這樣看起來效果就比較一樣了

• 如果盒子本身沒有制定weight/height，則padding不會撐開盒子

  10.4外邊距（margin)

• 用法以及複合寫法與padding都一樣
• 外邊距可以讓塊級盒子居中對齊：要設定寬度+左右外邊距設定為auto(margin:0 auto)
• 行内元素或行内塊元素要居中對齊的話找其父元素設定text-align:center
• 嵌套外邊距的坍塌：對于兩個有父子關系的的塊元素，父親有外邊距，兒子也有外邊距，父親會塌陷較的的外邊距，兒子不動。可以給父标簽添加overflow:hidden來解決
• CSS要寫的第一行*{padding:0;margin:0;}清楚所有的内外邊距。行内元素隻設定左右内外邊距，塊級元素和行内塊元素任意設定
• 隻要将圖檔的寬度修改為100%，圖檔就能和盒子一樣寬

• 去掉無序清單前的原點：list-style:none

  10.5圓角邊框

• border-radius:length(參數值可以是數值也可以是百分比）
• 對于正方形變圓形，設定為寬的一般或者50%即可

• 對于圓角矩形，設定為高的一半即可

  10.6盒子陰影（box-shadow)

  -水準陰影位置 豎直陰影位置 陰影的虛實程度 陰影的大小 陰影的顔色 陰影的内外邊距

  10.7文字陰影（test-shadow)

• 和盒子陰影用法一樣，不過隻有前四個

  十一、浮動

  11.1傳統網頁三種布局方式

• 标準流（标簽按照預設的方式來進行排放）、浮動、定位

  11.2為什麼學習浮動

• 多個塊級元素縱向排列找标準流，橫向排列找浮動

• 文法規範：float:none(不浮動） left(左浮動） right(右浮動）

  11.3浮動特性

• 脫标：脫離标準流控制移動到指定位置；浮動的盒子不再保留原來的位置，标準流會補上浮動空出來的位置，浮動盒子浮在标準流盒子的上面
• 浮動的盒子一行内顯示且上對齊.顯示不開的盒子自動換行顯示
• 任何元素都可以浮動，添加浮動後會具有行内塊元素的特點（塊級盒子沒有寬度，預設和父級一樣，浮動後根據内容大小決定）（浮動盒子中間是沒有空隙的，行内元素加浮動後也是如此）
• 為限制浮動盒子的位置，先用标準流的父元素排上下元素，内部子元素采取浮動的方式排列左右元素

• 注意：浮動的盒子隻會影響到後面的标準流，不會影響到前面的标準流

  11.4清除浮動

• 額外标簽法（不常用）：在最後一個浮動子元素的後面添加一個額外的塊級标簽
• 父級元素overflow:hidden（在父級元素中添加overflow:hidden)
• after僞元素法（父級）：用的較多，後期具體講解；更新版的額外标簽法，相當于用CSS在後面添加了一個盒子

• 雙僞元素清楚浮動：後門前門都給關上

  11.5學成線上實踐

• html與css量比較大的話可以選擇分開寫，但要記得在html中用link連接配接起來
• CSS屬性的較規範書寫順序：布局定位屬性（display、position、float…);自身屬性（width\height…)；文本屬性（color、font、text-decoration…);其他屬性(content\box-shadow…)
• 頁面布局整體思路：确定版心；分析行子產品以及行子產品内的列子產品；一行中的列通常采用浮動來做，先确定列的大小，再确定列的位置；遵循現有結構，再有樣式
• 在實際開發中，導航欄不會直接就使用a,而是采用li包含a的做法
• 浮動的盒子是不會有外邊距問題的

• 行高會繼承給孩子

  十二、定位

  12.1為什麼要使用定位

• 定位可以讓盒子自由的在某個盒子内移動位置或是固定他的位置

• 組成：定位模式+邊偏移

  12.2定位模式

• 靜态定位（static):可以簡單了解為标準流，不常用
• 相對定位（relative):總是相對于自己原來的位置來移動的；原來的位置并不是空出來，會繼續的占有
• 絕對定位（absolute):如果沒有祖先元素或者祖先元素沒有 定位，則以浏覽器為準；如果祖先元素有定位，則以最近一級的有定位的的祖先元素為參考點；絕對定位不占有位置
• 子絕父相：子集要浮在父級盒子裡并且位置多變，是以使用絕對定位。父級盒子要用來定位，要占有位置，是以選擇相對定位
• 固定定位(fixed)：以浏覽器的可視視窗為參照點移動元素；不随滾動條滾動；固定定位不保留原先的位置
• 固定到版心右側的小算法：先讓left走50%，再用margin-left走版心寬度一半的距離

• 粘性定位（了解）：以浏覽器的可視視窗為參照點；占有原來的位置；上下左右必須添加其一才能起作用

  12.3定位疊放次序

• z-index:xx;
• 數字後面不能加機關；數字大的在上面；相同屬性後面的在上；有定位的盒子才有index屬性

• 絕對定位的盒子居中：加了絕對定位的盒子不能用margin直接實作劇終了；使用left:50%，然後margin-left:進行居中調節

  12.4定位的特殊性

• 行内元素加了絕對或者固定定位的話，可以直接設定高度和寬度
• 塊級元素加了絕對或者固定定位的話，預設的大小是内容的大小
• 浮動元素會壓住下面标準流的盒子，但不會壓住下面标注流盒子的元素（浮動的初心就是做文字環繞）
• 絕對定位會壓住下面标準流的所有内容

• 如果給一個盒子既加了左，又加了右，則會預設執行左屬性

  12.5元素的顯示與隐藏

• display用于設定一個元素應該如何顯示
• display:none隐藏元素；display:block，除了轉換為塊級元素外，還有顯示元素的功能。元素隐藏後，不再占有位置
• visibility:hidden(隐藏）\visible（顯示），隐藏後保留位置

• overflow溢出：visible(預設顯示溢出部分）hidden(超出部分隐藏掉）scroll(有無超出都顯示滾動條）auto(有超出顯示滾動條，沒有就不顯示）

  第二部分、CSS進階技巧

  一、

  1.1精靈圖與字型圖示

  *簡單的小圖示用字型圖示，樣式較複雜的小圖示用精靈圖

  *字型圖示的下載下傳推薦：icomoon字庫 阿裡iconfont字庫

  *字型圖示的使用：先将下載下傳包中的font放在根目錄中；再将那一塊聲明寫再style中；再打開demo中複制一下

  *CSS三角做法：盒子高和寬都是０，邊框顔色都為透明，設定一個邊有顔色即可

  1.2CSS使用者樣式界面

  *滑鼠樣式cursor :default(預設白标） pointer（小手）move(移動十字格式） text（I） not-allowed(禁止）

  *取消表單輪廓：outline:0/none

  *防止文本框拖拽：resize:none

  *vertical-align:middle：隻針對行内塊元素與行内元素有效，圖檔與表單都是行内塊元素，實作圖檔與文字的居中對齊

  *解決圖檔底部空白縫隙的問題：給圖檔添加vertical-align去除基線對齊效果；将圖檔轉換為塊級元素

  *溢出的文字省略号顯示：強制一行顯示（white-space:nowrap) 溢出的部分隐藏起來（overflow:hidden) 文字溢出的部分省略号顯示（text-overflow:ellipsis)

  1.3常見布局技巧

  *margin負值解決邊框疊加問題，滑鼠經過某個盒子通過相對定位或者z-index提升層級即可

  *盒子加上浮動，文字自動環繞

  *隻要給盒子父元素添加center，盒子中的行内塊元素和行内元素都能執行

  *三角形強化（直角三角形）：一個px大一個px小其餘為0，保留一個顔色其餘為透明

  1.4H5C3新屬性

  *vidio插入視訊：autoplay width height loop muted

  *input新增表單：number tel search

  *placeholder:表單的提示資訊 multiple:上傳多個檔案

  *屬性選擇器[]+結構僞類選擇器（：數字、關鍵字、公式)+僞元素選擇器（CSS生成行内元素）

  *在最開始的初始化聲明中寫上box-sizing，避免盒子再被撐大

  *對圖檔進行模糊處理（filter:blur())

  *calc(100%-30px)讓子盒子始終比父盒子短30px

  *transition:變化屬性 變化實踐 變化曲線 變化延遲

  *favicon圖示的制作：png格式+比特蟲轉換ico+放在html根目錄

  *網站TDK三大标簽SEO優化：title,description,keyword

  1.5Logo的SEO優化

  *Logo盒子裡放一個h1标簽+h1标簽中放一個a，a修飾成Logo大小，裡面放上名字+将Logo的連結放在背景中

  *當内部的小盒子因為與外部大盒子邊框重疊而導緻換行的時候，可以将ul大盒子調整大一些，多出來的邊框使用overfloat隐藏掉

  --------------------------------------------未完待續---------------------------------------