css相關筆記（三）

1.行高是基線到基線之間的距離，

基線到基線之間的距離也等於

上邊距到下邊距之間的距離

所以行高=文字高度

+文字頂線到上邊距的距離(上邊距)

+文字底線到下邊距的距離(下邊距)

2.當行高與父容器的高度相同時,

文字就會垂直居中

3.行高的單位有px em % 純倍數數字

◆px 是具體的大小畫素

◆em 是根據自身字型的大小相乘而來的 (字型倍數)

◆% 是根據自身字型的大小相乘而來的 (字型倍數)

◆純倍數數字是根據自身字型的大小相乘而來的 (字型倍數)

★當父容器中的行高是用px em %時

子容器就算設定了字型大小，

行高就會預設繼承父容器中的行高，

就算子容器的字型大小大於行高也一樣。

☆當父容器中的行高是使用

純倍數數字時子容器如果設定了字型大小

行高會隨著子容器的字型大小而變化，

父容器中的行高會和子容器的行高一致。

■行高不帶單位時父容器隨子容器

帶單位時子容器隨父容器

正常情況下推薦使用px畫素為單位

4.border 邊框屬性的連寫 style屬性值不能少

border:size style color;

border:1px dashed #0f0;

5.當table中設定了邊框，那麼合併邊框時，**與單元格邊框重複的地方會使用**的邊框，如果設定了單元行的邊框，那麼**合併邊框時會忽略**的邊框改用單元行的邊框，但是單元列的邊框依舊還是單元格的邊框，單元行的邊框只在**合併的時候有效果。

6.當table使用了樣式合併邊框時，table標籤中設定cellspacing屬性無效。

7.當你想去元素邊框時推薦使用 border:0 none; 因為相容性更好

8.去掉input標籤獲取焦點時外邊的輪廓，設定outline-style:none;

9.使用label 標籤使用者體驗更好 label for id

10.內外邊距的屬性值設定

◆1個值表示設定上右下左方位相同的屬性值

◆2個值表示設定上下、左右兩個方位的不同的屬性值

◆3個值表示設定上、左右、下三個方位的不同的屬性值

◆4個值表示設定上、右、下、左四個方位不同的屬性值(上右下左順時針)

11.內邊距會撐大盒子，邊框也會使盒子變大

12.使用padding或text-align都可以使在盒子裡面居中，padding讓居中需要使用加減法的方式，padding增加，盒子的width就要減少。

12.盒子的高度=盒子定義的高度+盒子的上下內邊距+盒子的上下邊框，盒子的寬度=盒子定義的寬度+盒子的左右內邊距+盒子的左右邊框，★特殊情況下盒子可能會被文字的行高給撐大。

13.繼承的盒子(包含的盒子、巢狀的盒子、內嵌的盒子)不會因為設定了左右內邊距而被撐大，因為寬度會繼承父容器的，但是當子容器的左右內邊距大於父容器的寬度時，還是會被撐大，父容器不會受影響，如果設定了上下內邊距那就會被撐大，因為高度不會繼承父容器的高度。

14.兩個盒子(兄弟容器)垂直方向上外邊距會合併，但是只限於兩個盒子方向相對，合併外邊距時會選擇大的盒子的外邊距而忽略掉小的盒子的外邊距，當方向相同時就不會合併外邊距了，因為他們不存在重疊的地方，★水平方向外邊距不會合併。

15 兩個盒子(父子容器)垂直方向上外邊距會摺疊(合併),方向相鄰時，摺疊外邊距是會選擇大的外邊距，所以可能會出現bfc。

16.bfc是塊兒級格式上下文，相鄰的兩個容器的外邊距會摺疊，摺疊效果是

◆會忽略掉較小外邊距而使用較大的外邊距

◆當兩個外邊距都為負數時會使用絕對值較大的外邊距而忽略絕對值較小的外邊距

◆當兩個外邊距一正一副時會取他們相加的和作為外邊距

◆17.乙個前端的**：

css相關筆記（三）

筆記 HTML及CSS相關筆記三

css3相關筆記（三）

css3相關筆記（三）

css相關筆記（三）

筆記 HTML及CSS相關筆記 三

css3相關筆記（三）

css3相關筆記（三）

相關推薦

筆記 HTML及CSS相關筆記三