CSS面试题汇总（二）

往期点这里→CSS面试题汇总（一）

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

参考答案：

垂直方向：line-height

水平方向：letter-spacing

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

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

12. px 和 em 的区别。

参考答案：

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

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

13. 如何垂直居中一个元素？

参考答案：

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {width: 200px;height: 200px;background-color: #6699ff;position: absolute;/*父元素需要相对定位*/top: 50%;left: 50%;margin-top: -100px;/*设为高度的1/2*/margin-left: -100px;/*设为宽度的1/2*/
}

方法二：绝对定位居中（改进版之一未知元素的高宽）

.content {width: 200px;height: 200px;background-color: #6699ff;position: absolute;/*父元素需要相对定位*/top: 50%;left: 50%;transform: translate(-50%, -50%);/*在水平和垂直方向上各偏移-50%*/
}

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {width: 200px;height: 200px;background-color: #6699ff;margin: auto;/*很关键的一步*/position: absolute;/*父元素需要相对定位*/left: 0;top: 0;right: 0;bottom: 0;/*让四个定位属性都为0*/
}

方法四：flex 布局居中

body {display: flex;/*设置外层盒子display为flex*/align-items: center;/*设置内层盒子的垂直居中*/justify-content: center;/*设置内层盒子的水平居中*/.content {width: 200px;height: 200px;background-color: #6699ff;}
}

那么问题来了，如何垂直居中一个 img（用更简便的方法。）

.content {//img的容器设置如下display: table-cell;text-align: center;vertical-align: middle;
}

14. BFC 什么是 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 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

15. 用纯 CSS 创建一个三角形的原理是什么？

参考答案：

span {width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;
}

16. Sass、LESS 是什么？大家为什么要使用他们？

参考答案：

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

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

为什么要使用它们？

1.结构清晰，便于扩展。
2.可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
3.可以轻松实现多重继承。
4.完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

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

参考答案：

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

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

18. 移动端 1px 问题的解决办法

参考答案：
推荐解决方法：媒体查询 + transfrom

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {.border-bottom::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {.border-bottom::after {-webkit-transform: scaleY(0.33);transform: scaleY(0.33);}
}

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

参考答案：

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

不可继承：border padding margin width height ;

20. 几种常见的 CSS 布局

参考答案：

单列布局
两列自适应布局
圣杯布局和双飞翼布局
伪等高布局
粘连布局

CSS面试题汇总（二）相关推荐

前端HTML+CSS面试题汇总一
目录你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Quirks模式是什么?它和Standards模式有什么区别 Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有 ...
百度糯米android面试题,前端面试—CSS面试题汇总
前端面试-CSS面试题汇总博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.flex常见面试题 Flex 是 Flexible ...
【2022前端面试】CSS面试题汇总（加紧收藏）
[2022前端面试]CSS面试题汇总(加紧收藏) 更新时间:2022年3月2日. 本文致力于建设前端面试题库,欢迎兄弟们投稿哈! 大纲 CSS整体的在上次的篇幅上有了较大的变化,画一个思维导图及时更新 ...
面试题汇总二 Java 多线程篇
前言题目汇总来源史上最全各类面试题汇总,没有之一,不接受反驳面试题汇总一 Java 语言基础篇面试题汇总二 Java 多线程篇面试题汇总三 Java 集合篇面试题汇总四 JVM 篇面试题 ...
2023面试题汇总二
一.CSS面试题 1. 清除浮动的方式有哪些? 为什么要清除浮动?因为浮动的盒子脱离标准流,如果父盒子没有设置高度的话,下面的盒子就会撑上来. 额外标签法(在最后一个浮动标签后,新加一个标签,给其设置 ...
（45）css面试题集锦二
31.怎么让Chrome支持小于12px 的文字? 1.用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观. 2.使用12px及12px以上字体大小:为 ...
网络/运维工程面试题汇总二
10.简述NAT地址转换答:有三种类型:静态转换.动态转换.端口复用(PAT).其中端口复用最为常见,一般配置在公司的接入路由器上. 11.内网有60台主机(其中还有服务器),只有5个公网IP,怎么 ...
CSS面试题汇总（一）
1. 实现不使用 border 画出 1px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果. 参考答案: <div style="height:1px;overflow ...
【总结】PHP常见面试题汇总(二)。。。
//第51题:统计一维数组中所有值出现的次数?返回一个数组,其元素的键名是原数组的值;键值是该值在原数组中出现的次数 $array=array(4,5,1,2,3,1,2,"a", ...

CSS面试题汇总（二）

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

12. px 和 em 的区别。

13. 如何垂直居中一个元素？

14. BFC 什么是 BFC?

15. 用纯 CSS 创建一个三角形的原理是什么？

16. Sass、LESS 是什么？大家为什么要使用他们？

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

18. 移动端 1px 问题的解决办法

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

20. 几种常见的 CSS 布局

CSS面试题汇总（二）相关推荐

最新文章

热门文章