前端面试题汇总-CSS

CSS知识

animation

• animation-name # keyframe 动画名称
• animation-duration # 时长
• animation-timing-function # 速度曲线 linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)
• animation-delay # 延时
• animation-iteration-count # 次数 infinite(无限)
• animation-direction # 是否反向 alternate（反向） normal(正常)

transition

多个值空格分隔

• transition-property # css属性
• transition-duration # 时长
• transition-timing-function # 速度曲线 cubic-bezier贝塞尔曲线
• transition-delay # 延时

css盒模型

CSS中Box model是为两种

1、W3C的标准模型

• 内盒尺寸： Element空间高度/宽度：content height/width + padding + border；
• 外盒尺寸： Element空间高度/宽度：content height/width + padding + border + margin;

2、IE的传统怪异模型

• 内盒尺寸： Element空间高度/宽度：content height/width；
• 外盒尺寸： Element空间高度/宽度：content height/width + margin;

默认状态下当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
而设置box-sizing是用来设置width、height的作用对象的。box-sizing 属性值如下

• content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
• border-box：为元素设定的宽度和高度决定了元素的边框盒，为元素指定的任何内边距和边框都将在已设定的宽度和高度内部绘制。

经过试验在border-box 模式下 元素实际计算高度 = max(width, padding + border) 查看demo

BFC: 块级格式化上下文

下列方式会创建块格式化上下文：

• 根元素(html)
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别 是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 paint 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
MSDN详细解释
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC

IFC: 内联格式化上下文（Inline Formatting Contexts）

• 块级元素中仅包含内联级别元素
• 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
• 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC: 网格布局格式化上下文（GridLayout Formatting Contexts）

display属性值设置为为“grid”或者“inline-grid”的容器
可看作二维布局，比flex更为强大
网格布局

FFC: 自适应格式化上下文（Flex Formatting Contexts）

display属性值设置为“flex”或“inline-flex”的容器。
弹性布局

容器有6个属性

• flex-direction ： row | row-reverse | column | column-reverse; 控制方向
• flex-wrap ： nowrap | wrap | wrap-reverse; 控制换行
• flex-flow ： <flex-direction> || <flex-wrap>;
• justify-content : flex-start | flex-end | center | space-between | space-around; 主轴的对齐方式
• align-items ： flex-start | flex-end | center | baseline | stretch; 交叉轴的对齐方式
• align-content : flex-start | flex-end | center | space-between | space-around | stretch; ;多根轴线的对齐方式

元素有6个属性

• order : 排列顺序, 数值小者在前，默认0
• flex-grow: 放大比例，默认0，如子元素均为1则平分剩余空间
• flex-shrink： 缩小比例，默认1。如果值为0不缩小
• flex-basis： 占据主轴空间的大小，放大缩小时的基准值， 默认auto即本来大小
• flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
• align-self: auto | flex-start | flex-end | center | baseline | stretch; 覆盖 align-items

浮动与清除浮动

浮动的特点

查看浮动 demo

• 浮动的盒子可以向左向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止。
• 浮动元素不在文档普通流中，所以文档普通流中的块表现得像浮动块不存在一样。
• 造成父元素高度塌陷

什么是文档流(normal flow)

• 将窗体自上而下分成若干行,并在每行中按从左至右的依次排放元素,即为标准流
• 浮动(float)、绝对定位(absolute)、固定定位(fixed)会脱离标准流
• 固定和绝对定位会开启堆叠模式

堆叠模式层级顺序关系如下

1. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
2. 形成堆叠上下文环境的元素的背景与边框
3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
4. 无 position 定位（static除外）的 float 浮动元素
5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6. 拥有 z-index:0 的子堆叠上下文元素
7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

查看层级顺序关系demo

清楚浮动的方法

1. 给父级也加浮动
2. 给父级加display:inline-block
3. 在浮动元素下加 元素 clear:both;
4. 父元素overflow: hidden
5. 给浮动元素的父级加{zoom:1;}

水平垂直居中

定宽高

简单 demo

• 绝对定位+margin: 负一半
• 绝对定位+transform: translate(-50%,-50%)
• 绝对定位+left/right/top/bottom:0;margin:auto;
• flex布局 justify-content:center;align-item:center;
• grid布局 项目设置margin:auto;
• display: table-cell + text-align:center; vertical-align: middle + 子元素 display: inline-block;

不定宽高

• 绝对定位+transform: translate(-50%,-50%)
• flex布局 justify-content:center;align-item:center;
• display: table-cell + text-align:center; vertical-align: middle + 子元素 display: inline-block;
• grid布局+margin
• writing-mode: vertical-lr; + text-align: center; + 子元素dispaly: inline-block;

总结

内联元素水平居中

• 行内元素可设置：text-align: center;
• flex布局设置父元素：display: flex; justify-content: center;
  内联元素垂直居中
• 单行文本父元素确认高度：height === line-height;
• 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle;
  块级元素水平居中
• 定宽: margin: 0 auto;
• 不定宽： 参考上诉中不定宽高示例。
  块级元素垂直居中
• position: absolute设置left、top、margin-left、margin-to(定高)；
• position: fixed设置margin: auto(定高)；
• display: table-cell；
• transform: translate(x, y)；
• flex(不定高，不定宽)；
• grid(不定高，不定宽)，兼容性相对比较差；

contain