列表
一.无序列表ul
1. 内部必须要有子标签<li></li> 2. ul天生自带内边距 还有一个 p标签
并集选择器
body ，ul ，p用逗号隔开
*选择器有好处也有弊端
好处就是省事，弊端就是因为省事加大浏览器的负荷 解决办法 按需选择
list-style样式属性去除列表前的符号
ul{
border：1px solid red;
list-style:none;
}
list-style的属性值circle（空心圆）disc（实心圆）square（正方形）none（空）
二.有序列表ol
1.内部必须要有子标签<li></li> 2.天生自带内外边距
ol和ul不同之处是就在前面符号的区别 <ol type="A">
三.自定义列表dl
<dl> （自定义内容）
<dt></dt> （ 小标题）
<dd></dd> （ 内容）
</dl>
列表做事么？ 做二级菜单做导航
四. margin和padding问题的探讨
margin
margin：200px设置一个值说明top：right bottom left都是200px
margin：200px；设置两个值上下是200px左右是100px
margin：200px 50px 100px；设置三个值上是200px左右是50px下是100px
margin：200px 50px 100px 50px ;设置四个值上是200px右是50px下是100px左是50px
padding同上
实际占用的空间大小
通过分析发现一个元素实际占用的空间是width+border*2+padding*2+margin*2
一个元素的实际高度
实际个高度=height+padding-top+bottom+2*border
margin的塌陷是现象是什么？
相邻的两个块级元素同时设定他们的外边距不会叠加会去最大的，这种现象叫margin塌陷
五.有的标签设置背景会独占一行，还有的会随着内容的增减而改变自己的空间大小
根据以上分析现象有分 标签 块级和内敛 块级标签会独占一行无论多少内容 内敛标签（行级标签）根据内容多少占据空间大小
块级p h1-h6 div ul li dl 等
内敛span img i b a em icon（矢量）
两者的区别
块级
1.块级元素会独占一行
2.块级可以设置宽高
内敛
1.内敛不会独占一行
2.内敛不可以设置宽高
3.内敛元素的margin上下不起作用
转换
1. 块级转行级 给块级元素添加属性display：inline； display显示 inline行
2.行级转块级 给行级元素添加属性display：block； block块
3.行级、块转元素 给需要的元素添加属性display：inline-block
（可以设置宽高了 可以在一行了 margin）
备注：
line-height行高 设置字体的垂直位置
line-height的值和height的值相同 文本就上下居中
拓展：
line-height：px/2；
当是2的时候line-height的值是2*font-size