web前端的恐怖之旅（4）：样式初始化_元素

一，样式初始化

---

1. 所有样式初始化（由于选中页面中所有标签，有点浪费性能）

   *{margin:0px; padding:0px;}		/*把所有的样式初始化，方便布局*/
   body, ul, ol, ol, p, h1, h2...{margin:0px; padding:0px;}  /*把有样式的初始化*/`
   

2. 列表的样式初始化

   ul, ol{list-style:none;}		/初始化列表里面的样式/
   

3. 下划线初始化

   a{text-decoration:none;}		/*消除所有a标签的下划线*/
   

4. 自定义样式初始化（还可以自定义很多样式的初始化类型）

   *{padding: 0; margin:0;}
   ul, ol{list-style:none;}
   a{text-decoration:none;}
   img{border:0;}
   

二，元素分类

---

1. 块级标签（block） ==> 布局 eg：（div, p, h1~h6, ul, lo, ol, dl, dt, dd, form）

   1），独占一行

   2），支持设置宽高

   • 不设置宽度时，宽度时父元素内容区域的宽度
   • 不设置高度时， 高度由内容撑开
   • 设置宽度和高度时，高度和宽度不能撑开

   3），margin，padding 四个方向支持 margin:auto支持

2. 内敛标签/行内标签（inline） eg：（span, a, b, em, strong, img, input）

   1），友好的横排显示（和别的行内元素）

   2），不支持设置宽度和高度，完全由内容撑开宽高

   3），margin只支持左右 不支持上下 margin:auto不支持

   4），padding支持显示 但是上下的padding撑大的部分对别的元素没有影响
   

   5），行内元素和行内元素之间会产生空格（包括标签之间的空格，换行）
   解决办法
   1，<span>我是</span><span>我是</span>
   2， 给body标签一个设置字体大小为0，再用他自己的选择器设置字体

   6），存在基线对其问题

三，元素类型转换

---

1. diaplay:block ==> display:inline 块级变成行内（不需要）

2. diaplay:inline ==> display:block 行内变成块级（像a标签，需要扩大点击范围）

3. 行内块/内联块元素（inline-block）解决内联元素支持宽高问题。 eg：（img，input）

   1），能够横排显示 => 行内

   2），支持宽高 => 块级

   3），支持margin四个方向 margin:auto不支持

   4），支持padding四个方向

   5），产生空格

   6），基线对齐问题

四，元素嵌套规则

---

1. 块级标签：可以嵌套其他任意元素
   • h1~h6 不要包块级标签
   • p 不要套块级 可以套行内 行内块
   • ul>li ol>li ol>dt+dd 之间 不能套其他任意元素
2. 行内标签：不能嵌套块级标签
   a 可以套块级 （方便，但是原则上不行）

----------------------------不管是块级变成行内块，还是行内变成行内块，嵌套规则如上-----------------------------