图片的居中和bug"/>
图片的居中和bug
1 图片的居中
<style>
.a{
width: 180px;
height: 80px;
background-color: pink;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 80px;
font-size: 0;
}
.a img{
vertical-align: middle;
}
</style>
2 浮动/清除浮动
/* 浮动:飘出文档流半层,实际上没有占背景颜色的位置,但是又占了内容的位置 */
/* 浮动:为了实现左右排列
bug: 没能占背景这个位置 */
/*
浮动的特点
不占背景的位置,但是占内容的位置
不管是什么标签,使用浮动之后,都可以支持宽高
使用了浮动以后 diplay:block/inline/inine-block 都没有意义
*/
}
/* 清除浮动:清除浮动带来的影响 */
/* 清除浮动的方法 */
/* 1 直接在外面套一个父元素,然后给父元素写个高度 */
/* 2 在素有浮动元素后面加一个空的div , 加上样式clear:both */
/* 3 在父元素上面写overflow:hidden 缺点:如果需要超出盒子之外显示,那么这种方法就会切掉盒子之外的内容*/
/* 4 万能清除法 能实现高度自适应,可以让超出盒子之外的内容也可以正常显示 */
<!-- 清除浮动 主要目的 实现网页高度的自适应 万能清除法 -->`
.clear:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.clear{
zoom: 1;
}
3 图片的bug
图片在使用的时候
1 底下有3px的间距
2 标签在换行的时候,右边会有间距 间距的大小跟字体大小有关 */
更多推荐
图片的居中和bug
发布评论