图片的居中和bug

图片的居中和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 标签在换行的时候，右边会有间距 间距的大小跟字体大小有关 */