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字体大小的值 根据情况来看)