- A+
一、元素类型
css标准文档流：默认的网页从左到右，从上到下的排列方式显示出网页效果
类型：
1.块级元素：（div,p,table……）
a.独占一行
b.可以设置宽度和高度
c.可以设置左右居中（整个块的位置），根据左右外边距进行设置（margin:auto/align:center）
2.行内元素：（a,span,label……）
a.默认排在一行，除非被挤下去
b.不能设置宽高（大小只由内容决定）
c.如果想实现左右居中，必须在其父类的块元素中设置text-align:center.
d.内边距有效果，但上下的paddding不会撑开外面的元素，不被父类div认可
e.margin左右有效果，上下无效果
3. 行内块元素：
a.默认排在一行（img……）
b.可以设置宽度和高度（可以设置标签，也可以只由内容决定）
c.居中参考行内元素的操作
d.padding和margin遵循盒子模型
4.他们之间的相互转换，通过属性display来实现
display：none（隐藏）block（设置为块元素）inline（设置为行内元素）inline-block（行内块元素）
二、布局：
1.浮动：float
代码>float:left（right）;
a.元素浮动后，会脱离（丢失）标准文档流，后面的元素会抢占他的位置
b.设置浮动的元素，不能覆盖前面也设置了浮动属性元素的上面，他们按照类似行内元素的形式排列在一行（不等同于行内元素的排列，例如br不能让他们换行）
c.浮动元素不会覆盖住非浮动元素的内容,但是当非浮动元素占据浮动元素原有位置后，为了内容不被遮盖，非浮动元素自身的行距会自动扩大，有可能出现设定的宽高所形成的盒子抢占了浮动元素的位 置，也因此被浮动元素所覆盖了，而内容为了不被遮挡而留在浮动元素的外面
d.如果对当前元素设置clear:both;会导致其承认其他任意元素的非浮动性（但是在其他任意元素的视角中，浮动元素仍然为浮动元素），无论其本身是否浮动，都没有影响
2.定位：position
(偏移量：相对目标位置的移动距离，类似于坐标，可以通过：top，bottom，left，right进行偏移，进而移动元素的位置)
(1)相对定位(relative)
a.top：让原位置在移动后的位置上方，距离x的偏移量（其他也类似）
b.移动后，原位置不会被其他元素抢占，即不会丢失文档流
c.即使移动元素是浮动元素，仍然能够根据原位置进行移动（原位置即是该元素未移动前所在位子，原位置改变，移动后的元素位置也会改变）
d.目标是原位置（元素本身）
(2)绝对定位(absolute)
a.元素会脱离文档流
b.目标是设置了定位属性的父标签，如果父类没有，则继续向上找，直到body(body就算没有设置position，也可以成为定位目标)
c.top等移动属性，同样是相对距离（同相对定位中的a）
d.元素的层级升高，若与其他元素重叠，则会覆盖被重叠元素
(3)固定定位(fixed)
a.脱离文档流
b.目标是整个可视的网页窗口
c.top等移动属性，同样是相对距离（同相对定位中的a）
d.元素的层级升高，若与其他元素重叠，则会覆盖被重叠元素
