css3自适应关键字: max-content 01) max-content width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行 <style> .outer{ width:-webkit-max-content; wi ...
分类：
Web程序 时间：
2020-06-09 20:29:36
阅读次数：
146
css3属性-webkit-font-smoothing 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。但是，我们可以用以下两 ...
分类：
Web程序 时间：
2020-06-09 14:26:37
阅读次数：
82
1.写在前面 在CSS3中，可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果，这个属性在前端开发中使用的非常多，例如segmentfault的首页就是使用了box-shadow属性来增加深度效果，今天我们就一起来看看这个属性。 2.box-shadow的基本语法 box-sha ...
分类：
Web程序 时间：
2020-06-08 14:24:59
阅读次数：
64
1.object-fit 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。 之前我们大多数用的 大多数都是利用background-size: cover 来避免对图片造成的压缩或者拉伸。 fill: 默认值,和未设置一样。使图片拉伸填满整个容器, 不保证保持原有的比例 ...
分类：
Web程序 时间：
2020-06-08 13:04:31
阅读次数：
72
过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。在开始之前，首先看看CSS3的转化。 转化 CSS3的转化分为以下几种： translate 移动 rotate 旋转 scale 缩放 skew 倾斜 matrix 混合 每种转化都还有对应的3d版本 注意：闭合的内联元素不支持 ...
分类：
Web程序 时间：
2020-06-07 19:50:15
阅读次数：
79
在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法： 1、UI背景图实现 直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！ 2、 css3中transform属性 其实了解css3的朋友，一看到这个 ...
分类：
Web程序 时间：
2020-06-07 16:35:52
阅读次数：
78
在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。 （1）背景色过渡变化 下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开 ...
分类：
Web程序 时间：
2020-06-07 16:35:02
阅读次数：
232
rem是什么？ 它的全称是 font size of the root element （根元素的字体大小）它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。 浏览器的默认字体？ 浏览器的默认的font ...
分类：
Web程序 时间：
2020-06-06 11:13:23
阅读次数：
81
我们在做页面布局的时候经常会有上下左右居中的设计，由于大部分的页面结构都是左右式排版页面是固定宽度的，而元素是自上而下排列，高度不固定。所以在页面中css实现左右居中比较容易，垂直居中就不太好实现了。
在css3之前我们前端技术人员要实现垂直居中布局往往需要绞尽脑汁的去解决各种浏览器兼容问题，而随着... ...
分类：
Web程序 时间：
2020-06-05 01:06:47
阅读次数：
94
前言 我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静下来反省了一下并不是我不熟，只是我开始瞧不上网页制作这种工作了，问我css问题时，我感觉就像是再问一个老粉刷 ...
分类：
Web程序 时间：
2020-06-04 21:55:27
阅读次数：
82
