渡一教育公開課重點筆記之css

1. 主流瀏覽器及內核

瀏覽器         內核

IE             trident

Firefox    Gecko

Google chrome    Webkit/blink(2014年上市)

Safari            Webkit

Opera presto

1. 引入css的三種方式

1）行間樣式

2）頁面css

3）外部css

1. 計算機語言中對同步與異步的解釋

1）同步的：不一樣時執行，與生活中的同步相反

2）異步的：同時執行，與生活中的異步相反

1. 在一個元素上想要添加多個class，在class上寫上class名，每一個class名之間用空格隔開

如<div class=」demo demo1 demo2」></div>

1. *通配符選擇器，可選中全部標籤，包括body標籤，head標籤，html標籤
2. 屬性選擇器：[屬性名/屬性名=」屬性值」]
3. 行間樣式與各個選擇器的優先級：

!important > 行間樣式 > id > class | 屬性選擇器 | 僞類選擇器 > 標籤選擇器 | 僞元素選擇器 > 通配符選擇器

1. Css權重

!important    無窮大

行間樣式 1000

Id 100

class | 屬性選擇器 | 僞類選擇器 10

標籤選擇器 | 僞元素選擇器 1

通配符選擇器 0

1. 計算機中的無窮大是一個定量，即 Infinity + 2  >  Infinity
2. 各權重值之間的進制是256進制
3. Css複雜選擇器

1）父子選擇器/派生選擇器   所用的選擇器之間必須成上下一代的關係，好比父子，爺孫等等  div span em{}

2）直接子元素選擇器  後一個選擇器必須是前一個選擇器的直接子元素，比如真正的父子關係  div > em{}

3）瀏覽器遍歷父子選擇器/派生選擇器的順序是自右向左的

4）並列選擇器   用多個限制條件選中一個元素,這多個限制條件必須是一個元素上面的 div.demo{}  div和.demo中間不能有空格

5）並列選擇器當中若是要用標籤選擇器和class選擇器或id選擇器並列時，標籤選擇器必須放在最前面

6）分組選擇器  每一個元素之間用逗號隔開 div,span,em{}  爲了解決代碼冗餘

7）僞類選擇器  選擇器:hover{} 等

1. 瀏覽器默認字體大小是16px
2. 設置字體的大小等於設置字體的高度
3. font-weight的屬性值有lighter(細體),normal(正常),bold(加粗),bolder(更粗),100-900;字體是否被加粗/變細，加粗/變細程度是多大，取決於字體包
4. font-style 的屬性值有：italic(斜體)等
5. 互聯網最經常使用的字體爲arial
6. 顏色的三種表示方式

1） 顏色名，如red,green,blue

2） 顏色代碼，十六進制顏色代碼（從00---ff）只有當三種的兩位數都重複時才能夠簡化，如：#000000  -->  #000     #00ff44  -->  #0f4

3） 顏色函數，rgb(0-255,0-255,0-255)

1. 特用顏色：transparent  透明色
2. css只有塊註釋（/**/）,沒有行註釋（//）
3. line-height  單行文本所佔高度(行高); 讓單行文本的行高等於你所設置的容器的高度，文本就會在容器內垂直居中，水平居中（text-align:center）
4. text-indent  首行縮進 text-indent:2em則能夠縮進兩個字符
5. 單位講解：

1） px  一個像素只能表明一個顏色點，像素是一種相對單位

2） em  1em = 1 * font-size    它是一個相對單位，相對font-size來講

3） 文字的行高是1.2倍行高，就是文字的行高 = 1.2em

1. text-decoration 的屬性值  none（默認），underline（定義文本下的一條線），overline（定義文本上的一條線），line-through（定義穿過文本下的一條線），blink（定義閃爍的文本），inherit（規定應該從父元素繼承 text-decoration 屬性的值）
2. cursor 光標 經常使用：pointer（小手）
3. css企業開發經驗和習慣

1） 圖片img在設置寬高時，只設置其中的一個，另外一個就會自動拉伸

2） 塊級元素（block），行級元素（Inline），行級塊元素（inline-block）

  

元素	行級元素（內聯元素） display:inline	塊級元素 display:block	行級塊元素 display:inline-block
特色	內容決定元素所佔位置	獨佔一行	內容決定大小
	不能夠經過css改變寬高	能夠經過css改變寬高	能夠改寬高
