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

vertical-align

图片和文字的对齐方式：middle，top，bottom，或者数字

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

注意：要调整图片，使图片对准文字的基线。如果用数字会精准一些，正数向下移动，负数向上移动~

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

再谈a标签

a标签有自己的样式，如果需要改动a标签，需要精准定位到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，脱离文档流，参照物为已经定位的父标签，正常文档流元素会覆盖掉原来的位置。

解决margin边界塌陷和父级塌陷的通用写法：