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边界塌陷和父级塌陷的通用写法:

html5 始终以pc端样式 htmlvertical_html5 始终以pc端样式