前端面试题之CSS

比眉伴天荒 2022-06-03 05:26 518阅读 0赞

**CSS 部分**

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

> **（1）：谈谈你对浏览器兼容性问题的理解？**  
> 浏览器的类型及其版本的不同会造成css效果的不尽相同，因此需要实现浏览器兼容，也可以针对不同的浏览器编写不同 的css  
> 目前，各个主流的浏览器的新版本，对于W3C的标准支持很好，因此，首先保证代码符合W3C的标准，这是解决浏览器兼容性问题的前提。  
> 其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀。比如：-webkit-,-o-,-moz-.  
> 第三，对于IE的低版本，可以编写带有特定前缀的代码，实现版本的识别。比如：  
> `.bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }`  
> 另外，对于特定 的兼容性问题，特殊解决。常见的特殊问题有：  
> 1、使用CSS reset：对于有些HTML 标签，浏览器默认的margin和padding不同，可以使用CSS 代码改写默认的样式效果，从而实现统一；  
> 2、IE 低版本中，不能使用auto 关键字实现块级元素居中显示，可以改用设置父元素的text-align；  
> 3、子元素设置上外边距时，父元素需要设置边框或者外边距；  
> 4、外边距合并问题。

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

> **（2）：为什么建议设置背景图像的同时还设置背景颜色？**
> 
> 一般建议在使用背景图像的同时提供background-color属性，并且将其设置为和图像主要颜色类似的颜色。这样，如果正在加载页面，或者因为各种原因无法显示背景图像时，页面可以使用这种颜色作为背景色

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

> **（3）：内联元素可以实现浮动吗？**  
> 在CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。

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

> **（4）：什么情况下需要额外的设置表格的显示规则？**  
> 默认情况下（不额外设置表格的显示规则时），表格按照自动表格布局进行显示，即，  
> 浏览器在显示表之前查看每一个单元格，  
> 然后基于所有单元格的设置计算表的大小，而列的宽度是由列单元格中没有折行的最宽的内容设定的。此时，单元格的大小会适应内容的大小。 自动表格布局的算法在表格复杂时会比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。在不能提前确定每一列的大小时，这种方式会非常适用。 如果额外设置表格的显示规则，即，设置table-layout 属性的值为fixed，则称为固定表格布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。浏览器将使用某列指定的宽度来计算布局（如果给了宽度的话），并使用该宽度计算该列中所有其他单元格的宽度。 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。因为如果指定使用固定表格布局，浏览器在接收到第一行后就可以显示表格。如果表格庞大且已经指定了大小，则会加速表的显示。

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

> **（5）：简要描述CSS中content属性 的作用。**  
> content 属性与:before及:after 伪元素配合使用，来插入生成内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器为页面元素插入编号。比如，查看如下代码： `body {counter-reset:chapter;} h1:before {content:“第”counter(chapter)"章";} h1 {counter-increment:chapter;}`
> 
> 使用content属性，并结合:before选择器和计数器counter，可以在每个`<h1>` 元素前插入新的内容。

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

> **（6）：设置文本字体的 时候，为什么建议设置 替换字体？**  
> 可以使用font-family 属性来指定文本的字体，代码如下所示： font-fa mily:name/inherit; 此时，name为首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。 但是，如果用户机器上并没有安装name 所指定的字体，则会显示默认字体。因此，如果可以指定一种替代字体，替代字体可以和指定字体不完全相同，相似且不会影响页面的布局，就可以解决问题了。 我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，  
> 则浏览器会查找字体列表中的下一种字体作为替代字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器才会使用默认字体显示页面。代码如下所示： `h1{font-family: Georgia, serif;}` 此时，如果用户机器上没有安装Georgia，但安装了Times 字体（serif 字体系列中的一种字体），浏览器就可能对`<h1>` 元素使用Times。尽管 Times 与Georgia 并不完全匹配，但至少足够接近。 因此，我们建议在所有font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户机器无法提供与规则匹配的特定字体时，就可以选择一个通用字体作为替换。

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

> **（7）：简要描述CSS中的定位机制**  
> CSS中，除了默认的流定位方式以外，还有如下几种定位机制：浮动定位、相对定位、绝对定位和固定定位。 浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。 相对定位将元素相对于它在普通流中的位置进行定位。 绝对定位是指将元素的内容从普通流中完全移除，并且可以使用偏移属性来固定该元素的位置。 固定定位是指将元素的内容固定在页面的某个位置。

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

> **（8）：哪些属性可以继承？**  
> CSS中可以继承的属性如下：  
> 1）文本相关属性：font-family、font-size、font-style、font-variant, font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing、color；  
> 2）列表相关属性：list-style-image、list-style-position、list-style-type、list-style；  
> 3）表格相关属性：border-collapse、border-spacing、caption-side、table-layoute； 4）其他属性：Cursor、visibility

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

> **（9）：如何理解CSS样式表的层叠性？**  
> CSS使用层叠（Cascade）的原则来考虑继承、层叠次序和优先级等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。 继承性是指，许多CSS的样式规则不但影响选择器所定义的元素，而且会被这  
> 些元素的后代继承。 层叠性是指，当一个Web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。  
> 优先级是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。CSS 样式的优先级如下所示（其中数字 3拥有最高的优先权）：  
> 1. 浏览器缺省设置；  
> 2. 外部样式表（.css 文件）或者内部样式表（位于`<head>`元素内部）；  
> 3. 内联样式（作为某个元素的style属性的值）。同等优先级下，以最后定义的样式为准，important比内联高。

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

> **（10）：cellpadding与cellspacing有何区别？**  
> cellpadding：代表单元格边框到内容之间的距离（留白）  
> cellspacing：代表单元格间边框，以及和table边框之间的距离

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

