前端面试题搜集之三——CSS

布满荆棘的人生 2022-07-19 01:55 200阅读 0赞

# **前端面试题搜集之三——CSS** #

--------------------

本文为转载文，将原文的四个部分拆开，这是第三个部分，文的最后注明了出处，如需再转载也请注明出处,尊重原创。
     本博客对原博客进行了校对，修改了一些已经失效的网页，为方便大家阅读进行了精心排版。希望对正在找工作的你有所帮助。

--------------------

**3.1、谈谈你对CSS布局的理解**

--------------------

**3.2、请列举几种可以清除浮动的方法（至少两种）**

浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）。

a. 添加额外标签，例如

b. 使用br标签和其自身的html属性，例如

c. 父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1；

d. 父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout

e. 父元素也设置浮动

f. 父元素设置display:table

g. 使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

在CSS2.1里面有一个很重要的概念，那就是 Block formatting contexts （块级格式化上下文），简称 BFC。

创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，同时BFC仍然属于文档中的普通流。

IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念。

--------------------

**3.3、请列举几种隐藏元素的方法**

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。

b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate

c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。

d. display: none；元素会变得不可见，并且不会再占用文档的空间。

e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。

f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态

g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。

h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。

> 参考[《使用CSS隐藏HTML元素的4种常用方法》][CSS_HTML_4][《通过HTML和CSS隐藏和显示元素的4种方法》][HTML_CSS_4]

--------------------

**3.4、如何让一段文本中的所有英文单词的首字母大写**

[text-transform][]：

none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )

--------------------

**3.5、请简述CSS样式表继承**

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下：

文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color

列表相关：list-style-image，list-style-position，list-style-type， list-style

> 参考《[CSS样式表继承详解][CSS]》

--------------------

**3.6、请简述CSS的选择器**

元素选择器：\* 、E、 E\#id、 E.class

关系选择器：E、F、E>F、E+F、E~F

属性选择器：E\[att\]、E\[att=”val”\]、E\[att~=”val”\]、E\[att^=”val”\]、E\[att$=”val”\]、E\[att\*=”val”\]、E\[att|=”val”\]

伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

> 参考[《选择符列表》][Link 1]

--------------------

**3.7、CSS伪类与CSS伪对象的区别**

CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西

根本区别在于：它们是否创造了新的元素（抽象）

伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

> 参考《[CSS伪类与CSS伪元素的区别及由来][Link 1]》

--------------------

**3.8、请简述CSS的权重规则**

一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1。

关系选择器将拆分为两个选择器再计算。参考《[CSS权重][CSS 1]》

--------------------

**3.9、请写出多种等高布局**

a. 假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像

b. 给容器div使用单独的背景色（[固定布局][Link 2]）（[流体布局][Link 3]）：用

元素中的最大高度撑大其他的

容器高度

c. 创建[带边框的两列等高布局][Link 4]：用border-left来做，只能使用两列。

d. 使用[正padding和负margin][padding_margin]对冲实现多列布局方法：在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，设置overflow:hiden把溢出背景切掉

e. 使用[边框和定位模拟列等高][Link 5]：但不能使用在多列

f. [模仿表格布局][Link 6]等高列效果：兼容性不好，在ie6-7无法正常运行

--------------------

**3.10、在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？**

px是相对长度单位，相对于显示器屏幕分辨率而言的。

em是相对长度单位，相对于当前对象内文本的字体尺寸。

px定义的字体，无法用浏览器字体放大功能。

em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

--------------------

**3.11、CSS中 link 和@import 的区别是什么？**

a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS

b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题

d. link方式的样式的权重 高于@import的权重

e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制

--------------------

**3.12、position的absolute与fixed共同点与不同点**

**相同：**

a. 改变行内元素的呈现方式，display被置为block

b. 让元素脱离普通流，不占据空间

c. 默认会覆盖到非定位元素上

**区别：**

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

--------------------

**3.13、position的值， relative和absolute分别是相对于谁进行定位的？**

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）

relative：生成相对定位的元素，相对于其在普通流中的位置进行定位

