01-元素类型及转换

元素类型
块状元素
div p h1-h6 ul li ol dl dt dd form
1. 可以设置宽高
2. 独占一行
3. 在文档流中从上往下排
4. 可以作为容器放置其他元素
!特殊的块状元素 p不能嵌套块状元素 h1-h6不能嵌套标题类的标签
行内元素 内联元素
span a s del u sup sub strong b em i
1. 不可以设置宽高
2. 不独占一行
3. 在文档流中从左到右排
行内块元素 内联块元素
img input textarea(多行文本域) select(下拉框)
1. 可以设置宽高
2. 不独占一行
!给行内块元素转行内是无效的

元素类型转换
display: 设置元素类型
block 块元素
inline 行内元素
inline-block 行内块元素
none 让元素消失 不占据空间
list-item 列表的项目符号
!给行内块元素转行内是无效的

02-导航

静态导航
导航的宽度固定不动，适用于导航数量少的地方， 公司官网，个人博客
给a设置宽和高，保证a的点击区域变大 ，
li只做浮动就可以
hover加给li

  1. 动态导航<br />    导航的数量不固定，宽度不固定，适用于动态列表<br />     li标签宽度不写， 由内容+左右padding撑开<br />     导航的hover加给li标签

03-文本垂直对齐方式

vertical-align 元素的垂直对齐方式 (只能用在行内 行内块元素)
baseline 默认 基线对齐
top 和行内最高的元素顶部对齐
bottom 和行内最高的元素底部对齐
middle 元素的中心和父元素的基线对齐
?去掉图片下方有3-5px的间隙
原因： 图片是一个行内块元素，具有基线对齐的效果
思路：
- 图片转为其他类型的元素
- 改变基线对齐的效果
- 去掉基线和底线之间的间距
解决
- 图片转为块元素 display: block
- 图片设置 vertical-align: top/middle/bottom 推荐
- 给父元素设置font-size: 0 （让基线和底线之间的间距为0）
- 给父元素设置line-height: 0 （让基线和底线的间距为0）