CSS面试题

我睡着的时候不困唉大约 16 分钟CSS前端面试题CSS

CSS

1. 盒模型组成是什么？，box-sizing 有什么作用

下图为标准盒子（W3C 标准）

  1. 盒模型：margin(外边距) padding(内边距) border(边框) content(内容)

  2. box-sizing:content-box / border-box / inherit 有以下三个属性

    • content-box:指定元素的宽度和高度（最小/最大属性）适用于 box 的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外.
    • border-box:指定宽度和高度（最小/最大属性）确定元素边框 box，对元素指定宽度和高度包括 padding 和 border 的指定，内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算
    • inherit:指定 box-sizing 属性的值，应该从父元素继承

2. CSS3 新特性有哪些，伪类，伪元素，锚伪类分别有哪些

提示

伪类与伪元素对应使用示例参考CSS 伪类与伪元素

CSS3 新特性

  1. CSS 实现圆角（border-radius）,阴影（box-shadow）,边框图片 border-image
  2. 对文字加特效（text-shadow）,强制文本换行（word-wrap）,线性渐变（linear-gradient）
  3. 旋转，缩放，定位，倾斜： transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)
  4. 增加了更多的 CSS 选择器，多背景，rgba();
  5. 在 CSS3 中唯一引入的伪元素是::selection;
  6. 媒体查询（@media）,多栏布局（flex）

伪类

用于向某些选择器添加特殊的效果

  1. :hover 将样式添加到鼠标悬浮的元素
  2. :active 将样式添加到被激活的元素
  3. :focus 将样式添加到获得焦点的元素
  4. :link 将样式添加到未被访问过的链接
  5. :visited 将样式添加到被访问过的链接
  6. :first-child 将样式添加到元素的第一个子元素
  7. :lang 定义指定的元素中使用的语言

伪元素

用于将特殊的效果添加到某些选择器，伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

  1. ::first-letter 将样式添加到文本的首字母
  2. ::first-line 将样式添加到文本的首行
  3. ::before 在某元素之前插入某些内容
  4. ::after 在某元素之后插入某些内容

新增伪类

  1. p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素
  2. p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素
  3. p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素
  4. p:only-child选择属于其父元素唯一的子元素的每个<p>元素
  5. p:nth-child(n)选择属于其父元素的第 n 个子元素的每个<p>元素
  6. p:nth-last-child(n)选择属于其父元素的倒数第 n 个子元素的每个<p>元素
  7. p:nth-of-type(n)选择属于其父元素第 n 个<p>元素的每个<p>元素
  8. p:nth-last-of-type(n)选择属于其父元素倒数第 n 个<p>元素的每个<p>元素
  9. p:last-child选择属于其父元素最后一个子元素的每个<p>元素
  10. p:empty 选择没有子元素的每个<p>元素(包括文本节点)
  11. p:target 选择当前活动的<p>元素
  12. :not(p) 选择非<p>元素的每个元素
  13. :enabled 控制表单控件的可用状态
  14. :disabled 控制表单控件的禁用状态

3. CSS 实现隐藏元素的方式有几种

  1. opacity设置一个元素的透明度 .hide{opacity:0;}
  2. visibility .hide{visibility:hidden}
  3. display确保元素不可见并且连盒模型也不生成 .hide{display:none}
  4. position .hide{position:absolute; top:-9999px; left:-9999px;}
  5. clip-path .hide{clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px};

4. 如何实现盒子在页面水平和垂直居中

水平居中设置

  1. 行内元素：设置text-align:center;
  2. 定宽块状元素：设置 左右 margin值为auto;
  3. 不定宽块状元素
  4. 在元素外加入 table标签(完整的，包括table,tbody,tr,td),该元素写在td内，然后设置margin的值为auto;
  5. 给该元素设置display:inline方法；
  6. 父元素设置position:relative和left:50%,子元素设置position:relative和left:50%

垂直居中设置

  1. 父元素高度确定的单行文本，设置height=line-height;
  2. 父元素高度确定的多行文本
    • 插入 table（插入方法和水平居中一样）,然后设置vertical-align:middle;
    • 先设置display:table-cell 再设置 vertical-align:middle;

5. 详细的描述一下 position , display

