樣式初始化

2021-08-10 20:27:11 字數 1873 閱讀 9795

樣式初始化(reset):

body,h1,h2,h3,h4,h5,h6,p,dl,dd

ul,ol a

liimg

css reset 原則:但凡是瀏覽預設的樣式,都不要使用。

父級 後代{} 後代選擇器

標籤的兩大陣營:

塊級標籤 特徵:預設寬度100%; div

內聯標籤 特徵:內容撐開寬度; span

塊級標籤 display:block; (

* address - 位址* blockquote - 塊引用* center - 舉中對齊塊* dir - 目錄列表

* div - 常用塊級容易,也是css layout的主要標籤* dl - 定義列表* fieldset - form控制組

* form - 互動表單* h1 - 大標題* h2 - 副標題* h3 - 3級標題* h4 - 4級標題* h5 - 5級標題

* h6 - 6級標題* hr - 水平分隔線* isindex - input prompt* menu - 選單列表

* noframes - frames可選內容,(對於不支援frame的瀏覽器顯示此區塊內容

* noscript - )可選指令碼內容(對於不支援script的瀏覽器顯示此內容)

* ol - 排序表單* p - 段落* pre - 格式化文字* table - *** ul - 非排序列表)

特徵:

a 預設寬度100%

b 獨佔一行 ----霸道

c 可以設定寬高

d 支援所有的css

內聯標籤 display:inline(

* a - 錨* abbr - 縮寫* acronym - 首字

* b - 粗體(不推薦)* bdo - bidi override* big - 大字型* br - 換行* cite - 引用

* code - 計算機**(在引用原始碼的時候需要)* dfn - 定義字段* em - 強調* i - 斜體

* font - 字型設定(不推薦)* img - * input - 輸入框* kbd - 定義鍵盤文字

* label - **標籤* q - 短引用* s - 中劃線(不推薦)* samp - 定義範例計算機**

* select - 專案選擇* small - 小字型文字* strike - 中劃線* textarea - 多行文字輸入框

* span - 常用內聯容器,定義文字內區塊* strong - 粗體強調* sub - 下標

* sup - 上標* tt - 電傳文字* u - 下劃線* var - 定義變數 )

特徵:a 內容撐開寬度

b 橫排顯示 ----友好

c 不支援寬高

d 不支援垂直margin

e 上下padding只對自身有效(詭異)

問題:不支援margin auto;

內聯標籤與內聯標籤之間會有間隙(回車和空格會被解析)

display 顯示型別:

block 塊 使元素具備內聯元素的特性

inline 內聯 使元素具備塊元素的特性

inline-block 使元素具備塊及內聯元素的特性

none 不顯示

inline-block 特徵:

a 預設內容撐開寬度

b 橫排顯示 ----友好

c 支援寬高

d 支援margin,padding

問題:

e 不支援margin:auto

f 回車和空格會被解析

text-align文字水平對齊方式

left 左對齊

right 右對齊

center 居中對齊

(對也有效)

對子級inline及inline-block元素有效

CSS初始化樣式

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,selectbodyaa hoveremliimgtablep body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,...

CSS初始化樣式

css為什麼要初始化?建站老手都知道,這是為了考慮到瀏覽器的相容問題,其實不同瀏覽器對有些標籤的預設值是不同的,如果沒對css初始化往往會出現瀏覽器之間的頁面差異。當然,初始化樣式會對seo有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。body,ol,ul,h1,h2,h3,h4,...

CSS樣式初始化

css樣式初始化原因 不同瀏覽器對每種的標籤都有預設的樣式,大部分瀏覽器的預設樣式還有點區別。所以為了保證 讓所有的標籤的預設樣式清零,也就是重置,以便於我們後續的開發和管理,一般都會在 一開始 對所有標籤做一下樣式的 重置操作。比如 body 標籤有預設的margin 8px。ul標籤 有預設的l...