CSS题库_css选择题题库

1. 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

答案：

（1）有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区 别： IE 的 content 部分把 border 和 padding 计算了进去;

2. CSS 隐藏元素的几种方法（至少说出三种）

答案：

Opacity: 元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

Visibility: 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

Position: 不会影响布局，能让元素保持可以操作;

Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3. CSS 清除浮动的几种方法（至少两种）

清除浮动： 核心：clear:both;

1.使用额外标签法（不推荐使用）

在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动

a 内部标签：会将父盒子的高度重新撑开

b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子

2.使用 overflow 清除浮动（不推荐使用）

先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响

3.使用伪元素清除浮动(用的最多)

伪元素：在页面上不存在的元素，但是可以通过 css 添加上去

种类：
:after(在。。。之后)
:before(在。。。之前)

注意：每个元素都有自己的伪元素

.clearfix:after {
content:"";
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden; /将元素隐藏起来/
在页面的 clearfix 元素后面添加了一个空的块级元素
（这个元素的高为 0 行高也为 0 并且这个元素清除了浮动）
}
.clearfix {
zoom:1;/为了兼容 IE6/
}

4. 页面导入样式时，使用 link 和@import 有什么区别？

答案：

1. Link 属于 html 标签，而@import 是 CSS 中提供的

2. 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

3. @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

4. Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

5. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

答案：

    1.id选择器（ # myid）

    2.类选择器（.myclassname）

    3.标签选择器（div, h1, p）

    4.相邻选择器（h1 + p）

    5.子选择器（ul < li）

    6.后代选择器（li a）

    7.通配符选择器（ * ）

    8.属性选择器（a[rel = "external"]）

    9.伪类选择器（a: hover, li: nth - child）

*   可继承： font-size font-family color, UL LI DL DD DT;

*   不可继承 ：border padding margin width height ;

*   优先级就近原则，样式定义最近者为准;

*   载入样式以最后载入的定位为准;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

优先级为:

   !important >  id > class > tag  

   important 比 内联优先级高
1
2
3

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，单选框或复选框被选中。
1
2
3
4
5
6
7
8
9
10
11
12
13

6. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

答案：

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： <input> 、<img> 、<button> 、<texterea> 、<label>。

7.rgba()和 opacity 的透明效果有什么不同？

答案：

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，

而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

8. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

答案：

垂直方向：line-height

水平方向：letter-spacing

那么问题来了，关于 letter-spacing 的妙用知道有哪些么？

答案: 可以用于消除 inline-block 元素间的换行符空格间隙问题。

9. px 和 em 的区别。

答案：px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0. 75em, 10px=0. 625em。

10.BFC

答案：

什么是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件

浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC 的特性

内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

11.display:none 与 visibility:hidden 的区别是什么？

答案：

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”; 而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

12.哪些 css 属性可以继承？

答案：

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border padding margin width height ;

13.png、jpg、gif 这些图片格式解释一下，分别什么时候用？，webp 呢

答案：

gif 图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有 256 种颜色

jpg 支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画

png 为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有 256 色，png24 不透明，但不止 256 色。

webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+

14.style 标签写在 body 后与 body 前有什么区别？

答案：

从上向下加载，加载顺序不同

15. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有 hover 和 active 了, 解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link, visited, hover, active）

16.重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？

答案：

重置（Resetting）： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像 margin 、 padding 、 font-size 这些样式全部置成一样。你将必须重新定义各种元素的样式。
标准化（Normalizing）： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。

17. css sprite 是什么, 有什么优缺点

答案：概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

优点：

减少 HTTP 请求数，极大地提高页面加载速度。
增加图片信息重复度，提高压缩比，减少图片大小。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
缺点：

图片合并麻烦。
维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

18. 什么是 FOUC? 如何避免

答案：

1. 什么是 Fouc(文档样式短暂失效)？

在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。

2. 原因大致为：

使用 import 方法导入样式表
将样式表放在页面底部
有几个样式表，放在 html 结构的不同位置。
3. 其实原理很清楚：当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

