css系統學習

1、css載入過程：瀏覽器對多個樣式**進行疊加，把各個零散的整合成乙個整體，讓後者覆蓋前者（！important有最高執行權）

瀏覽器載入html------->dom樹（無樣式變化）

瀏覽器載入css--------->渲染檢視樣式

2、css與html如何結合：選擇器

!important > > id > class > tag > *

標籤選擇器（*選擇器級別優先順序最低）

屬性選擇器（id和class都是屬性，特殊的屬性）：

1）只通過屬性名選擇：img[title]{}

2）通過屬性名和屬性值選擇：input[type="text"]{}

偽類：ui偽類：link、hover、active、visited、focus、target

結構化偽類：nth-child（even）、nth-child（odd）等

偽元素：可以為元素前後新增內容。這裡的「內容」還可以寫成unicode編碼的方式

：before、：after

多標籤選擇器一般和html上下文有關，它有以下集中分類：

1）選擇乙個祖先的所有子孫節點，例如 div p

2）選擇乙個父元素的所有直屬節點，例如 div > p

3）選擇某乙個元素緊挨著的兄弟節點，例如 li + li

4）選擇某乙個元素的所有同胞節點，例如 span ~ a

特指度：css選擇器表示式的重要程度，i-c-e公式；i(id 加100)、c(class 加10)、e(element 加1)；!important優先順序最高；*最低；

簡版規則：包含id的選擇器勝過包含class的選擇器，包含class的選擇器勝過包含元素的選擇器；不同選擇器的特指度比較時，不區分載入的順序；設定的樣式高於繼承的樣式，不用考慮特指度

3、頁面呈現：

包裹性：寬度根據內容來定（和在容器尺寸上最大區別是：table具有「包裹性」）；而提到「包裹性」，又不得不讓我想到float和absolute

文字：設定字型、字型大小、加粗、背景等；

tips：使用相對值；

塊：盒子模型、浮動、定位、display、背景、字型等；

盒子模型：content、padding、border、margin；

tips：平時設定寬度就是content寬度；包裹內容情況下（內容的寬度按照內容計算，盒子的寬度再加上padding，border，margin），display=table；

盒子寬度（不包括margin），box-sizing=border-box；縱向margin是會重疊的，大的會把小的「吃掉」；

float：為了「文字環繞效果」（乙個一段文字）；float會有破壞性（破壞了父標籤的原本結構，被設定了float的元素會脫離文件流）;float會有「包裹性」；

清空格（根本原因是由於float會導致節點脫離文件流結構）；float布局網頁；

清楚float：

1）為父元素新增overfloaw：hidden；

2）浮動父元素；

3）在所有浮動元素下方新增clear：both的元素；

4)定義clearfix類，對float元素的父元素應用這一樣式；

.clearfix:after

.clearfix

display：

table：具有包裹性（寬度根據內容而定），也是塊；

table-cell：多列布局；與float:left或是position:absolute屬性盡量不用同用。設定了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性

inline：「流」，寬度和高度都是auto；

轉成「塊」元素------>對inline元素設定float/對inline元素設定position:absolute、fixed/display:block

block:盒子模型；

inline-block：外部看來是「流」，但是自身確實乙個「塊」；能被父容器居中、能設定高度寬度和margin、不會佔一整行

position：static/relative/absolute/fixed

static：（靜態定位）是預設值，即所有的元素如果不設定其他的position值，它的position值就是static，有它跟沒有它一樣；

relative：相對定位（相對於自身位置），會導致自身位置的相對變化，而不會影響其他元素的位置、大小的變化，relative會產生乙個新的定位上下文（子元素有absolute定位）；

absolute：脫離了文件結構，會產生破壞性；具有「包裹性」；具有「跟隨性」；會懸浮在頁面上方；設定了top、left值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位；若想要元素a緊跟在元素b的上方，可通過設定元素b為absolute，然後調整b的margin值來確定（會使inline元素被「塊」化，會使得元素已有的float失效）

fixed：根據瀏覽器確定位置（有「破壞性「）；

4、布局：

三列布局

bootstrapt柵格布局

微博布局

人人網布局

瀑布流布局

5、文字垂直水平居中：

單行垂直居中

多行垂直居中，多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中

使用background這個屬性

.pic_list li

.pic_list li img

使用display：table-cell這個屬性，但是這個屬性不支援margin，所以若想新增margin屬性，還需要在li外面再包裹一層

.pic_list1 li

.pic_list1 li img

css系統學習

系統學習 css

CSS系統學習一（基礎）

CSS系統學習二（基礎）

css系統學習

系統學習 css

CSS系統學習一（基礎）

CSS系統學習二（基礎）

相關推薦