舉例	Span strong em a del 僞元素	Div p ul li ol form address	img

 

3） 凡是帶有Inline的元素（如inline,inline-block）都有文字特性，這也是當把四張圖片並排放在一塊兒時，中間會有間距的緣由;要想去掉這一間距，能夠把每一個img標籤之間的空格去掉（如：<img src="demo.jpg" alt=""><img src="demo.jpg" alt=""><img src="demo.jpg" alt="">）；

在測試時，可使用margi-left設置負值來調，可是當把項目寫完後，在上線前記得去掉margi-left，由於上線以後，代碼會被壓縮，代碼之間的空格等會被去掉，若是設置了margin-left爲負值，圖片就會被擠壓

4） 在企業開發中，能夠先寫css，再寫html（先編寫功能，再選配功能）

5） 在企業開發中，能夠先對一些標籤進行初始化，去掉系統對標籤的樣式，如能夠寫一個css文檔，用標籤選擇器把ul li 前的小黑點去掉，把a標籤系統的藍色變成黑色，把em標籤的斜體樣式去掉（font-style:normal）；而後把這個css引入html文檔

6） 一個html文檔中能夠引入多個css文檔，Js文檔

7） 在初始化全部標籤時（好比讓margin:0;padding:0），建議用通配符選擇器（*），由於通配符選擇器的權重值爲0，不會對後續的選擇器形成影響

1. 盒子模型

1） 圖解盒子模型

 

2） 內邊距（padding）和外邊距（margin）margin/padding:上,右,下,左

3） 計算一個網頁中的可視化盒子的真實高度和真實寬度時，不能把外邊距（margin）算進去，由於外邊距不是可視化的，給元素設置margin和padding值是%,它是相對於其父元素的寬度

4） body元素的默認的margin值是8像素

1. 定位（層模型）

1）絕對定位（position:absolute）

① 概念：脫離原來的位置進行定位；當一個元素被設置了絕對定位時，它會進入其餘層而且該元素的原來位置會被釋放掉，位於該元素下面的元素就會上去佔據該元素原來的位置（層模型）

② 相對於最近的有定位的父級進行定位，若是沒有，那麼相對於文檔進行定位

2）相對定位（position:relative）

① 概念：保留原來位置進行定位；當一個元素被設置了相對定位時，它會進入其餘層可是該元素依然會佔據原來的位置，不會將其釋放（層模型）

② 相對於它原來的位置進行定位

③ 相對定位最好不要給top和bottom設置百分值，由於瀏覽器的支持性有問題

3）通常在企業開發時，將相對定位設爲參照物，用絕對定位進行定位

4）設置定位值時，通常是由它的上下左右的邊線來講的

5）z-index屬性只在position屬性上有效

6）固定定位（position:fixed）

1. 讓一個元素/容器在文檔/可視區域正中間進行居中的方法

1）在文檔正中間進行居中的代碼

要設置元素的選擇器{

Width:元素的寬度;

Height:元素的高度;

position: absolute;

     top:50%;

     left:50%;

margin-left:-(元素的寬度/2);

Margin-top:-(元素的高度/2);

}

2）在可視區域正中間進行居中的代碼

要設置元素的選擇器{

Width:元素的寬度;

Height:元素的高度;

position: fixed;

     top:50%;

     left:50%;

margin-left:-(元素的寬度/2);

Margin-top:-(元素的高度/2);

}

 

3）圖解讓元素居於正中間的步驟（以居中五環爲例）

 

① position:定位（absolute/fixed）;top:50%;left:50%;

 

 

 

 

② margin-left:-(元素寬度/2);margin-top:-(元素高度/2);

 

 

 

1. 兩欄佈局：讓兩個div元素在同一行（讓一個元素設置絕對定位，給另外一個元素設置margin，讓它被壓住的部分出來；注意先寫要被設置絕對定位的那個元素）
2. 兩個經典bug

1） margin塌陷：對於父子嵌套的元素，垂直方向的margin二者會粘合在一塊兒，二者之中取最大的那個margin，做用於兩個元素

解決方法：①  給父元素的頂部設置一個邊框（不能使用）