position

  1. position：absolute; 绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  2. position:fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位.
  3. position:relative; 生成相对定位的元素，相对于其正常位置进行定位
  4. position:static; 默认值，没有定位，元素在正常的文档流(忽略 top,bottom,left,right 或者 z-index 声明)
  5. position:inherit; 规定应该从父元素继承 position 属性的值

display（常用）

  1. display:none 此元素不会被显示
  2. display:block; 此元素将显示为块级元素，此元素前后会带有换行符
  3. display:inline; 行内块元素
  4. display:inline-block; 此元素会作为列表显示

6.请解释 {box-sizing:border-box;} 的作用，并说明使用它的好处

它是 CSS3 新增的属性：

  • 通常一个块级元素实际所占的宽高度=margin+(border-width)+padding+height/width;
  • 如果设置了 border-box，实际所占的宽高度=设置的高度/设置的宽度+margin 无论如何改动 border 和 padding 的值，都不会导致 box 总尺寸发生变化，也就不会打乱页面整体布局

7. 浮动元素引起的问题和解决办法

浮动会引起问题

  1. 由于浮动元素已脱离文档流，所以父元素无法被撑开，影响与父级元素同级的元素
  2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后，也是由于浮动元素脱离文档流，不占据文档流中的位置
  3. 如果该浮动元素不是同级第一个浮动的元素，则他之前的浮动也应该浮动，否则容易影响页面的结构显示

清除浮动常用方法

  1. 额外标签法，又称 “隔墙法”
  2. 使用伪类 arter 等等，其实是隔墙法的变异操作
  3. 浮动外部元素
  4. 设置高度或者使用 overflow:hidden 或者 auto

8. Link 和 @import 引入 CSS 的区别

  1. 适用范围不同：@import 可以在网页页面中使用，也可以在 css 文件中使用，用来将多个 CSS 文件引入到一个 CSS 文件中；而 link 只能将 CSS 文件引入到网页页面中。
  2. 功能范围不同：link 属于 XHTML 标签，而@import 是 CSS 提供的一种方式，link 标签除了可以加载 CSS 外，还可以定义 RSS,定义 rel 连接属性等，@import 就只能加载 CSS
  3. 加载顺序不同：当一个页面被加载的时候，Link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载，所以有时候浏览@import 加载 CSS 的页面时开始会没有样式（就是闪烁），这种是在网速慢的时候才会看得出来
  4. 兼容性差别：由于@import 是 CSS2.1 提出的，所以老的浏览器不支持，而@import 只有在 IE5 以上的才能识别，而 link 标签无此问题
  5. 控制样式时差别： 使用 Link 方式可以让用户切换 CSS 样式

9. 解释一下 css3 的 flexbox，以及适用场景

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力，flexbox 布局是最合适的一个应用程序的组件，以及小规模的布局，而网络布局是用于较大规模的布局

10. inline 和 inline-block 的区别

  1. inline 元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
  2. Inline 元素设置 width,height 属性无效
  3. inline 元素的 margin 和 padding 属性，水平方向的 padding-left,padding-right,margin-left,margin-right 都产生边距效果；但竖直方向的 padding-top,padding-bottom,magin-top,margin-bottom 不会产生边距效果。

11. 网格布局了解吗 （ grid ）

Grid 布局又称“网格”，是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式，Grid 布局是第一个专门为解决布局问题而创建的 CSS 模块

12.传统表格布局了解吗（ table ）

Table 用于布局，主要用来显示批量的数据；但是 table 有一个缺点，就是加载页面的时候，需要将全部的数据都请求到，才显示页面，否则就是一片的空白，所以现在一般都不用 table 进行布局.但因其稳定性非常优秀，一般在管理系统类项目中应用较多。

13. 实现两栏布局你知道有哪些方法

  1. margin-bottom 和 padding-bottom
  2. table-row 和 table-cell
  3. flex 布局

14. 流式布局如何实现，响应式布局如何实现

