关于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 在每个元素之前插入内容

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

::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，内容是一个段落：

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

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

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

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

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

<ul>

<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属性的 实际值 是 应用值 被应用后的近似值。

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

关于CSS的四个问题相关推荐

如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
P21-前端基础-CSS颜色四种表示方式
P21-前端基础-CSS颜色四种表示方式 1.概述颜色单位: 在CSS中可以直接使用颜色名来设置各种颜色比如:red.orange.yellow.blue.green - - 但是在css中直接使 ...
引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
CSS的四种引入方式
1.使用link标签引入css文件: <head><link rel="stylesheet" type="text/css" href=&q ...
【转载】HTML导入css的四种方式
原始链接在HTML中引2113入CSS的方法主要有四种5261,它们分别是行内式.内嵌式.链4102接式和导入式.1653 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体 ...
2014年度辛星解读css第四节
接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...
css button 四种状态,css中按钮的四种状态
css中按钮有四种状态普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的 ...
dwcss样式中英对照_DW中常用css样式四种类型详细解析说明
css 样式加载 css 样式类型有以下四种一.外部样式格式: 路径 " /> 举例: 用处:这种形式是把 css 单独写到一个 css 文件内,然后在源代码中以 link 方 ...
CSS第四篇(复合选择器)
1.后代选择器概念:后代选择器又称为包含选择器作用:用于选择元素或元素的子孙后代,一个标签之后的所有标签都会选择写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开父级子级{属性:属性 ...

关于CSS的四个问题

关于CSS的四个问题相关推荐

最新文章

热门文章