CSS 小技巧(持续更新中~)_padding-bottom: 62.5%;-CSDN博客

本文链接：https://blog.csdn.net/weixin_43841308/article/details/120302274

CSS 小技巧

固定比例，图片自适应布局

查看以下代码，你想象中，他会渲染成什么样

<div class="adaptive-img">
    <div class="one">
    </div>
  </div>

 .adaptive-img{
    width: 200px;
    height: 200px;
    background: #f3b2b2;
    position: relative;
  }
  .one{
    padding: 100%; 
    background: blue;
    opacity: 0.5;
  }

没错，没错，你真聪明！他的图片是这样的，one padding 的左右都是200px，是个比父级宽，也比父级高的家伙。
在这里插入图片描述

那么，他取得的是父级元素的宽还是高呢？修改宽为50px，看看吧

在这里插入图片描述

小知识点：
子容器padding的大小，无论是水平还是垂直方向，都是相对于父容器的宽度来计算的！
解决思路：
通过设定padding的百分比值，padding 在垂直方向和水平方向设定的百分比值为图片实际的高宽比值
实现

<div class="adaptive-img">
    <img src="../../assets/R-C.jpg" alt="" class="img">
  </div>

 .adaptive-img{
    padding-bottom: 62.5%;
    background: #f3b2b2;
    position: relative;
  }
  .img{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }

可以自己动手修改下padding-bottom试一下哦

幽灵节点——各种莫名奇妙多的距离

display: inline- 多的那`几px`

现象

<div class="parent">
        <div class="child">
		布噜布噜吐泡泡
        </div>
    </div>
	<div class="parent">
        <div class="child">
		布噜布噜吐泡泡
        </div>
    </div>

.parent {
            display: inline-block;
			font-size: 16px;
			padding: 5px 10px;
            border: 1px dashed red;
        }
		img{
			display: block;
		}

原因：“换行符/空格间隙问题”
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
解决方案：
- 父元素添加font-size: 0px
- 父元素设置为flex布局
- 节点设置float
- div 不要换行（不建议）

div包住图片，底部出现空白

下方举例俩种底部出现空白，快来找不同吧~

<div class="parent">
        <img src="./1.jpg"/>
		<!--
		<span>I am beauty</span>
		-->
    </div>

.parent {
   border: 1px dashed red;
}

在这里插入图片描述

不同之处：
- 细心的小伙伴找出了第二张图多了 I am beauty
- 更细心的小伙伴发现，文字触底，但是图片没有触底！超棒~

有些小伙伴看完 换行符/空格间隙问题,会认为这不就是在 div 和图片之间换行了，多了换行符。这时动手的朋友，已经开始尝试，消除代码中的换行了！发现不对呀，怎么还是有空格！那是为什么呢？

w3c规范里有这么一段：如果一个line box里没有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow内容（比如图片、inline-block或inline-table元素），且不以保留的换行符结束的话，就会被视作高度为0的line box。
只要不满足上述任一种情况，那么就会受“幽灵空白像素”（官方说法应该叫"strut"元素）的影响从而出现行高。

举例其中一个修改：