列表应用

　　body的高是自适应 （auto）

　　所以body{

　　　　　　　　background size:100%;

　　　　　　}                                             只有一个值 给body设置值的时候要留心height的问题

　　并级选择器   a,b{

　　　　　　　　　　color:green;

　　　　　　　　}

　　　　　　　　　　　　　　意思是a 和b 颜色为绿色

　　<p>kkkkkkkkk</p> 注意如果设置边框那么k会出边框  不会自动换行 

　　因为浏览器在解析k的时候没有空格 所以他认为这是一个单词 ，所以不会换行 中文没有这种情况

　　列表分3类    无序列表 　　有序列表 　　自定义列表

　　1.无序列表ul  

　　有两个需要注意的点  第一：内部必须有子标签<li></li>

　　　　　　　　　　　　第二：天生自带内外边距  （ p 也是天生自带内外边距）

　　　提一下* 通配符选择器  有优势也有劣势  

　　优势 ：  省事    劣势 ： 太省事加大浏览器负荷

　　列表样式属性

　　list-style:none/circle/disc/square

　　　　　　空       空心圆    实心圆       正方形

　　这个的作用是改变列表前的形状

　　有序列表  ol 

　　1.必须是内部的子标签

　　2.天生自带外边距 

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

　　无序列表 想改变前面的符号只能用style属性  有序列表 想改变前面的属性只能在自身标签改 必须用type属性

　　自定义列表 dl

　　<dl>

　　　　<dt> </dt>     小标题

　　　　<dd></dd>     内容

　　　　<dd></dd>

　　</dl>

　　列表能做什么 二级菜单  做导航

　 margin 和 padding 问题的探讨

　　margin：200px；  说明 top  left  right  bottom  都是200px

　　margin: 200px 100px;        说明上下是200px  左右是100px

　　margin: 200px 100px 50px;   说明 上是200px  左右是100px  下是50px

　　margin:  200px  100px 50px 25px; 说明 上是200px 右是100px 下是50px 左是25px  顺时针旋转的顺序

　　　　padding 同上

　　通过分析发现一个元素实际占用的空间

　　宽：  width+border  x   2 +padding  x  2+margin  x  2

　　高：  height+border  x2  +padding-top + padding-bottom 

　　margin的塌陷现象 

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

　　有的标签设置背景时会独占一行，       （块级标签）有的会随内容的增加而改变这种现象叫内敛标签

　　

　　块级有<P>  <H1>  <H6>  <DIV>  <UL>  <LI>  <OL>  <DL>等

　　内敛标签有<span> <img/>  <i>  <b>  <a>  <em>  <icon>矢量标签

　　

　区别 

块级元素会独占一行可以设置宽高

内敛不会独占一行不能设置宽高 margin也不起作用  但可以将内容填满

所以我们要块级和内敛标签进行转换  需要用到display属性

块转行  display:inline

行转块  display:block

块和行的融合 display:inline-block  (这个的好处是将块和行的优点结合起来)

　　行高

line-height：50px; 设置文本字体的垂直位置

当行高的值与设置height的值一致时 文本便可上下居中

属性值的3种方式 50px/2/50%    (解释下2的意思  他的位置是2x字体大小的值   根据情况来看)