css img布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 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标签之间的间距问题原理

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>

左右布局

1. 前者浮动,后者为display:inline-block;
2. 前者浮动,后者为margin-left:前者宽度;
3. 两者都设置display:inline-block;(中间有空隙)
4. flex布局