本文目录

• 1.什么是 BFC机制？
• 2.讲一讲用css绘制三角形的实现过程
• 3.link 与 @import 的区别
• 4.display、visibility、overflow的联系和区别
• 5.px、em、rem三者的联系和区别
• 6.举例几个常用的at规则
• 7.如何防止CSS阻塞渲染
• 8.解释一下”层叠上下文“
• 9.position 有哪些属性？position: sticky 用过没，有什么效果
• 10.常见的两栏自适应布局
• 11.常见的几种三栏经典布局
• 12.谈谈你对CSS盒模型的认知
• 13.说下transform translate和transition的区别

1.什么是 BFC机制？

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件 (以下任意一条)

• 1、浮动元素，float 除 none 以外的值；
• 2、定位元素，position（absolute，fixed）；
• 3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
• 4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
• 在IE下, Layout,可通过zoom:1 触发

触发了BFC的布局规则:

• 1.浮动的元素会被父级计算高度(父级元素触发了BFC)
• 2.非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
• 3.margin不会传递给父级(父级触发BFC)

开发中的应用场景：

• 阻止margin重叠（父子元素的父元素设置为overflow:hidden;）
• 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中，父元素设置overflow:hidden;触发BFC)
• 自适应两栏布局（兄弟元素，一边float，另外一边overflow:hidden;）
• 可以阻止元素被浮动元素覆盖（overflow:hidden;触发BFC不会让自身被浮动元素覆盖，当然也不会覆盖浮动元素）

2.讲一讲用css绘制三角形的实现原理

给一个元素添加样式宽和高的值为0，border的宽度的值设置为想要绘制的三角形的高，然后将border-color的三边设置为transparent，目标边的颜色设置为目标颜色就可以实现三角的绘制了。

3.link 与 @import 的区别

(1)从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 type、rel 连接属性等，<link rel="stylesheet" type="text/css" href="demo.css" />
(2)加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
(3)兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
(4)DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，所以无法使用@import的方式插入样式。

@import的使用分两种情况，一种是在html中在style标签中使用，如：
<style type="text/css">@import url("../css/demo1.css");</style>
这样使用方式会让该css文件在页面加载完毕后才被加载，同时多个css文件的加载方式为同步加载，所以应该杜绝在html中使用@import
另外一种方式是在css文件中通过@import "demo2.css";这种类型的代码来实现引入别的css文件，这种形式有利于样式表的修改和拓展，但因为渲染效率的问题，在开发中也很少用到。

4.display、visibility、overflow的联系和区别

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display 、visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击之后就关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫。

display 显示

display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。
visible : 　对象可视
hidden : 　对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 　默认配置，不剪切内容也不添加滚动条。
auto : 　 超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

5.px、em、rem三者的联系和区别

px、em、rem都是计量单位，都能表示尺寸，但是又有所不同，而且其各有各的优缺点。

px

px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em会继承父级元素的字体大小。使用em可以较好的适应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}

6.举例几个常用的at规则

• @charset 定义字符集 <meta charset="UTF-8" />
• @import 导入css文件 @import url(“./base.css”);
• @font-face 自定义字体 @font-face {}
• @keyframes 声明CSS3 animation动画 @keyframes fadeIn {}
• @media 媒体查询 @media screen and{}

7.如何防止CSS阻塞渲染

默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简项目的CSS，并利用媒体类型和查询来减少对渲染的阻塞。
我们可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例：

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

媒体查询由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。
例如，上面的第一个样式表声明未提供任何媒体类型或查询，因此它适用于所有情况，也就是说，它始终会阻塞渲染。
第二个样式表则不然，它只在打印内容时适用---或许您想重新安排布局、更改字体等等，因此在网页首次加载时，该样式表不需要阻塞渲染。
最后一个样式表声明提供由浏览器执行的“媒体查询”：符合条件时，浏览器将阻塞渲染，直至样式表下载并处理完毕。

8.解释一下”层叠上下文“

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴，y轴以及表示层叠的z轴。层叠上下文即元素在某个层级上z轴方向的排列关系。

层叠上下文.png

需要特别注意的是：inline-blcok 的 stacking level 比 float 高。

9.position 有哪些属性？position: sticky 用过没，有什么效果

position: relative;相对定位
position: absolute;绝对定位
position: fixed;固定定位
position:static：默认值
position: inherit规定应该从父元素继承 position 属性的值
position: initial把position属性设置为默认值，也就是重置position属性static
position: sticky 粘性定位
单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，在其就要滚出显示器屏幕的时候，表现为fixed，当其父元素不在视窗内时该元素会失去粘性效果。这一点与fixed的表现不同。fixed定位元素是相对于整个视窗定位。
sticky这个属性值兼容性目前比较差，safari需要添加-webkit-私有属性进行支持。
添加了position: sticky;后top，bottom，left，right四个阈值必须而且只能添加一个，同时父元素的overflow属性只能为默认的visible
position:sticky最基本的表现特别适合做导航的跟随定位效果，同时可以实现更富有层次的滚动交互。

10.常见的两栏自适应布局

左边定宽，右边自适应：
实现方案一：
flex 布局给父元素设置 display:flex，左边的子元素给个 width:100px，右边的子元素 flex:1 就可以了
在display:flex弹性盒模型中，有两个项目，左边项目定宽，右边项目 flex-grow: 1;width: 0;实现自适应。或者是右边项目flex: 1;width: 0;也可以实现。width:0这个属性不加也可以实现效果，但是加上这个属性可以防止右边项目过大时挤压左边项目的空间。
实现方案二 ：
两个盒子1和2，先让1float:left;，然后让2overflow:hidden;从而触发BFC绝对绝缘，不让其他浮动影响自己，也不让自己的浮动影响别人。
盒子1需要把宽度固定死，盒子2不用设置宽度，会自动填满剩余父盒子的剩余空间，从而达到自适应。但是需要注意这种方案下，子盒子需要设置height: 100%;才可以占满父盒子的全部高度。

11.常见的几种三栏经典布局

左右固宽，中间栏自适应布局方案：
1.父元素设置左右padding，中间栏width:100%，左右浮动
2.中间栏width:100%，并设置左右margin，两边浮动
3.flex布局：将父元素设置为display: flex，两边设置固定宽度,并不允许弹性缩放flex: 0; flex-basis: 200px，中间栏允许弹性缩放，不设置宽度flex:1;

12.谈谈你对CSS盒模型的认知

CSS盒模型分为IE盒模型和标准盒模型。
标准盒模型也叫做W3C盒模型，其content不包括padding和border，而IE模型包括border，padding。
浏览器默认的是content-box，CSS可以通过box-sizing:content-box和box-border-box设置元素的模型。
在JS中，通过dom.style.width/height只能获得行内设置的样式的值，style和link引入的样式无法通过此方法获得，可以通过dom.getBoundingClientRect()，拿到的是一个对象，其中top和left是元素相对于页面最左上角的距离，width和height是元素的宽和高。

13.说下transform translate和transition的区别

transform 应用于元素、2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate是transform 的属性值之一，让元素向指定的方向移动。
transition是指示元素何种属性以何种方式进行动画变换的属性。

transition:background-color .5s ease .1s;
//该元素的background-color属性，在0.5s的时间以ease的速度曲线进行动画转换，延迟执行0.1s
transition:all .5s;
//该元素的所有属性的动画转换时间为0.5s