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