一、元素类型
(一) 块级元素
特点： (1)默认占一整行。
即使设置了宽度，右边多余的部分也会用margin进行填充。
(2) 可以设置宽高
(3) 块级元素可以嵌套所有的行内元素以及部分的块级元素
错误： p>p p>div
(4)大部分的块级元素都拥有默认的margin或padding，除了div、li…
应用场景： 怎么实现块级元素在父容器里水平居中？
给该块级元素｛margin:0 auto;｝
总结：body、h1-h6、p、列表ul>li ol>li dl>dt+dd、form
(二) 行内元素
特点：（1）一行显示多个
（2）宽高由内容决定，不能设置宽高
（3）行内元素也遵循盒模型，但是设置上下的padding或margin无效
应用：行内元素如何实现在容器中水平居中呢？
给其父容器添加text-align:center;
总结：加粗、倾斜、a、span、img、input、textarea、label
二.元素类型的转换display
inline 转换成行内元素
block 转换成块级元素
list-item 转换成列表项 (li)
inline-block 转换成行内块级元素
行内块级元素 行内可置换元素（由元素标签名及属性，决定最终的显示效果）
（1）一行显示多个 （2）可以设置宽高 **img input textarea**5.none 隐藏元素，不占位置
行内块级元素与浮动的区别:
1.两个行内块级元素之间存在空格，会在页面中存在一条缝隙。
解决办法：（1）将元素之间的空格删除
（2）给其父元素设置｛font-size:0;｝
2.行内元素都存在垂直方向基线对齐的问题
解决办法: 设置vertical-align 属性设置元素的垂直对齐方式
| baseline | 默认。元素放置在父元素的基线上。 |
|---|---|
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
导航条做法
ul{width height border padding}
li{float;margin;}
a{display:block;width;height;border;文本居中；文字大小颜色}
li:hover
注意事项：若父元素与第一个子元素存在上间距，最好给父元素加padding-top。若子元素或父元素浮动了，则可以给子元素添加margin-top。
设置一个元素在一个容器中垂直居中
1.定位
{position:fixd;left:50%;top:50%; margin: - 自身高度宽度一半}
2.利用行内元素中线对齐
三个条件：
1：必须给容器（父元素）加上text-align:center;
2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
3：在当前元素的后面（没有回车）加上同级元素span;并对span进行
{vertical-align:middle;width:0;height:100%;display:inline-block}