版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31126175/article/details/84780217
图片占位
<img src="http://placehold.it/600x300/0f0/ccc.png" alt="">
<img src="http://temp.im/450x300/0ff/d00" alt="">
- 说明:
450x300 : 宽度和高度
0f0: 位置代表背景颜色
ccc: 位置代表字体颜色
img底部留白
方法
1、设置div{ font-size: 0}
2、设置img{ display: block}
3、设置img{ vertical-align:top;}
4、设置img{float}
当然推荐第二种方法,让img对象成为块级元素。
img标签之间的间距问题原理
<div style="width:130px;">
<img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
<img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
<img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
<img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
</div>
<div style="width:130px;">
<div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
<div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
<div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
<div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
</div>
实际上,所有display属性为inline , inline-block 的盒模型都会有文字特性,间距就是由于两个标签之间的空白引起的。
解决方法
1.删除标签之间的空格
2.将父级设置为font-size: 0;
3.将父级设置为使用负margin去除边距
4.设置浮动
img属于行内替换元素。height/width/padding/margin均可用。效果等于inline-block元素。
行内非替换元素,例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。
布局
上下
<figure style="width:100px;">
<img src="http://placehold.it/100x50/0f0/ccc.png" >
<figcaption style="text-align:center;">logo</figcaption>
</figure>
<p>----------------------------------------------------------</p>
<figure style="width:100px;">
<figcaption style="text-align:center;">logo</figcaption>
<img src="http://placehold.it/100x50/0f0/ccc.png" >
</figure>
左右对齐
方法一:
img标签vertical-align:middle
<div>
<img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo" style="vertical-align:middle">标题1111
</div>
<div>
<img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo" style="vertical-align:middle"><span>标题1111</span>
</div>
方法二:
.img{
display: inline-block;
vertical-align: middle;
}
.text{
display: inline-block;
}
<div>
<div class="img">
<img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
</div>
<div class="text">
标题1111
</div>
</div>
方法三:
背景图片形式,设置margin-left留出图片位置.
两行等高
.img{
display: inline-block;
vertical-align: top;
}
.text{
display: inline-block;
}
p{
margin: 0;
padding: 0;//清除默认样式
height: 25px; //等于图片的高度的一半
line-height: 25px;
}
<div>
<div class="img">
<img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
</div>
<div class="text">
<p>标题</p>
<p>内容</p>
</div>
</div>
左右布局
- 前者浮动,后者为display:inline-block;
- 前者浮动,后者为margin-left:前者宽度;
- 两者都设置display:inline-block;(中间有空隙)
- flex布局