static：默认值。没有定位，元素出现在正常的流中

--------------------

**3.14、CSS3有哪些新特性？**

CSS3实现圆角（[border-radius][]），阴影（[box-shadow][]），对文字加特效（[text-shadow][]），线性渐变（[gradient][]），变形（[transform][]）

增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局

> 参考[《CSS3中的动画效果记录》][CSS3]、[《CSS3中border-radius、box-shadow与gradient那点事儿》][CSS3_border-radius_box-shadow_gradient]

--------------------

**3.15、为什么要初始化CSS样式？**

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

**3.16、解释下 CSS sprites原理，优缺点**

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，

再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，

background-position可以用数字精确的定位出背景图片的位置。

**优点：**

a. 减少网页的http请求

b. 减少图片的字节

c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名

d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

**缺点：**

a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂

b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置

c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

--------------------

**3.17、解释下浮动和它的工作原理？**

a. 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

--------------------

**3.18、浮动元素引起的问题**

a. 父元素的高度无法被撑开，影响与父元素同级的元素

b. 与浮动元素同级的非浮动元素会跟随其后

c. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

--------------------

**3.19、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？**

如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：

以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。

原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：使用LINK标签将样式表放在文档HEAD中。

--------------------

**3.20、line-height三种赋值方式有何区别？（带单位、纯数字、百分比）**

带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高

纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5\*18=27px

百分比：将计算后的值传递给后代

> 参考[《line-height的理解》][line-height]、[《浅析line-height和vertical》][line-height_vertical]，查看在线源码。

--------------------

**3.21、:link、:visited、:hover、:active的执行顺序是怎么样的？**

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括

--------------------

**3.22、经常遇到的浏览器兼容性有哪些？如何解决？**

a. 浏览器默认的margin和padding不同

b. IE6双边距bug

c. 在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的

d. min-height在IE6下不起作用

e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6

f. input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效

--------------------

**3.23、有哪项方式可以对一个DOM设置它的CSS样式？**

a. 外部样式表：通过标签引入一个外部css文件

b. 内部样式表：将css代码放在

--------------------

**3.24、什么是外边距重叠？重叠的结果是什么？**

外边距重叠就是margin-collapse。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

a. 两个相邻的外边距都是正数时，折叠结果是它们两者之间**较大的值**。

b. 两个相邻的外边距都是负数时，折叠结果是两者**绝对值的较大值**。

c. 两个外边距一正一负时，折叠结果是两者的**相加的和**。

--------------------

**3.25、rgba()和opacity的透明效果有什么不同？**

a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。

b. 设置rgba透明的元素的子元素不会继承透明效果！

--------------------

**3.26、css属性content有什么作用？有什么应用？**

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。

可以配合自定义字体显示特殊符号。

--------------------

> 本文转载自博客园[咖啡机的博客][Link 7]

[CSS_HTML_4]: http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502271431.html
[HTML_CSS_4]: http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502281436.html
[text-transform]: http://css.doyoe.com/properties/text/text-transform.htm
[CSS]: http://www.cnphp.info/css-style-inheritance.html
[Link 1]: https://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/
[CSS 1]: http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
[Link 2]: http://codepen.io/strick/pen/ZbZYoW
[Link 3]: http://codepen.io/strick/pen/WQWOPK
[Link 4]: http://codepen.io/strick/pen/bVJRQv
[padding_margin]: http://codepen.io/strick/pen/qOwXEN
[Link 5]: http://codepen.io/strick/pen/XmQabJ
[Link 6]: http://codepen.io/strick/pen/ZbZJGg
[border-radius]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
[box-shadow]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
[text-shadow]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow
[gradient]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
[transform]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
[CSS3]: http://www.cnblogs.com/strick/p/3839873.html
[CSS3_border-radius_box-shadow_gradient]: http://www.cnblogs.com/strick/p/4843595.html
[line-height]: http://ixdfan.github.io/css/2014/04/01/line-height.html
[line-height_vertical]: http://www.html-js.com/article/2952
[Link 7]: http://www.cnblogs.com/strick/p/4968200.html