前端面试之css相关内容整理（前端的css）

1.说说盒模型？ box-sizing常用的属性有哪些？分别有什么作用？

答：css盒模型是css规范的一个模块，每个元素由一个方形的盒子表示。 该盒子包含有内容区域（content）、内边框区域(padding)、边框区域(border)、外边框区域(margin)

内容区域：元素真实内容，包含背景、颜色或图片，大小为content-box

内边距区域padding: 如果内容区域设置了背景、颜色或图片，这些样式为延伸到padding上

box-sizing的常用属性：

• content-box是默认属性(w3c标准盒模型)，width和height只是内容的宽和高，并不包括padding、border、margin。上面展示的child实际渲染的宽高为260 * 160

• border-box(IE盒模型), width和height包含了padding和border,但不不含margin。上面展示的child实际渲染的宽高为220 * 120,多了margin的宽高

2.居中的问题，是不经常碰到呢，哈哈

水平居中

• 容器上定义一个width,然后设置margin: auto／margin: 0 auto;
• 父容器的text-align: center,子容器的display:inline-block
• 绝对定位，left: 50%; （margin-left: -宽度/2 或者css3 transform: translate(-宽度/2, 0),其中宽度不确定情况可以使用translate(-50%, 0)）
• flex方式， justify-content: center

垂直居中

• 单行文本line-height
• 行内块级元素 display:inline-block; vertical-align: middle;
• 元素高度不定，vertical-align只在父层为td或th时生效，并且父元素display: table，其它不起作用, 子元素display: table-cell; vertical-align:middle;
• 绝对定位，top: 50%; （margin-top: -高度/2 或者css3 transform: translate(0, -高度/2),其中高度不确定情况可以使用translate(0，-50%)）
• flex方式，align-items: center;

3.如何确定选择器优先级

答：内敛样式 》 id选择器（0100） 》 类选择器（属性选择器，伪类） 》 类型选择器（伪元素 0001） 》 通配符（0000）

但是!important会覆盖上面所有

4.BFC是什么？（这个平时很少关注，但面试也不能遗漏）

答：BFC即为Block-formatting-context(块级格式化上下文)，它是页面的一块渲染区域，这个区域与外部无关。它有自己的渲染规则，决定了子元素的位置以及和其它元素的关系和作用。

规则

• 内部的box垂直方向一个一个放置
• 垂直方向距离由margin决定，相邻两个box的margin会发生重叠。
• BFC是页面上的独立区域，不受外面元素的影响。
• 每个元素的margin box左边，与包含块的border box左边相接触
• BFC区域不会与float box重叠
• 计算BFC的高度时，浮动元素参与计算

哪些会生成BFC

• 根元素
• float不为none
• position为absolute或fixed
• display: inline-block, table-cell, table-caption, flex, inline-flex
• overflow为hidden, scroll, auto(不为hidden)

其中，下面第5个问题就会涉及到BFC的相关知识

5.为什么清除浮动？如何清除浮动？

答：一个块级元素的高度如果没有设置height,那么其高度由子元素撑开，如果子元素设置float,它脱离了文档流，父元素的高度会忽略。 为了使父元素高度撑起来，需要清除浮动。

清除浮动方法包括操作父元素和操作子元素：

• 操作父元素，涉及到上面的BFC，这个比较容易被忽略原理哦哦哦

• 对子元素进行操作

6.页面导入样式时，使用link和@import有什么区别？

答：

• 加载内容：link是xhtml标签，除了能加载css外，还能加载rss(简单信息聚合——xml文件)；@import只能加载css文件
• 加载顺序: link在页面载入的同时加载；@import的css是在页面加载完毕后被加载。
• 兼容性问题：link无兼容性问题; @import是css2.1里提出的，低版本不兼容
• dom控制问题: link样式，在js中操作dom可修改样式；@import不支持修改

7.CSS3哪些新特性? 新增伪类有那些？

答：css3新特性：圆角（border-radius）、阴影（box-shadow\text-shadow）、渐变（gradients）、过度与动画（transition and animations）,新的布局方式：多列布局（column）、flex、grid。

8.说下行内元素和块级元素的区别？行内块元素的兼容性使用？

答：

• 布局上： 行内元素在一行展示，水平排列；块级元素占据一行，垂直排列
• 结构上： 行内元素不可以插入块级元素，块级元素可以插入行内元素
• 属性上： 行内元素设置width、height无效，margin和padding上下无效。比较常用的行内元素： a、b、em、i、img、input、label、span、strong、sub、sup、textarea

行内块元素的兼容性使用：

9.zoom的作用？

• 检查页面是否闭合
• 样式排除法
• 检查是否清除浮动
• IE是否触发haslayout

10.父容器width和height分别为200 * 100， 子元素设置margin:50%时(考点包括margin百分比都是针对宽度，内联的上下都不起作用）

• 子元素的margin的百分比针对于父元素的Width
• 子元素margin:50%时，左右margin为100px,加自身的width超出了父元素宽度的范围，此时后面的元素会换行。因此，图中的'2222'虽然是inline-block方式，也在下一行。除非前一个margin的左右百分比之和小于50%,才会展示在一排
• 图中可以看出，子元素margin-top也是50%,所以父元素没有全包子元素，如果希望父元素全包子元素，可以通过在父元素添加overflow: scroll破坏BFC

11.使用css重新定义checkbox(https://github.com/xiaosunJessica/summary/blob/master/html/css-checkbox.html)

a. 结合input[type='checkbox']和label

b.input[type='checkbox']隐藏掉, label添加伪元素放在input位置处

c.input状态为checked时，将label的伪元素content进行修改

12.AB里面的容器不等高，如何做到使两个背景等高？

• 通过flex方式，让父元素display: flex;

• 通过position方式，例如：左侧高度固定，父元素position: relatvie; 右侧position: absolute; top: 0; bottom: 0;

• 父元素display: table; 两个子元素display: table-cell.

• 父元素使用display: grid; grid-template-colums: 1fr 200px;分为两列，子元素通脱grid-colum: 1/2占左边，另个占右边。

13.position的理解

14.px、em、rem

答：px是相对于显示器屏幕分辨率而言的。

em是相对于当前对象的文本的字体尺寸，如果当前对行内文本的字体尺寸未被设置，则依次向上查找直到相对于浏览器的默认字体

rem是相对于html根元素（比较推荐）

最后浏览器默认字体是16px,要设置一对一的对应关系，需要设置font-size：62.5%

最后的最后，欢迎大家吐槽和提建议和意见！！！

整理不全忘补充！！！