四时宝库

程序员的知识宝库

CSS容易忘记的知识点(中)(css记不住怎么办)

一、简述 Rem 及其转换原理

rem 是 CSS3 新增的相对长度单位,是指相对于根元素 html 的 font-size 计算值的大小。

默认根元素的 font-size 都是 16px的。如果想要设置 12px 的字体大小也就是 12px/16px = 0.75rem。

  • 由于 px 是相对固定单位,字号大小直接被定死,无法随着浏览器进行缩放;
  • rem 直接相对于根元素 html,避开层级关系,移动端新型浏览器对其支持较好;

个人用 vw + 百分比布局用的比较多,可以使用 webpack 的 postcss-loader 的一个插件 postcss-px-to-viewport 实现对 px 到 vw 的自动转换,非常适合开发。

二、移动端视口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • initial-scale: 初始的缩放比例;
  • minimum-scale: 允许用户缩放到的最小比例;
  • maximum-scale: 允许用户缩放到的最大比例;
  • user-scalable: 用户是否可以手动缩放;

三、简述伪类和伪元素

伪类

伪类用于当已有元素处于某种状态时,为其添加对应的样式,这个状态是根据用户行为变化而变化的。比如说 :hover。它只有处于 dom 树无法描述的状态才能为元素添加样式,所以称为伪类。

伪元素

伪元素用于创建一些原本不在文档树中的元素,并为其添加样式,比如说 ::before。虽然用户可以看到这些内容,但是其实他不在文档树中。

区别

伪类的操作对象是文档树中已存在的元素,而伪元素是创建一个文档树外的元素。

css 规范中用双冒号 :: 表示伪元素,用一个冒号 : 表示伪类。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接