樣式初始化 元素型別轉化 外邊距合併

2021-09-10 19:47:44 字數 866 閱讀 6379

外邊距合併

塊級元素

內聯元素(行內元素)(行級元素 )

內聯塊元素

預設佔據一行

自動換行

支援新增 寬度、高度

可以巢狀任何元素 (不包括p、h1-h6)

支援margin

支援padding(padding 會撐大元素框的總的尺寸)

div、p、h1-h6、ulli、olli、table、form
只佔據內容所佔據的區域

不自動換行

行內元素不能巢狀塊級元素行內元素的margin 上下無效 左右有效

padding 上下無效 左右無效

上下只是對自身有效

a、b、i、del、span
多個空格只解析為乙個空格

display:none    //隱藏元素

display:block //變為塊級元素+顯示

display:inline //變為行內元素

display:inline-block //以行內元素排列 + 以塊級元素顯示

1.解決inline-block的空格

(原因:標籤間的空白解析為乙個空白字元)

當字元size為0時即沒有空白

2.行內元素變為塊級元素也不能巢狀塊級元素(只是以塊級元素顯示)

垂直相遇(包括並列、包含的情況)的兩個盒子會出現外邊距的情況

合併後的高度為兩者中的較大值

解決方法:加邊框、加內邊距

第四章 樣式初始化 元素型別轉換 外邊距合併

一 樣式初始化清除瀏覽器預設樣式,以避免造成不必要的相容性問題。body,dl,dd,p,h1,h2,h3,h4,h5,h6 ol,ul aimg 二 元素型別 塊級元素 單獨佔據一行,其他元素被迫換行顯示。自由設定寬高 margin自由設定 padding自由設定 行級元素 只佔據內容的位置,其他...

樣式初始化

樣式初始化 reset body,h1,h2,h3,h4,h5,h6,p,dl,dd ul,ol a liimg css reset 原則 但凡是瀏覽預設的樣式,都不要使用。父級 後代 後代選擇器 標籤的兩大陣營 塊級標籤 特徵 預設寬度100 div 內聯標籤 特徵 內容撐開寬度 span 塊級標...

04 第四章樣式初始化 元素型別轉換 外邊距合併

1.清除瀏覽器預設樣式,以免造成不必要的相容問題 2.body,dl,dd,p,h1,h2,h3,h4,h5,h6 3.ol,ul 4.a 5.img 清除ie邊框 6.一 什麼是行級元素,什麼是塊級元素 塊級元素會佔據一行的位置,它後面的元素內容會換行顯示,塊級元素裡面可以放任何內容,主要用來布局...