流式布局响应式布局
也叫 fluid,当上面一行的空间不够容纳新的 TextView 时候才开辟下一行的空间，场景：主要用于关键词搜索或者热门标签等场景；他主要是按照页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变,使用%百分比定义宽度，高度大都是用 px 来固定，可以根据可视区域和父元素的实时尺寸来调整，尽可能适应各种分辨率主要是实现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验；首先设置 meta 标签，通过媒体查询来设置样式 Media Queries,然后再设置多种试图宽度

15. 三栏布局 （圣杯布局 / 双飞翼 / Flex 布局）

圣杯布局

圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合 left 和 right 属性

<div class="header"></div>
<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
<div class="footer"></div>

.header {
  width: 100%;
  height: 64px;
  background-color: lightcyan;
}
.container {
  /* 溢出隐藏 */
  overflow: hidden;
  /*  外层的container设置 padding-left: 400px;padding-right: 140px;，
      目的是：
      给left和right ，给这两个盒子，腾出显示的位置（或者说空出位置）。
  */
  padding-left: 500px;
  padding-right: 150px;
}
.container .left,
.container .center,
.container .right {
  /* 都三个盒子 都设置 高度是900像素 */
  height: 400px;
  /* 都三个盒子 都设置 左浮动 */
  /* 浮动 */
  float: left;
}
.container .left {
  width: 500px;
  background-color: lightseagreen;
  /* 向左移动了400px */
  margin-left: -500px;
}
.container .center {
  width: 100%;
  background-color: lightgreen;
}
.container .right {
  width: 150px;
  background-color: lightpink;
  margin-right: -150px;
}
.footer {
  width: 100%;
  height: 46px;
  background-color: lightsalmon;
}

双飞翼

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染

提示

作用：双飞翼布局为了让中间 div 内容不被遮挡，直接在中间 div 内部创建子 div 用于放置内容，在该 div 里用 margin-left 和 margin-right 为左右两栏 div 留出位置

优点： 不会像圣杯布局那样变形

缺点： 多了一层 dom 节点

<div class="header">头部</div>
<div class="container">
  <div class="content">
    <div class="center">中间</div>
  </div>
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>
<div class="footer">尾部</div>

.header,
.footer {
  height: 64px;
  width: 100%;
  background-color: lightpink;
}
.content,
.left,
.right {
  float: left;
  height: 200px;
}
.content {
  width: 100%;
  background-color: lightcyan;
}
.left {
  width: 300px;
  background-color: lightgreen;
  margin-left: -100%;
}
.right {
  width: 300px;
  background-color: lightseagreen;
  margin-left: -300px;
}
.center {
  height: 200px;
  margin-left: 300px;
  margin-right: 300px;
}
.container::after {
  content: '';
  display: block;
  clear: both;
}

Flex 布局

Flex 是 Flexible Box 的缩写 flex 布局表示弹性布局，可以为盒状模型提供最大的灵活性

<div class="header">头部</div>
<div class="container">
  <div class="left">左边</div>
  <div class="center">中间</div>
  <div class="right">右边</div>
</div>
<div class="footer">尾部</div>

.header,
.footer {
  height: 64px;
  width: 100%;
  background-color: lightpink;
}
.content,
.left,
.right {
  float: left;
  height: 200px;
}
.container {
  display: flex;
}
.center {
  flex: 1;
  background-color: lightcoral;
}
.left {
  width: 300px;
  background-color: lightgreen;
}
.right {
  width: 300px;
  background-color: lightseagreen;
}

16. Less / sass 的区别

提示

  1. less 和 sass 语法相似
  2. sass 和 scss 区别：2.1 sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名。2.2 sass 是以严格的缩进式语法规则来书写，不带大括号“{}”和分号“;”，而 SCSS 的语法书写和 CSS 语法书写方式非常类似，带大括号分号。
  3. 为了提高可读性推荐使用 scss ，scss 常用语法
LESSopen in new windowSASSopen in new window
是一门 css 预处理语言，他扩充了 css 语言，增加了诸如变量，混合(mixin),函数等功能，让 css 更易维护，方便制作主题，扩充，less 可以运行在 Node 或浏览器端是一种 css 的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得 css 的开发，变得简单和可维护

17. 什么是 BFC,如何去创建 BFC ? 它能解决什么问题

BFC：简单说，它是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用

