CSS踩坑

CSS跳坑

视差滚动

网页再向下滑动的时候，控制背景的移动速度比前景的移动速度慢，造成视差

1. CSS3方式，开发时间短，性能开发性良好，缺点是不能兼容低版本
2. jQuery实现 ，控制不同层的滚动速度
3. 插件的方式， eg parallax-scrolling

::before和：after中的双冒号和单冒号的区别

1. 单冒号 css3伪类选择器，双冒号用于伪元素选择器
2. ::before就是以一个子元素的存在，定义在元素主题内容之前的一个伪元素，并不存在dom中，只存在页面中

如何让chrome支持小于12px的文字

p{
    font-size:10px;
    -webkit-transform:scale(0.8)
}

有一个高度自适应的div，里面2个div一个定宽，另一个填满父元素

.father{
    position:relative;
}
.son1{
    width:100px;
    height:100%;
}
.son2{
    position:absolute;
    left:100%;
    right:0;
    top:0;
}

什么是webp

webp格式是谷歌2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩时间久兼容性不好，目前只有谷歌和opera支持

style标签写在body之前和之后有什么区别

页面的加载顺序是自上而下

当上style写在body之后，

​ 浏览器逐行的对html进行解析，当遇到写在底部的style或者外部的样式会导致浏览器停止对之前的渲染，等待样式加载完继续渲染，在ie浏览器会出现页面闪烁的问题

黑白图像

img.desaturate{
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
}

加载CSS的方式

@import url(style.css);
/*只能用在css文件中或者style标签中*/

<link rel = 'stylesheet'/ href="">

CSS3新增的唯类选择器

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。