②  BFC（塊級格式化上下文）能夠改變盒子的語法規則

如何觸發一個盒子的bfc：（給父級設）

① position:absolute;

② display:inline-block;

③ float:left/right;

④ overflow:hidden;

2） margin合併：對於兄弟元素來講，垂直方向上的margin值是合併的，二者之間取最大的margin值，二者相同取其中的一個

解決方法：BFC  （給兩個元素設置一個父級，在父級的css裏面寫上觸發bfc方法中的其中一種，而後把兩個兄弟元素（或其中一個元素）放在父級裏面，這樣他們垂直方向上的margin值就變成累加的了）

很差處：爲了解決這個bug，咱們就要去改動html結構，這在企業開發中是絕對禁止的，因此這個bug能夠不解決

1. 企業開發中嚴禁爲了改一個bug而去改動html結構
2. 浮動模型

1）浮動元素產生了浮動流

① 全部產生了浮動流的元素，塊級元素看不到他們（受影響）

② 產生了bfc的元素和文本類屬性（inline）的元素以及文本都能看到浮動元素（不受影響）

2）清除浮動（clear:both/left/right）

① 要想讓一個浮動元素下面的元素不受浮動流影響，能夠給這個元素設置一個清除浮動

② 能清除浮動的元素必須是塊級元素

③ 要想用一個盒子包住浮動元素，能夠在全部浮動元素的最下面放一個p標籤，給這個p標籤設置一個清除浮動（開發中不能使用）

④ 要想解決②中的問題，能夠給這些浮動元素的父級設置一個後面的僞元素，而且把這個僞元素改成塊級元素（display:block）,再到裏面進行清除浮動操做（clear:both）

⑤ 要想解決②中的問題，還能夠給父級元素觸發bfc

1. 僞元素

1）僞元素存在於任意一個元素當中

2）僞元素天生是一個行級元素，能夠經過display將其改成塊級元素或者行級塊元素

3）僞元素示例代碼

該元素::before/after{

content:」內容」;

}

1. 對一個元素設置了position:absolute或者float:left/right；系統會打內部把元素轉換成inline-block
2. 文字溢出處理（溢出容器，要打點展現）

1）單行文本

處理方法：給要處理的文字設置三件套代碼

white-space:nowrap;    不要讓文字換行

overflow:hidden;     隱藏溢出文本

text-overflow:ellipsis;   對溢出的隱藏文本打點處理

2）多行文本

處理方法：對溢出部分作隱藏處理（overflow:hidden）

1. 背景圖片處理

1）background-image:url(圖片位置);    //引入圖片

2）background-size: 圖片寬度,圖片高度;    //設置圖片大小

3）background-repeat: no-repeat;    //設置圖片是否平鋪

4）background-position: x,y;     //設置圖片位置（像素值,top,left,center,百分值）

1. 當網速很低時，瀏覽器會屏蔽掉css和js
2. 圖片如何很好的去代替文字:

1）首先給元素加上被圖片代替掉的文字；而後用css把圖片引進，設置；接下來對該元素加上的文字設置css：首先設置首行縮進（text-indent）,讓它的值超過元素的寬度；接下來，給文字設置（white-space:nowrap; ），讓文字不要換行；最後，設置（overflow:hidden;）讓溢出文字隱藏。這樣的話，當網速很差時，css被屏蔽了，文字就會被顯示出來，正常狀況下文字不會出現，不會影響其基本功能。

2）首先給元素加上被圖片代替掉的文字；而後用css把圖片引進，設置；接下來對該元素加上的文字設置css：首先把容器的高度設置爲0；接下來設置padding-top爲容器原高度，這時文字就會被擠到下面去；最後，設置overflow:hidden;將文字隱藏就能夠了

1. 企業開發相關規定

1）行級元素只能嵌套行級元素

2）塊級元素能夠嵌套任何元素，可是p標籤裏面絕對不能嵌套塊級元素

3）a標籤裏面不能嵌套a標籤

1. 文本類元素：inline,inline-block (凡是帶有inline的元素都有文本的特性)
2. 一個行級塊元素中若是有文字，那麼外面的文字會與其文字底對齊
3. vertical-align 能夠調整垂直方向的文字位置（設置文字垂直對齊方式）

持續更新中.........