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

一、列表

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

　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