新内容

一、列表

　列表分为无序列表、有序列表和自定义列表

　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>

　　　　*注：ol和ul的不同之处就在于前面符号的区别

　　3、自定义列表 <dl></dl>

　　　　构成：

　　　　　　　<dl>

　　　　　　　</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

列表、margin和padding的探讨、标签的分类