4. 解决方法：使用 link 标签将样式表放在文档 head 中。

19. css3 有哪些新特性

text-shadow文本阴影
box-shadow盒子阴影
text-overflow如何显示溢出内容
border-image边界图片
border-radius创建圆角的
background-size指定背景图像的大小
word-wrap自动换行
word-break指定换行规则
background-image属性添加背景图片

20.display 有哪些值？说明他们的作用

答案：

display： none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

解析：
默认值：inline
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline： 指定对象为内联元素。
block： 指定对象为块元素。
list-item： 指定对象为列表项目。
inline-block： 指定对象为内联块元素。（CSS2）
table： 指定对象作为块元素级的表格。类同于html标签

（CSS2）
inline-table： 指定对象作为内联元素级的表格。类同于html标签 （CSS2）
table-caption： 指定对象作为表格标题。类同于html标签（CSS2）
table-row-group： 指定对象作为表格行组。类同于html标签（CSS2）
table-column： 指定对象作为表格列。类同于html标签（CSS2）
table-column-group： 指定对象作为表格列组显示。类同于html标签（CSS2）
table-header-group： 指定对象作为表格标题组。类同于html标签（CSS2）
table-footer-group： 指定对象作为表格脚注组。类同于html标签（CSS2）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

21.PNG, GIF, JPG 的区别及如何选

答案：

GIF：

1：256 色
2： 无损，编辑 保存时候，不会损失。
3：支持简单动画。
4：支持 boolean 透明，也就是要么完全透明，要么不透明
JPEG：

1：millions of colors
2： 有损压缩， 意味着每次编辑都会失去质量。
3：不支持透明。
4：适合照片，实际上很多相机使用的都是这个格式。
PNG：

1：无损，其实 PNG 有好几种格式的，一般分为两类：PNG8 和 truecolor PNGs；

与 GIF 相比：

它通常会产生较小的文件大小。
它支持阿尔法（变量）透明度。
无动画支持
与 JPEG 相比：

文件更大
无损
因此可以作为 JPEG 图片中间编辑的中转格式。
结论：

JPEG 适合照片
GIF 适合动画
PNG 适合其他任何种类——图表，buttons，背景，图表等等。

22.行内元素 float:left 后是否变为块级元素？

答案：

行内元素设置成浮动之后变得更加像是 inline-block
行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100%，行内元素默认 100%宽度占据一行
这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的

23.列出你所知道可以改变页面布局的属性

答案：width、height、float、position、等

24.CSS 在性能优化方面的实践

答案：

1. 内联首屏关键 CSS（Critical CSS）

内联 CSS 能够使浏览器开始页面渲染的时间提前，只将渲染首屏内容所需的关键 CSS 内联到 HTML 中

2. 异步加载 CSS

3. 文件压缩

4. 去除无用 CSS

25. position 的值， relative 和 absolute 分别是相对于谁进行定位的？

答案：

absolute : 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

26.CSS 选择器的优先级是如何计算的？

答案：浏览器通过优先级规则，判断元素展示哪些样式。优先级通过 4 个维度指标确定，我们假定以 a、b、c、d 命名，分别代表以下含义：

1. a 表示是否使用内联样式（inline style）。如果使用， a 为 1，否则为 0。 2. b 表示 ID 选择器的数量。 3. c 表示类选择器、属性选择器和伪类选择器数量之和。 4. d 表示标签（类型）选择器和伪元素选择器之和。

优先级的结果并非通过以上四个值生成一个得分，而是每个值分开比较。 a、b、c、d 权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。所以，如果 b 的值不同，那么 c 和 d 不管多大，都不会对结果产生影响。比如 0，1，0，0 的优先级高于 0，0，10，10 。

当出现优先级相等的情况时，最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则（无论是在该文件内部还是其它样式文件中），那么最后出现的（在文件底部的）样式优先级更高，因此会被采纳。

在写样式时，我会使用较低的优先级，这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要，这样使用者就不需要通过非常复杂的优先级规则或使用 !important 的方式，去覆盖组件的样式了。

