一、列表
列表分为无序列表、有序列表和自定义列表
1、无序列表 <ul></ul>
1)、内部必须有子标签，<li></li>
2)、ul天生自带内外边距，还有一个p标签
a、除去内外边距用margin：0； padding：0；
b、除去前面列表的符号，用样式属性：list-style
ul{
border：1px； solid； red；
list-style：none；
}
*注 list-style的属性值：circle（空心圆）、disc（实心圆）、square（正方形）、none（空）
2、有序列表 <ol></ol>
1)、内部必须有子标签 <li></li>
2)、天生自带内外边距
有序列表要改变前面的符号，用属性标签type修饰
<ol type="A">
<li></li>
</ol>
*注：ol和ul的不同之处就在于前面符号的区别
3、自定义列表 <dl></dl>
构成：
<dl>
<dt></dt>
<dd></dd>
</dl>
*注：dl （自定义列表）、dt（小标题）、dd（内容）
二、Margin和Padding的探讨
1、探讨
1)、margin：200px； 设置一个值，说明top、bottom、left、right都是200px
2)、margin：200px 100px； 设置二个值，说明top、bottom是200px，left、right是100px
3)、margin：200px 50px 200px； 设置三个值，说明top是200px，left、right是50px，bottom是200px
4)、margin：200px 50px 100px 50px； 设置四个值，说明top是200px，left是50px，bottom是100px，right是50px
padding 同上
2、实际占用空间
1)、通过分析我们发现，一个元素实际占用空间是
width+border*2+padding*2+margin*2
2)、一个标签元素的实际高度
实际高度=height+padding-top+padding-bottom+border*2
3、margin的塌陷现象是什么？
相邻两个块级元素同时设置margin时，他们之间的外边距不会叠加，会取最大值，这中现象叫margin塌陷。
三、标签的分类
有的标签设置背景时，会独占一行；还有的会随着内容的增减而改变自己的空间大小
1、分类
根据以上现象，标签又分为块级标签和内敛标签（行级标签）
块级标签：会独占一行
块级标签有：p，h1-h2，div，ul，ol，dl，li
内敛标签：随着内容的变化而变化
内敛标签有：span，img，i，b，a，em（失量标签）
2、二者的区别
快级：1)、块级元素会独占一行
2)、块级可以设置宽高
内敛：1)、内敛不会独占一行
2)、内敛不可以设置宽高
3)、内敛元素的margin不起作用
3、二者的转换
1)、块级转行级
给块级元素添加属性：display: inline; （display 显示 line 行 ）
2)、行级转块级
给行级元素添加属性：display：blank； （blank 块）
3)、行级块元素
给需要的元素添加属性：display：inline-blank；
（好处：可以设置宽高；可以在一行；margin可以随便使用了）
*注：line-height 行高 可以设置字体的位置
line-height的值和height的值相同，文本就上下居中
拓展：line-height：50px/2/百分比；
当是2的时候，line-height的值是2*font-size的大小=36px