> **（11）：display与visibility有何异同？**  
> 可以使用display 属性定义建立布局时元素生成的显示框类型。 如果将display 属性设置为block，可以让行内元素（比如`<a>` 素）表现得像块级元素一样； 如果将display 属性设置为inline，可以让块级元素（比如`<p>` 元 素）表现得像内联元素一样； 可以通过把display 属性设置为none，让生成的元素根本没有框。 这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 在DIV设计中，使用display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

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

> **（12）：table-layout、border-collapse有何用途？**  
> table-layout：设置表格是否自动调整宽高  
> border-collapse：表格与单元格及单元格间的边框是否融合在一起。

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

> **（13）：链接标记target属性的\_top、\_parent、\_blank、main、left、top各有何用处?**  
> \_top：在顶层window中打开链接； \_parent：在包含当前frame的父window中打开链接 \_blank：在新window中打开链接 main、left、top是由Adobe Dreamweaver生成的主、左、上框架集的框架默认名。

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

> **（14）：CSS引入的方式有哪些?**  
> 在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。  
> **行内式**：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。  
> **内嵌式：**嵌入式是将CSS样式集中写在网页的`<head></head>`标签对的`<style></style>`标签对中。格式如下： `<head> <style type="text/css">` …此处写CSS样式 `</style> </head>` 缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式  
> **导入式**：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，`<style`>标记也是写在`<head>`标记中，使用的语法如下： `<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>` 导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。  
> **链接式**：也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的`<head></head>`标签对中使用`<link>`标记来引入外部样式表文件，使用语法如下： `<link href="mystyle.css" rel="stylesheet" type="text/css"/>` 使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。 总结：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。

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

> **（15）：描述css reset的作用和用途**  
> Reset重置浏览器的css默认属性，浏览器 的品种不同，样式不同，然后重置，让他们统一。

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

> **（16）：解释css sprites如何使用？**  
> Css精灵吧一小堆的图片整合到一张大的图片上去，减轻服务器对图片的请求数量

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

> **（17）：清除浮动的几种方式，各自的优缺点，如何清楚浮动元素带来的影响？**
> 
> 1.使用空标签清除浮动  
> clear:both（理论上能清楚任何标签，，  
> ，增加无意义的标签） 2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE） 3.是用afert伪元素清除浮动(用于非IE浏览器) 浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以元素浮动之后，其原有位置不再保留，其他元素的位置会受到影响。 如果需要清除左侧或者右侧浮动元素带来的影响，则可以使用clear 属性来设置。另外，包含框内的子元素浮动后，如果包含框没有设置具体的高度，则其高度会发生变化，此时，可以使用overflow 属性来清除子元素浮动后带来的影响。

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

> **（18）：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 单选框或复选框被选中。

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

> **（19）：如何居中一个浮动元素？**  
> 确定容器的宽高 宽500 高 300 的层 设置层的外边距  
> `.div { Width:500px height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%; }`

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

> **（20）：Css3有哪些新特性？**  
> CSS3实现圆角（border-radius:8px），  
> 阴影（box-shadow:10px），  
> 对文字加特效（text-shadow、），  
> 线性渐变（gradient），  
> 旋转（transform）  
> transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba

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

> **（21）：为什么要初始化css样式？**   
> 因为浏览器兼容性的问题，不同浏览器对有些标签的默认值是不同 的，如果没对css初始化往往会出现浏览器之间的页面显示差异。  
> 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可以兼的。但是力求影响最小的情况初始化。  
> 最简单的初始化方法是：\*\{padding :0;margin :0\}（不建议）  
> 淘宝的样式初始化：  
> `body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }`

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

> **（22）：absolute的containing block计算方式跟正常流有什么不同？**  
> block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。 block formatting context 在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 containing block 一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论： 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形； 否则则由这个祖先元素的 padding box 构成。 根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形； 对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)； 对于 position:fixed 的元素，其 containing block 由 viewport 建立； 对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，然后判断： 如果都找不到，则为 initial containing block

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

> **（23）：有关BFC的定义**  
> • BFC（W3C CSS 2.1 规范中的一个概念）就是所谓的Block formatting contexts （块级格式化上下文）。创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC仍然属于文档中的普通流。  
> **那么怎么触发BFC呢？**  
> （1）：float 除了none以外的值  
> （2）：overflow 除了visible 以外的值（hidden，auto，scroll ）  
> （3）：display (table-cell，table-caption，inline-block)  
> （4）：position（absolute，fixed）  
> （5）：fieldset元素  
> **注意：**  
> display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的  
> **BFC的特性：**  
> 1)块级格式化上下文会阻止外边距叠加  
> 当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。  
> 2)块级格式化上下文不会重叠浮动元素  
> 根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元 素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这 个测试用例）。  
> 3)块级格式化上下文通常可以包含浮动  
> 触发了BFC的话，就不会被float元素覆盖，当子元素全部浮动的时候也能够正确地包含了

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

> **（24）：什么是CSS预处器？**  
> CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。  
> CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。  
> 到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。

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

> **（25）：如果需要手动写动画，你认为最小时间间隔是多久，为什么？**
> 
> 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

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

> **（26）：display:inline-block 什么时候会显示间隙？(携程)**  
> display:inline-block在水平方向的间隙；解决办法：  
> 移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

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

> **（27）：超链接点击过后hover样式就不出现的问题？**  
> 被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A

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

> **（28）：IE6的margin双倍边距bug问题**  
> 例如：  
> `<style type=”text/css”> body {margin:0;} div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;} </style>`  
> 浮动后本来外边距10px,但IE解释为20px,解决办法是加上  
> display:inline;

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

> **（29）：过度与动画的区别是什么？**  
> 过渡属性transition可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；而动画属性animation 可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

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