前端小知识（记录工作中遇到的小知识点）

心已赠人 2022-11-10 05:38 158阅读 0赞

# 一、图片固定宽高（这种情况比较适合在不知道图片宽高比例的情况下的图片列表） #

1.  不考虑拉伸只考虑固定宽高直接使用css给图片固定宽高。
2.  在考虑拉伸不考虑固定宽高的情况下也就是需要等比的情况下，只需要给图片一个宽度就行了，会自适应一个高度。
3.  两者都考虑的情况目前有两种办法：  
    ①、使用img做载体给一个固定宽高，使用css中的object-fit:cover属性，注意: Internet Explorer/Edge 15 或更早版本的浏览器不支持 object-fit 属性。  
    ②、使用div做载体给一个固定宽高，使用css的背景图片

{
        background-image:url('');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
    }

# 二、图片和文字垂直居中显示 #

<div class='center'>
        <img src=''>
        <span>这里是文字</span>
    </div>
    <style>
        .center *{
            display:inline-block;
            vertical-align: middle;
        }
    </style>

# 三、子元素在父元素中垂直水平居中显示 #

{
        display: flex;
        align-items: center;
        justify-content: center;
    }

# 四、父元素伪类方法清除浮动 #

.clearFix:after{
        content: "020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearFix {
        zoom: 1;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关 C语言学习中记录的小知识点

1、(char \)a的意思 (char\)a的意思是：将a强制类型转换为字符指针类型。 char\是C语言中，用于定义指针的变量符号。比如：char \p; 这个变量p

向右看齐/ 2023年10月18日 15:14/ 0 赞/ 82 阅读

相关前端小知识（记录工作中遇到的小知识点）

一、图片固定宽高（这种情况比较适合在不知道图片宽高比例的情况下的图片列表） 1. 不考虑拉伸只考虑固定宽高直接使用css给图片固定宽高。 2. 在考虑拉伸不考虑固定宽

心已赠人/ 2022年11月10日 05:38/ 0 赞/ 159 阅读

相关小知识点总结记录（一）

今天写一个小的知识点的记录，就是html中textarea的。大家都知道textarea是一个文本框，但是我在项目中也就是在html中写了一个textarea标签

╰半夏微凉°/ 2022年06月11日 01:20/ 0 赞/ 181 阅读

相关前端小知识

前端开发需要会的：偏重 JavaScript 方向熟悉 jQuery、Bootstrap，独自开发过 jQuery 插件为佳熟练掌握 HTML5 及 CSS

谁践踏了优雅/ 2022年05月13日 07:24/ 0 赞/ 168 阅读

相关 sql小知识点记录

1.建唯一索引（1）先查询表中有哪些键 show COLUMNS FROM tb_name 示例： ![20190306091710351.png][] 结

向右看齐/ 2022年03月12日 13:16/ 0 赞/ 246 阅读

相关 Redis小知识点记录

key 的自动创建和删除我们无需在放入元素前创建空的list，也无需在list没有元素的时候删除它。在 list 为空时删除 key，并在用户试图添加元素（比如通过 `LP

Bertha 。/ 2022年02月19日 00:31/ 0 赞/ 275 阅读

相关小知识点

进制转换：二进制转八进制：从小数点开始向左为整数部分，向右为小数部分 “三位一体” ，不足补0 例如：10001001. 1011 划分完：010 001 0

ゝ一纸荒年。/ 2022年02月09日 10:45/ 0 赞/ 304 阅读

相关 centos - 小知识点记录

1. 查看centos 系统版本 cat /etc/redhat-release 查看CentOS版本 cat /proc/version ![在这

青旅半醒/ 2022年01月27日 18:34/ 0 赞/ 312 阅读

相关小知识点

dir ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] python提供的dir()函数，其实就是查看

柔情只为你懂/ 2021年10月19日 03:40/ 0 赞/ 346 阅读

相关 web前端开发中的小知识点集合

列表元素循环遍历添加移除classname for(var i=0;i<arr.length;i++){ arr[i].className='';

系统管理员/ 2021年07月25日 12:52/ 0 赞/ 357 阅读