html之vertical-align，a标签、解决塌陷通用写法

vertical-align

<div class="">
小黄人：<img src="红烧肉.jpg" alt="" height="200px" width="100px" class="text_img">
</div>

.text_img{
vertical-align: -100px;
}

再谈a标签

图片背景设置

.cc{
width: 100%;
height: 100px;
background: url("红烧肉.jpg") no-repeat center center;
}

<div class="cc"></div>

center center 指距离上面和左面的距离！可以只有一个center，背景图片显示不全，可以调整图片的位置

display

none：此时标签不占空间，后面的元素会占据位置，而visibility占位置

inline

block

inline-block：使块级标签有内联的属性

margin的父级塌陷

如果父级标签没有padding、没有content、没有border 就会往上找父级的父级依次去找，解决方案，overflow：hidden

.clearfix:before{
content:'';
display:table;
}

overflow：auto、scroll

清除浮动，clear：both

元素边加载边渲染？？？

浮动元素不会覆盖内容

.clearfix:after{
content:'';
clear:both;
display:block;
}

position

static(默认)

fixed，可以设置top、bottom、left、right，半脱离文档流，定位时相对于窗体的位置

relative，正常文档流，参照物相对于自己，原来的位置还在。

absolute，脱离文档流，参照物为已经定位的父标签，正常文档流元素会覆盖掉原来的位置。