技術標籤：前端htmlcss

1，主流瀏覽器及核心
瀏覽器 核心

IE trident

Firefox Gecko

Google chrome Webkit/blink(2014年上市)

Safari Webkit

Opera presto

引入css的三種方式
1）行間樣式

2）頁面css

3）外部css

計算機語言中對同步與非同步的解釋
1）同步的：不同時執行，與生活中的同步相反

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

在一個元素上想要新增多個class，在class上寫上class名，每個class名之間用空格隔開
如<div class=”demo demo1 demo2”>

*萬用字元選擇器，可選中所有標籤，包括body標籤，head標籤，html標籤
屬性選擇器：[屬性名/屬性名=”屬性值”]
行間樣式與各個選擇器的優先順序：
!important > 行間樣式 > id > class | 屬性選擇器 | 偽類選擇器 > 標籤選擇器 | 偽元素選擇器 > 萬用字元選擇器

Css權重
!important 無窮大

行間樣式 1000

Id 100

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

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

萬用字元選擇器 0

計算機中的無窮大是一個定量，即 Infinity + 2 > Infinity
各權重值之間的進位制是256進位制

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

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

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

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

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

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

瀏覽器預設字型大小是16px
設定字型的大小等於設定字型的高度
font-weight的屬性值有lighter(細體),normal(正常),bold(加粗),bolder(更粗),100-900;字型是否被加粗/變細，加粗/變細程度是多大，取決於字型包
font-style 的屬性值有：italic(斜體)等
網際網路最常用的字型為arial
顏色的三種表示方式
1） 顏色名，如red,green,blue

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

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

特用顏色：transparent 透明色
css只有塊註釋（/**/）,沒有行註釋（//）
line-height 單行文字所佔高度(行高); 讓單行文字的行高等於你所設定的容器的高度，文字就會在容器內垂直居中，水平居中（text-align:center）
text-indent 首行縮排 text-indent:2em則可以縮排兩個字元
單位講解：
1） px 一個畫素只能代表一個顏色點，畫素是一種相對單位

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

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

text-decoration 的屬性值 none（預設），underline（定義文字下的一條線），overline（定義文字上的一條線），line-through（定義穿過文字下的一條線），blink（定義閃爍的文字），inherit（規定應該從父元素繼承 text-decoration 屬性的值）
cursor 游標 常用：pointer（小手）
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標籤之間的空格去掉（如：）；

在測試時，可以使用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） 圖解盒子模型

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

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

4） body元素的預設的margin值是8畫素

定位（層模型）
1）絕對定位（position:absolute）

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

② 相對於最近的有定位的父級進行定位，如果沒有，那麼相對於文件進行定位

2）相對定位（position:relative）

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

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

③ 相對定位最好不要給top和bottom設定百分值，因為瀏覽器的支援性有問題

3）一般在企業開發時，將相對定位設為參照物，用絕對定位進行定位

4）設定定位值時，一般是由它的上下左右的邊線來說的

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

6）固定定位（position:fixed）

讓一個元素/容器在文件/可視區域正中間進行居中的方法
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);

兩欄佈局：讓兩個div元素在同一行（讓一個元素設定絕對定位，給另一個元素設定margin，讓它被壓住的部分出來；注意先寫要被設定絕對定位的那個元素）
兩個經典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可以不解決

企業開發中嚴禁為了改一個bug而去改動html結構
浮動模型
1）浮動元素產生了浮動流

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

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

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

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

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

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

④ 要想解決②中的問題，可以給這些浮動元素的父級設定一個後面的偽元素，並且把這個偽元素改為塊級元素（display:block）,再到裡面進行清除浮動操作（clear:both）

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

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

2）偽元素天生是一個行級元素，可以通過display將其改為塊級元素或者行級塊元素

3）偽元素示例程式碼

該元素::before/after{

content:”內容”;

}

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

處理方法：給要處理的文字設定三件套程式碼

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

overflow:hidden; 隱藏溢位文字

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

2）多行文字

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

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

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

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

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

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

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

企業開發相關規定
1）行級元素只能巢狀行級元素

2）塊級元素可以巢狀任何元素，但是p標籤裡面絕對不能巢狀塊級元素

3）a標籤裡面不能巢狀a標籤

文字類元素：inline,inline-block (凡是帶有inline的元素都有文字的特性)
一個行級塊元素中如果有文字，那麼外面的文字會與其文字底對齊
vertical-align 可以調整垂直方向的文字位置（設定文字垂直對齊方式）