上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。 object-fit理解 CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：c ...
分类：
Web程序 时间：
2020-06-10 13:07:20
阅读次数：
92
box-sizing是css3新增的一个属性 其值有两个,分别是border-box和content-box 当我们给一个容器设置box-sizing为border-box时,就会出现一个很奇妙的现象 div { width: 300px; height: 100%; padding: 20px; ...
分类：
其他好文 时间：
2020-06-10 12:52:39
阅读次数：
114
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS ...
分类：
Web程序 时间：
2020-06-10 11:25:56
阅读次数：
85
1、属性选择器说明选取标签带有某些特殊属性的选择器常用选择符描述E[attr]选择具有attr属性的E元素E[attr="val"]选择具有attr属性且属性值等于val的E元素E[attr^="val"]选择具有attr属性且属性值以val开头的E元素E[attr$="val"]选择具有attr属性且属性值以val结尾的E元素E[att
分类：
Web程序 时间：
2020-06-10 09:17:07
阅读次数：
185
css3自适应关键字: max-content 01) max-content width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行 <style> .outer{ width:-webkit-max-content; wi ...
分类：
Web程序 时间：
2020-06-09 20:29:36
阅读次数：
146
首先父元素肯定时先使用弹性布局，并设置wrap属性使其自动折行 .flexContainer { display: flex !important; flex-wrap: wrap; } 首先使用弹性布局对子元素进行平均划分，使他们的高宽相等可以，然后设置text-align进行右对齐即可（注意：子 ...
分类：
其他好文 时间：
2020-06-09 20:10:46
阅读次数：
168
html: <div class="box"> <div class="first">85.719</div> <div class="second">214.281</div> </div> css: .box{ width: 300px; display: flex; } .first{ bac ...
分类：
其他好文 时间：
2020-06-09 14:50:39
阅读次数：
60
css3属性-webkit-font-smoothing 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。但是，我们可以用以下两 ...
分类：
Web程序 时间：
2020-06-09 14:26:37
阅读次数：
82
by Chris House 译者：若愚老师想要更好的阅读体验可在饥人谷技术博客 查看原文 CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网 ...
分类：
Web程序 时间：
2020-06-09 12:33:21
阅读次数：
67
下文内容摘自：https://blog.csdn.net/mazhili1991/article/details/104476445/ 在IE10浏览器中，使用flex布局的常用兼容性代码： /*display*/ .display_flex{ display: -webkit-box; displ ...
分类：
其他好文 时间：
2020-06-08 14:47:53
阅读次数：
340
