摘要：

前端0基礎到這個時候常用的標簽基本結束，涉及稍微“高級”點的標簽div盒模型

樣式初始化+元素類型轉換+外邊距合并

一、樣式初始化

1. 清除瀏覽器默認樣式,以免造成不必要的兼容問題

2. body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}

3. ol,ul{margin:0;padding:0;list-style:none;}

4. a{text-decoration:none;}

5. img{border:none;} /*清除ie圖片邊框*/

6.*{margin:0;padding:0;}

二.元素類型裝換

(一). 什么是行級元素，什么是塊級元素

塊級元素會占據一行的位置,它后面的元素內容會換行顯示,塊級元素里面可以放任何內容,主要用來布局。

行級元素它只占據他內容所占的位置,其它的內容在他后面顯示，但是行級元素里面不能放塊級元素

1.常見塊級元素

div ? h1-h6 ul li ol p from 等

2.常見行級元素 ? ? ? ? ?等

(二).行塊級元素有什么不同

1、塊級元素會占一行顯示，而行內元素可以在一行并排顯示。

2、行內元素對于以下屬性特殊化

1)設置寬度width 無效；

2)設置高度height 無效 ；

3)設置margin ? ?只有左右margin有效，上下無效。

4)設置padding ?只有左右padding有效，上下無效。

注：這里說的無效，指的是它對其它元素的排列沒有影響。

也就是說，對于設置的margin,padding行內元素文檔流里的上下元素來說，

他們的間距不會因為上下margin或者上下padding而產生間距。

但是就它本身而言，對于其他元素設置的上下margin與padding是有效的。

三).通過樣式控制，行塊級元素可以相互轉換。

display:block：變成塊級元素,還有顯示的意思

display:inline：變成行級元素

display:none：不顯示 , 它(包括它的子元素)將會被隱藏起來

display:inline-block：以行級元素形式排列，以塊級元素樣式顯示

盒子模型外邊距合并原則

1、外邊距合并(垂直方向合并)

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

2、 一個元素在另一個元素里面

當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開),它們的上或下外邊距也會發生合并。

3、當盒子沒有內容

假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并

如果這個外邊距遇到另一個元素的外邊距，它還會發生合并

總結

以上是生活随笔為你收集整理的html标签强制转换位置,王老师html零基础学习笔记第4课——样式初始化+类型转化...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。