W3C标准盒模型及IE盒模型

如果html文件头部没有有效地声明文件类型的话,IE6、7、8下的盒模型解析情况会跟W3C标准盒模型不一致,我们称之为IE盒模型。由于现在我们写html页面时都会在头部加上html5文档类型声明(<!DOCTYPE html>),所以并不用担心这个问题,知道有这么回事就可以了。

一个元素的IE盒模型也是由margin、border、padding、content四个区块构成的。在IE盒模型里,元素的宽度、高度是content、padding、border三者的合计值。

CSS自定义属性(变量)

:root在html文档里对应的就是html标签选择器,:root伪类和html标签选择器这两个的区别基本上就是前者的优先级更高一些。但是,那些–color是什么东西?

根据文档https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables,这个叫CSS自定义属性(CSS变量),是具有继承性质的,在:root中定义CSS变量的话,等于是在定义全局变量,在其他具体的选择器(如上述代码中的.u-category-windows)里定义CSS变量等于是在该选择器及其后台选择器这个范围内定义了一个局部变量。

1px像素解决方案

让边框的颜色靠近背景色(通常可以这么做,或者你也可以到打开下面这个地址,设置midpoints中点数为一个大于1的值,点击blend混合按钮后从palette调色板中选取你比较细喜欢的颜色:http://meyerweb.com/eric/tools/color-blend/#FF33FF:::hex),这样人眼看过去就会觉得比较细。但有时候边框颜色和附近的背景色在设计稿上已经定下来了而且二者可能差别还挺大的,这样也没事,你可以用rgba(r, g, b, a)来稍微给边框颜色加一点透明度,一般这点小改动是可以被接受的。

-webkit-overflow-scrolling让iOS下页面滚动如丝般顺滑

现象描述:给html元素设定了overflow: auto;后,当元素内部内容较多时会出现滚动条,这个滚动条在安卓机里滚动很正常,但是在iOS机里就显得很不丝滑了,滑哪停哪(iOS软件内嵌页面和iOS微信客户端内都存在这个现象)。经测试,在该html元素对应样式的overflow: auto;的下面加一句-webkit-overflow-scrolling: touch;即可解决问题。