學習前端第三天

html–Day03 樣式初始化 標籤類型及轉換

一、標籤樣式初始化

1.body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
2.ol,ul{margin:0;padding:0;list-style:none;}
3.a{text-decoration:none;}
4.img{border:none;}

css reset 原則：但凡是瀏覽默認的樣式，都不要使用。

---

二、標籤的兩大陣營

塊級標籤：div ul li dl———————–display:block (能設置寬高)
內聯(行內)標籤：span a em————-display:inline(不能設置寬高)

---

三、 塊級標籤特徵

默認display：block

1、沒有寬度時，默認寬度100%、
2、支持寬高
3、獨佔一行 （列展示）——貪婪、霸道
4、支持所有css命令

---

四、 內聯標籤特徵

默認display：block

1、 默認內容撐開寬高
2、不支持寬高
3、 可以繼續跟同類標籤（橫排展示）——友好
4、 不支持上下的margin
5、上下padding只對自身有效（詭異）

問題：

F、不支持margin:auto;
G、空格 回車 被解析

---

五、 標籤類型轉換

display：block 顯示爲塊 能使內聯元素具備塊元素的特性
display：inline 顯示爲內聯 能使塊級元素具備內聯元素的特性

---

六、行內塊級標籤特徵

行內塊級標籤 默認display：inline-block —-如：<img/>

1、塊級可以（橫排展示） ——友好
2、行內標籤支持寬高
3、沒有寬度的時候內容撐開寬度
4、支持margin

問題：

1、標籤間空格 被解析
2、不支持margin:auto;
3、ie6 ie7 不支持塊屬性標籤的inline-block;

---

七、總結

八、text-align 文本水平對齊方式

text-align ：

left -左對齊(默認)
right -右對齊
center -居中對齊