列表内容

1、无序列表--ul

　　1）内部必须有子标签<li></li>

　　2）ul天生自带内边距

2、有序列表--ol

　　1）内部必须有子标签<li></li>

　　2）天生自带内边距

　ol和ul的区别之处就在于前面的符号不一样，要改ol前的符号用属性type修改，要改ul前的符号用list-style修改

3、自定义列表--di

　　dt是小标题，dd是内容。此列表能做二级菜单、导航。

4、margin和padding问题探讨

　　margin设一个值时，说明标签上下左右都一样，

　　margin设两个值时，第一个值代表上下大小，第二个值代表左右大小，

　　margin设三个值时，第一个值代表上、第二个值代表左右、第三个值代表下，

　　margin设四个值时，依次代表上、右、下、左。

　　padding同上述一样。

　　一个元素实际占用的空间大小？

　　　　通过分析我们发现一个元素实际占用的空间（区域）是

　　　　　　width+两个border+两个padding+两个margin

　　一个元素的实际高度？

　　　　height+padding-top+padding-bottom+两个border

　　什么是margin的塌陷现象？

　　　相邻两个块级元素同时设置margin时，他们之间的外边距不会叠加，会取最大的，这就叫margin塌陷。

5、根据标签在设置背景是有的会独占一行，有的会随着内容的递减而改变自己空间的大小标签可以分为：

　　块级标签：会独占一行无论内容多少。  p、h1~h6、div、ul、li、ol、dl等

　　内敛标签（行级）：根据内容多少占用空间大小。span、img、i、b、a、em、icon等

 

　　　二者区别

 

　　　　块级：1，块级元素会独占一行

　　　　　　　2，块级可以设置宽高

 

　　　　内敛：1，内敛不会独占一行

 

　　　　　　　2，内敛不可以设置宽高

 

　　　　　　　3，内敛元素的margin上下不起作用了

 

　　　二者转换

 

　　　　块级转行级：给块级元素添加属性display:inline; display (显示 ) inline( 行)

 

　　　　行级转块级：给行级元素添加属性display:block;    block块

 

　　　　行级块元素：给需要的元素添加属性 display:inline-block;

 

　　　　　(可以设置宽高了，可以在一行了，margin可以随便使用了)

 

备注

 

　　line-height 行高  设置字体的垂直位置

 

　　line-height的值和height的值相同文本就上下居中

 

拓展

　　line-height:50px/2;

 

　　当是2的时候  line-height的值是2*font-size的大小==36px