"1. 有哪些方式可以对一个 DOM 设置它的 CSS 样式？外部样式表。引入一个外部 CSS 文件；内部样式表。将 CSS 代码放在标签内部；内联样式，将 CSS 样式直接定义在 HTML 元素内部； 2.CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器的可视范围内？ ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 9 浏览 • 4 个月前

CSS面试题

1. 有哪些方式可以对一个 DOM 设置它的 CSS 样式？

外部样式表。引入一个外部 CSS 文件；

内部样式表。将 CSS 代码放在 <head> 标签内部；

内联样式，将 CSS 样式直接定义在 HTML 元素内部；

2.CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器的可视范围内？

最基本的：

设置 display 属性为 none，或者设置 visiblity 为 hidden

技巧性：

设置高度为 0，设置透明度为 0，设置 z-index 位置在 -1000

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

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

4. 什么是 Css Hack?ie6,7,8 的 hack 分别是什么？

针对不同的浏览器写不同的 CSS Code 的过程，就是 CSS Hack。实例如下：

#test{
            width: 300px;
            height: 300px;
        background</span>-<span style="color: rgba(0, 0, 0, 1)">color: blue;
        background</span>-color: red\9; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">  all ie </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
        background</span>-color: yellow\0; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> ie8 </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
        +background-color: pink; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> ie7 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
        _background</span>-color: orange; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> ie6  </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
        :root #test{
            background: purple\</span>9; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> ie9 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
        }

        @media all and {min</span>-width: 0px} #test{background-color: black\0;} <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> opera </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
        @media screen and {</span>-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> chrome and safari </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
    }</span></pre>

@media 可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。

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

块级元素（block）特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。

width、height、padding（内边距）、margin(外边距) 都可控制。

内联元素（inline）特性：

宽度、高度、内边距的 padding-top/padding-bottom 和外边距的 margin-top、margin-bottom 都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的）。

这里还有其他问题。浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些元素是天生 inline-block 元素？

它们是 <input>、<img>、<button>、<textare>、<label> 。

6.rgba() 和 opacity 的透明效果有什么区别？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba() 只作用于元素的颜色或起背景色。设置 rgba 透明的元素的子元素不会继承透明效果。

7.CSS 中可以让文字在垂直和水平方向重叠的两个属性分别是什么？

垂直方向：line-height。设置成比字体高度还小就可以让两行重叠

水平方向：letter-spacing。设置为负值即可实现重叠。

8. 如何垂直居中一个浮动元素？

下面代码分别实现了已知元素高度、未知元素高度、图片的垂直居中方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中一个浮动元素</title>
    <style type="text/css">
        #div1 {
            background-color:#6699ff;
            width: 200px;
            height: 200px;
        position</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> absolute</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        top</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 50%</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        left</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 50%</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        margin-top</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> -100px</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        margin-left</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> -100px</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span>
    <span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">}</span><span style="color: rgba(128, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">

    #div2</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">{</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        width</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 200px</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        height</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 200px</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        background-color</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> #6699ff</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">

        margin</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> auto</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        position</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> absolute</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        left</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 0</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        top</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 0</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        right</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 0</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        bottom</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 0</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span>
    <span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">}</span><span style="color: rgba(128, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">

    #container</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">{</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        width</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 600px</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        height</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> 600px</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        background</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> hotpink</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">

        display</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> table-cell</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        text-align</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> center</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span><span style="color: rgba(255, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">
        vertical-align</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">:</span><span style="color: rgba(0, 0, 255, 1); background-color: rgba(245, 245, 245, 1)"> middle</span><span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">;</span>
    <span style="color: rgba(0, 0, 0, 1); background-color: rgba(245, 245, 245, 1)">}</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</head>
<body>
<div style="background:hotpink; width: 600px; height: 600px; position: relative;">
<div id="div1">
方法一：已知元素的高宽
</div>
</div>
<br>
<div style="background:hotpink; width: 600px; height: 600px; position: relative;">
<div id="div2">
方法二: 未知元素的高宽
</div>
</div>
<br>
<div id="container">
<img width="200px" height="200px" src="assets/images/mug.jpg">
</div>
</body>
</html>

9.px 和 em 的区别

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

浏览器的默认字体高度都是 16px。所以未经调整的浏览器都符合：1em=16px。那么 12px=0.75em, 10px = 0.625em。

10. 描述一个“reset”的 css 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处吗?

重置样式非常多，凡是一个前端开发人员肯定会有一个常用的重置 css 文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的的默认样式，如果你不处理，在不同浏览器下回存在必要的风险，或者更有戏剧性发生。

你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供一套合理的默认样式值。既能够让众多浏览器达到一致和合理，但不扰乱其他的东西（如粗体的标题）。

11.Sass、Less 是什么？大家为什么要使用他们？

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。它们是一种特殊的语法、语言编译成 CSS。

例如 Less 是一种动态样式语言。将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数。Less 即可以在客户端上运行（支持 IE6+,Webkit,Firefox），也可以在服务端运行（借助 Node.js）。

Sass 变量必须是 $ 开始，而 Less 变量必须使用 @符号开始。

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。Less 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 Less 代码一同编译。

12.display:none 和 visiblity:hidden 的区别是什么？

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

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

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

13. 知道 css 有个 content 属性吗？有什么用？有什么应用？

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

最常见的应用是利用伪类清除浮动：

CSS Code 复制内容到剪贴板
//一种常见利用伪类清除浮动的代码   
 .clearfix:after {   
    content:".";       //这里利用到了 content 属性   
    display:block;    
    height:0;   
    visibility:hidden;    
    clear:both; }   
.clearfix {
*zoom:1;
}

after 伪元素通过 content 在元素的后面生成一个点的块级元素，再利用 clear: both 清除浮动。

14. 盒子模型在不同浏览器上的区别

盒子模型是 CSS 中一个重要的概念，理解了盒子模型才能更好的排版。盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。它们对盒子模型的解释各不相同，先看看我们熟知的标准盒子模型：

从上图可以看到标准的 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

在来看下 IE 盒子模型：

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。

例如：

一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：

宽：20*2 + 1 * 2 + 10* 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。

盒子的实际大小为：宽 1*2 + 10 * 2 + 200 = 222px, 高 1* 2 + 10 * 2 + 50 = 72px。

假如用 IE 盒子模型，那么盒子需要占据的位置为：

宽：20 * 2 + 200 = 240px, 高：20 * 2 + 50 = 70px。

盒子的实际大小：宽 200px, 高 50px。

一般推荐使用 W3C 盒子模型，怎样才算是选择了标准 W3C 盒子模型呢？就是在网页上加 DOCKTYPE 申明。如果不加，那么各个浏览器会根据自己的行为去理解网页。

CSS3 增加了 box-sizing 属性，值包括 content-box|border-box|inherit。

在我们的重置样式文件中一般也会重置这个属性，把 box-sizing 设置成 border-box 方便于排版。

CSS面试题

相关帖子

随便看看

CSS面试题