CSS标簽分類、顯示框類型、嵌套規範、溢出隐藏、透明度與手勢、預設樣式、reset

标簽分類

按類型

block : div,p,ul,li,h1…

1,獨占一行

2.支援所有樣式

3.不寫寬的時候，和父元素的寬相同

4.所占區域是一個矩形

inline: span, a ,em ,strong, img…

1.挨在一起的

2.有些樣式不支援，例如:width,height,margin,padding

3.不寫寬的時候，寬度由内容決定

4.所占的區域不一定是矩形

5.内聯标簽之間會有空隙，原因:換行産生的

inline-block:input,select…

1.挨在一起，但是支援寬高

注：布局一般用塊标簽，修飾文本一般用内聯标簽

按内容

flow:流内容

metadata:中繼資料

sectioning:分區

heading:标題

phrasing:措辭

embedded：嵌入的

interactive:互動的

按顯示

替換元素：浏覽器根據元素的标簽和屬性，來決定元素的具體顯示内容

ps:img/input…

非替換元素：将内容直接告訴浏覽器，将其顯示出來

ps：div.h1.p…

顯示框類型

display

block

inline

inline-block

none:不占空間的隐藏(visibility:hidden占空間的隐藏)

标簽嵌套規範

常見标簽組合

ul、li\ol、li

dl、dt、dd

table、tr、td

1.塊能夠嵌套内聯

2.塊大多數能夠嵌套塊

特殊：p标簽中不允許嵌套div

3.内聯标簽不能嵌套塊标簽

特殊：a标簽可以嵌套塊

overflow溢出隐藏

overflow:

visible:預設

hidden：直接隐藏溢出内容

scroll：添加滾動條

auto：内容溢出就轉為scroll,内容未滿就直接顯示

x軸y軸:overflow-x,overflow-y分别針對兩個軸進行設定

透明度與手勢

透明度

opacity:0(透明）~1（不透明）

注意：透明度為0也占據空間，所有的子内容也會透明

rgba()：隻會讓背景透明，内容不會透明

手勢

cursor:手勢(滑鼠樣式）

css預設樣式

有些标簽有預設樣式，有些标簽沒有預設樣式

沒有預設樣式

div,span

有預設樣式(有些預設樣式是有益的，有些是影響開發的）

body -> margin:8px

h1 -> margin:上下21.440px

p -> margin:上下16px

ul -> margin：上下16px padding-left:40px 預設點：list-style:disc

a -> text-decoration:underline;

css 預設樣式reset

*{ margin:0: padding:0}

優點，不用考慮哪些标簽有預設的Margin和padding

缺點：稍微的影響性能

ul{list-style:none}

a{text-decoration:none;color:#999;}

img{display:block}

問題的現象:圖檔和容器底部有一些空隙

内聯元素的對齊方式是按照文字基線對齊的，而不是文字底線對齊的。

修改方式：

img{vertical-align:bottom(底線對齊方式)\baseline(基線對齊方式，預設值);}

寫具體頁面的時候或一個布局效果的時候：
1.寫結構
2.CSS重置樣式
3.寫具體樣式