如何创建 BFC：当一个 HTML 元素满足下面条件的任何一点，都可以产生 BFC,常见的，float 的值不为‘none’，overflow 的值不为‘visible’,display 的值为‘table-cell’,‘table-caption’,or‘inline-block’中的任何一个，position 的值不为‘static’或‘relative’中的任何一个创建一个 BFC 的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时 BFC 仍然属于文档中的普通流

18. CSS 中的长度单位有哪些

CSS 长度单位有 px,pt,rem,em,ex,vw,vh,vmin,vmax， 其中常用单位有 px, rem, em

绝对长度单位

  1. PX 实际上是一个按角度度量的单位，是一个像素单位
  2. IN 英寸是一个物理度量单位 1in==96px
  3. Cm 厘米是比较熟悉有用的物理度量单位，他也映射成像素 1cm==37.8px
  4. Mm 毫米是个小数量级的物理度量单位 1mm0.1cm3.78px

相对字体的长度

  1. Em 是一个相对单位 1em16px0.17in12pt1pc4.2mm0.42cm
  2. Rem rem 和 em 一样也是一个相对单位，但是和 em 不同的是 rem 总是相对于根元素，而不像 em 一样使用级联的方式来计算尺寸
  3. Point 它是一个物理度量单位 1pt=1/72in
  4. Pica pica 和 points 一样，只不过 1pc=12pt
  5. Ex ex 是一个基于当前字体的 x 字母高度度量的
  6. Ch ch 的内涵和 x 高度相似，只是 ch 是基于字符 0 的宽度的而不是基于字符 x 高度的

可视区百分比长度单位

  1. Vw 是可视区宽度单位，1vw 等于可视区宽度的百分之一，vw 单位跟百分比很相似

19. CSS 中选择器的优先级关系

!important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性

20.什么是 SVG,它能做什么

SVG 它是可伸缩矢量图形，用来定义用于网络的基于矢量的图形，图形在放大或者改变尺寸的情况，其图形质量不会有所损失。矢量图和位图的区别也就在于矢量图无限放大不影响图片质量。

21.CSS 的加载时异步的吗？它表现在什么地方

  1. 触发异步样式下载的诀窍是使用一个 <link> 元素，并为media 属性设置一个不可用的值 (我用的是 media="none", 不过其它的任何值也是可以的)。当一个媒体查询的结果值计算出来是 false 的时候，浏览器仍然会下载样式表，但是不会在渲染页面之前等待样式表的资源可用
  2. 延迟添加link标签到页面，这种方式比较兼容可以使用同样原理，延迟加载 JS

22. 工作中遇到的浏览器兼容问题有哪些？你都知道哪些常用的 HACK 技巧

提示

HACK 概念open in new window

浏览器兼容问题

  1. 不同浏览器的默认初始值不同。

    • 解决方法：引入全局控制样式，或者使用第三方

  2. 块属性标签 float 后，又有横行的 margin 的情况下，在 IE6 显示 margin 比设置的大。

    • 解决方法：在 float 的标签样式控制中加入 display:inline,将其转化为行内属性。

  3. 设置小于 10px 高度标签，在 IE6,7,无法正常显示设置高度。

    • 解决方法：给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度

  4. 行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，IE6 间距 bug

    • 解决方法：在 display:block;后面加入 display:inline;display:table;

  5. 图片默认有间距。

    • 解决方法：使用 float 属性为 img 布局。

  6. 标签最低高度设置 min-height 不兼容。

    • 解决方法：如果我们要设置一个标签的最小高度 200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

常用的 HACK 技巧

  1. Ie 浏览器 hack 如下
    • _nowamagic:1px;-----------ie6
    • *nowamagic:1px;-----------ie7
    • nowamagic:1px\0;----------ie89
    • nowamagic:1px\9\0;--------ie9
    • :root nowamagic:1px; ----ie9
  2. Firefox 与 Chrome 的 Hack
    • Firefox:@-moz-document url-prefix() /*写在选择器外层时（只可写在此处）：Firefox only*/
    • Chrome:@media screen and (-webkit-min-device-pixel-ratio:0) /*写在选择器外层时（只可写在此处）：Chrome only*/

23. 请解释一下“::before”和“:after”中的双冒号和单冒号的区别

如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全

这是测试显示的页脚
无版权