摘要： 100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。 demo： 如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即200/100*8mm CSS3计算calc和vw单位巧妙实现滚 阅读全文

摘要： css 计数器是css3，只在现代浏览器中有效果counter-reset：设置某个选择器出现次数的计数器的值。默认为 0。 就是定义一个计数器，可以定义初始值，默认是0 counter-increment：设置某个选取器每次出现的计数器增量。默认增量是 1。 demo css 实现计数和 css 阅读全文

摘要： background-position 定位的position的区别 background-position 相对的位置是(容器的宽度-子元素的宽度) 当子元素的宽度大于容器的宽度 position:absolute 相对的位置是(容器的宽度) 阅读全文

摘要： 1 ie7 对部分属性选择器严重区分大小写 在HTML中，属性名，例如id, title之类是不区分大小写的，CSS中的选择器也应该是如此。但是IE7对属性名是严格区分大小写的！ 2 关于属性选择器，IE7还有一个矫情的地方，就是部分[attr=val]的选择器，如果前面没有标签选择器或类名选择器等 阅读全文

摘要： CSS 语法 提示: 使用空格分隔多个滤镜。 Filter 函数 注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景 阅读全文

摘要： 如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是： enctype="multipart/form-data" enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencod 阅读全文

摘要： 普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。 诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。 什么是层叠顺 阅读全文

摘要： 就是CSS的加载和背景图片的加载不是同步的，尤其首次加载的时候，图片是异步的，具有明显的延迟，于是，我们会看到非常丑陋的色块在一瞬间出现了； 页面渲染流程如下，1. CSS加载；2. 对应DOM渲染，背景色出现；3.拉取DOM样式对应背景图片。 图片在异步加载的（图片有北背景颜色）： 一开始时候宽 阅读全文

摘要： css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图片与背景颜色之间的混合 isolation是一个CSS3属性，顾名思意是“隔离”，支持的值除了万年不 阅读全文

摘要： border会占据空间;如果想加边框效果，但是又不占用空间，可以使用box-shadow来模拟 demo div 100*100 border：10px solid red; 可以写： div 100*100 box-shadow：0 0 10px solid red; 加圆角 box-radius 阅读全文