关于CSS的四个问题

一、伪类选择器和伪元素选择器都有哪些？有什么区别？分别挑选两个聊一下具体的使用场景。

「 伪类选择器 」

    动态伪类：

       :hover                   把鼠标放在链接上的状态

       :active                   选择正在活动链接

       :focus                    选择元素输入后具有焦点

    静态伪类：

:link                       选择所有未访问链接

       :visited                  选择所有访问过的链接

       :empty                   选择所有没有子元素的p元素

       :checked                选择所有选中的表单元素

       :disabled               选择所有禁用的表单元素
       :enabled                选择所有启用的表单元素

       :in-rang                 选择元素指定范围内的值

       :invalid                  选择所有无效的元素

       :optional                选择没有"required"的元素属性

       :required               选择有"required"属性指定的元素属性

       :read-only              选择只读属性的元素属性

       :read-write           选择没有只读属性的元素属性

       :root                     选择文档的根元素

       :target                  选择当前活动#news元素(点击URL包含锚的名字)

       :vaild                     选择所有有效值的属性

 

「 伪元素选择器 」

::before                          在每个<p>元素之前插入内容

::after                               在每个<p>元素之后插入内容

::first-of-type                  选择的每个 p 元素是其父元素的第一个 p 元素

::last-of-type                    选择每个p元素是其母元素的最后一个p元素

::nth-child(n)                     选择所有 p 元素的父元素的第n个子元素

::nth-last-child(n)              选择所有p元素倒数的第n个子元素

::nth-of-type(n)                 选择所有p元素第n个为p的子元素

::nth-last-of-type(n)          选择所有p元素倒数的第二个为p的子元素

::only-of-type                    选择所有仅有一个子元素为p的元素

::only-child               选择所有仅有一个子元素的p元素

「 二者区别（附应用场景） 」

伪类和伪元素本身就有一个根本的不同之处，这点直接体现在了标准的描述语句上。

先看一个伪元素 first-line 例子。现在有一段HTML，内容是一个段落：

 

<p>滕王高阁临江渚，佩玉鸣鸾罢歌舞。
画栋朝飞南浦云，珠帘暮卷西山雨。
闲云潭影日悠悠，物换星移几度秋。
阁中帝子今何在？槛外长江空自流。</p>

 

如果要描述这个段落的第一行，在不用伪元素的情况下，该会怎么做？想来我一定要嵌套一层 span，然后加上类名:

<p><span class="first-line">滕王高阁临江渚，佩玉鸣鸾罢歌舞。 </span>

画栋朝飞南浦云，珠帘暮卷西山雨。
闲云潭影日悠悠，物换星移几度秋。
阁中帝子今何在？槛外长江空自流。</p>

再反观一个伪类 first-child 的例子，有一个简单的列表：

<ul>

     <li></li>

     <li></li>

</ul>

如果此时要描述 ul 的第一个元素，无须嵌套新的元素，我只须给第一个已经存在的 li 添加一个类名就可以了：

<ul>

       <li class="first-child"></li>

       <li></li>

</ul>

尽管 第一行 和 第一个元素，这两者的语意相似，但最后作用的效果却完全不同。所以，伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从刚刚模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。而这也是为什么，标准精确地使用 "create" 一词来解释伪元素，而使用 "classify" 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素，另一个则是描述已经存在的符合“幽灵”类别的元素。

最后，来做一个总结：

伪类：一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
二、（编程）利用 @media，实现一个响应式页面效果（在移动端和PC端都能友好展示）

 

三、 rem 和 vw、vh 都是目前比较流行的实现移动端自适应的方案，思考这两种有什么区别？使用场景一样吗？都有什么使用场景？

一、「 区别 」

rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态地改变font-size即可。

      而 vm、vh 与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

二、「 应用场景 」

 ☞  rem

1、优点在于可以做到避免字体大小逐层复合的连锁反应，缺点在于使组件缺少模块化

2、使用rem的主要目的是确保无论用户如何设置自己的浏览器字体大小，布局都能调整到合适大小。但是在创建布局时，采用px为单位更加方便，而部署时应该用rem单位

☞  vm、vh

1、根据设计稿的尺寸转换为 vw 单位(SASS函数编译)

        2、无论是文本还是布局高宽、间距等都使用 vw

☞  但是最好的方案还是把 rem 和 vw 、vh 搭配使用，四步起手：

1、首先用「 rem 」作单位换算，此处定为 75px 只是举例（iPhone 6尺寸的根元素大小基准值），750px - 75px、640px - 64px、1080px - 108px，如此类推

$vm_fontsize: 75;
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}

2、根元素大小使用 「 vw  」单位

$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
}

3、同时，通过媒体查询 「 Media Queries 」 限制根元素最大最小值

html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
  
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}

4、「 body 」 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小

body {
    max-width: 540px;
    min-width: 320px;
}

四、（问答）在讲到继承时，我们讲到子元素会继承父元素属性的计算值（computed value），什么是计算值？除了计算值还有什么值？

一、「 计算值 」

CSS的计算值是一个在继承中由父类转向子类的值。

它通过指定值计算出来，负责处理特殊的值如：inherit、initial、unset 和 revert。

计算值所需要的计算通常包括将相对值转换成绝对值(如 em 单位或百分比)。例如：

div {
    font-size:16px;
    padding-top:2em;
}

经过计算之后，取到计算值为

div {
    font-size: 16px;
    padding-top: 32px;
}

然而，对于有些属性的“百分比值”会转换成“百分比的计算值”，这些元素的百分比与需要布局确定后才能知道的值有关，如 width、margin-right、text-indent、top。

另外，line-height 属性值如是没有单位的数字，则该值就是其计算值。这些计算值中的相对值会在 应用值 确定后转换成绝对值。

最后，getComputedStyle() DOM API 返回的解析结果, 可能是 计算值 或 应用值。

[ 除了计算值之外，还有初始值、当前值、应用值、继承值。下面将把它们逐个描述。]

二、「 初始值 」

CSS属性的初始值是其默认值，如其定义表中所列。

初始值的使用取决于属性是否被继承：

1、对于继承属性，初始值只能被用于没有指定值的根元素上。

2、对于非继承属性，初始值可以被用于任意没有指定值的元素上。

允许使用 inital 关键词明确指定初始值，如下：

P {
    color: red;
}

em {
    color: inital;
}

三、「 应用值 」

CSS 属性的 应用值 是完成所有计算后最终使用的值，可以由 window.getComputedStyle 获取。

应用值的尺寸 (width、line-height) 单位为像素，简写属性 (如：background) 与组成属性相符 (background-color、display) 与position、float 相符，每个 CSS 属性都有值。

计算出CSS属性的最终值有三个步骤。

1、指定值取自「 样式层叠 」(选取样式表里权重最高的规则), 或「 继承 」(如果属性可以继承则取父元素的值)，或者「 默认值 」。

2、按规范算出 计算值。

3、计算布局(比如 auto 或 百分数 换算为像素值 )， 结果即 应用值。

这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle 获得最终的 应用值。

[  注意：CSS 2.0 只定义了 计算值 作为属性计算的最后一步。CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。 对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样。 ]

四、「 实际值 」

一个CSS属性的 实际值 是 应用值 被应用后的近似值。

例如：一个用户代理可能只能渲染一个整数像素值的边框（实际值），并且该值可能被强制近似于边框的计算宽度值。