27. 如何解决不同浏览器的样式兼容性问题？

答案：

在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
使用已经处理好此类问题的库，比如 Bootstrap。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Reset CSS 或 Normalize. css。

28.如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？

答案：

优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。
利用 caniuse. com 检查特性支持。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Modernizr进行特性检测。

29.使用 CSS 预处理的优缺点分别是什么？

答案：

优点：

提高 CSS 可维护性。
易于编写嵌套选择器。
引入变量，增添主题功能。可以在不同的项目中共享主题文件。
通过混合（Mixins）生成重复的 CSS。
Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。
缺点：

需要预处理工具。
重新编译的时间可能会很慢。

30.说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。

答案：

CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的 padding 、 border 和 margin 区域。

CSS 盒模型负责计算：

块级元素占用多少空间。
边框是否重叠，边距是否合并。
盒子的尺寸。
盒模型有以下规则：

块级元素的大小由 width 、 height 、 padding 、 border 和 margin 决定。
如果没有指定 height ，则块级元素的高度等于其包含子元素的内容高度加上 padding （除非有浮动元素，请参阅下文）。
如果没有指定 width ，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的 padding 。
元素的 height 是由内容的 height 来计算的。
元素的 width 是由内容的 width 来计算的。
默认情况下， padding 和 border 不是元素 width 和 height 的组成部分。

31.relative 、 fixed 、 absolute 和 static 四种定位有什么区别？

答案：

经过定位的元素，其 position 属性值必然是 relative 、 absolute 、 fixed 或 static 。

static ：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative ：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
absolute ：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed ：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
static ：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。 position: static 对 table 元素的效果与 position: relative 相同。

32. 过渡与动画的区别是什么

答案：

transition

可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性

animation

可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

33.去除 inline-block 元素间间距的方法

答案：

移除空格
使用 margin 负值
使用 font-size:0
letter-spacing
word-spacing

34. 为什么要初始化 CSS 样式

答案：

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
去掉标签的默认样式如：margin, padding，其他浏览器默认解析字体大小，字体设置。

35.有哪些手段可以优化 CSS, 提高性能

答案：

1, 首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。

2，减少css嵌套，最好不要套三层以上。

3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。

4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。

5，减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有… 这性能能好吗？当然重置样式这些必须 的东西是不能少的。

6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。

7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里， 这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。

8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。

9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的 朋友可以选择normolize. css

10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种 十分实用的技巧，极大减少了http请求。

11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十 分好的)，

12，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。

36.标准模式与怪异模式的区别

答案：浏览器解析 CSS 的两种模式：标准模式(strict mode)和怪异模式(quirks mode)

标准模式：浏览器按 W3C 标准解析执行代码；

怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。

浏览器解析时使用标准模式还是怪异模式，与网页中的 DTD 声明直接相关，DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相关的方式加载网页并显示，忽略 DTD 声明，将使网页进入怪异模式（quirks mode）。
区别是：

1、图片元素的垂直对齐方式

对于 inline 元素和 table-cell 元素，标准模式下 vertical-align 属性默认取值是 baseline；在怪异模式下，table 单元格中的图片的 vertical-align 属性默认取值是 bottom。因此在图片底部会有及像素的空间。

2、

元素中的字体 CSS 中，对于 font 的属性都是可以继承的。怪异模式下，对于 table 元素，字体的某些元素将不会从 body 等其他封装元素继承中的得到，特别是 font-size 属性。

3、内联元素的尺寸

标准模式下，non-replaced inline 元素无法自定义大写；
怪异模式下，定义这些元素的 width、height 属性可以影响这些元素显示的尺寸。
4、元素的百分比高度

CSS 中对于元素的百分比高度规定：百分比为元素包含块的高度，不可为负值；如果包含块的高度没有显示给出，该值等同于 auto，所以百分比的高度必须是在元素有高度声明的情况下使用。
当一个元素使用百分比高度是，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被准确应用
5、元素溢出的处理

标准模式下，overflow 取值默认为 visible；在怪异模式在，该溢出会被当做扩展 box 来对待，即元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。