css面试题及答案
# css 面试题及答案
# CSS3 新特性
- 动画 animation 动画名称，一个周期花费时间，运动曲线（默认 ease），动画延迟（默认 0），播放次数（默认 1），是否反向播放动画（默认 normal），是否暂停动画（默认 running）
- 形状转换 transform 适用于 2D 或 3D 转换的元素
- 过渡 transition
- 选择器
- 阴影 box-shadow， text-shadow
- 边框 border-image
- 多列布局
- 背景渐变效果
- 圆角 border-radius
- 栅格布局 grid，弹性布局 Flex
- 媒体查询
# 盒子模型
- 标准盒模型
概念：浏览器按 W3C 标准解析执行代码；在标准模式（W3C 标准）下，盒模型为标准盒模型
box-sizing 设置 content-box
属性 width,height 只包含内容 content，不包含 border 和 padding。
- IE 盒模型
概念：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。在怪异模式下，盒模型为 IE 盒模型
box-sizing 设置 border-box
属性 width,height 包含 border 和 padding，指的是 content+padding+border。
# BFC
BFC (Block Formatting Context)块级格式化上下文
BFC 触发方式：
- 根元素，即 HTML 标签
- 浮动元素：float 值为 left、right
- overflow 值不为 visible，为 auto、scroll、hidden
- display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- 定位元素：position 值为 absolute、fixed
注意：display:table 也可以生成 BFC 的原因在于 Table 会默认生成一个匿名的 table-cell，是这个匿名的 table-cell 生成了 BFC。
约束规则：
内部的 Box 会在垂直方向上一个接一个的放置
内部的 Box 垂直方向上的距离由 margin 决定。（完整的说法是：属于同一个 BFC 的两个相邻 Box 的 margin 会发生折叠，不同 BFC 不会发生折叠。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明 BFC 中子元素不会超出他的包含块，而 position 为 absolute 的元素可以超出他的包含块边界）
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
作用：
阻止元素被浮动元素覆盖
阻止垂直外边距（margin-top、margin-bottom）折叠
可以包含浮动元素，清除内部浮动，防止高度塌陷
# css 选择器及优先级
行内样式，如: style=””，权值为 1000。
ID 选择器，如：#content，权值为 0100。
类，伪类和属性选择器，如.content，权值为 0010。
标签选择器和伪元素选择器，如 div p，权值为 0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为 0000。
继承的样式没有权值。
优先级：!important > 行内样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符 > 继承 > 浏览器默认属性
# 行内，行内块，块状元素区别
| 是否独占一行 | width、height | padding、margin | 默认宽高 | |
|---|---|---|---|---|
| 块级元素 | 是 | 有效 | 有效 | 撑满父元素 |
| 行内元素 | 否 | 无效 | padding 有效；margin 水平方向有效，竖直方向无效 | 随内部元素的内容变化 |
| 行内块级元素 | 否 | 有效 | 有效 | 随内部元素的内容变化 |
# position
- absolute(绝对定位)
其位置相对于最近已定位（static 定位以外）的父元素，如果元素没有已定位的父元素那么它的位置相对于窗口位置为定位
- static(默认的静态定位)
即没有定位，遵循正常的文档流对象，静态定位的元素不受 top、left、right、bottom 影响。
- relative(相对定位)
其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。
- fixed
元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。
- sticky(粘性定位)
基于用户滚动位置来定位，在未滚动出目标区域时，它的行为就像 position:relative;它的表现就像 position:fixed;，它会固定在目标位元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定效。否则其行为与相对定位相同。
# 清除浮动
使用 after 伪元素清除浮动
使用 before 和 after 双伪元素清除浮动
额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear：both；）
父级添加 overflow 属性（父元素添加 overflow:hidden）
# 伪类和伪元素区别
- 概念：
伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
- 语法不同
伪类 :link :hover
伪元素 ::before ::after
可以同时使用多个伪类，而只能同时使用一个伪元素,并且只能出现在末尾 ；
它们是否创造了新的元素,, 这个新创造的元素就叫 "伪无素"
# display:none;visibility:hidden;opacity:0;之间的区别
- 空间占据
display:none 隐藏后不占据额外空间，它会产生回流和重绘，而
visibility:hidden 和 opacity:0 元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
- 子元素继承
display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素 visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素 opacity: 0 使其重新显示
- 事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。
- 过渡动画
transition 对于 display 肯定是无效的；
transition 对于 visibility 也是无效的；
transition 对于 opacity 是有效
# line-height: 150%与 line-height: 1.5 区别
有单位（包括百分比）与无单位之间的区别：
有单位时，子元素继承了父元素计算得出的行距；
无单位时继承了系数，子元素会分别计算各自行距（推荐使用）。
# transform:scale() 和 zoom 区别
zoom 左上角缩放，scale 默认中心缩放；scale 可通过
transform-origin: 0 0来改变缩放焦点zoom 缩放不可以是负数，scale 可以是负数（详细用法请参考 MDN）
zoom 缩放之后不占文档流，下方的元素会自动上移；scale 缩放之后会仍然占据文档流(类似 position：relative)
zoom 缩放之后，用 js 获取元素的宽高仍然是缩放之前的宽高；scale 缩放之后，用 js 获取是缩放之后的宽高。
由于对文档流的影响，zoom 会引起整个页面的重绘；而 scale 只改变的缩放的元素
兼容性：zoom 不是 css 的标准属性，Firefox 和 Opera Mini 不支持，tranform:scale(x) 则是 css 的标准属性，除 Opera Mini 外，得到了几乎所有标准浏览器的支持。ie 浏览器是在 ie11 后开始支持，不过 ie9 和 ie9 以后的浏览器都支持带前缀的属性-ms-transform。如果你的网页要兼容 ie8 及其以前的 ie 浏览器，就需要做兼容性处理
# rem 与 em、px 的区别
一、px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em 是相对于其父元素来设置字体大小的，一般都是以
<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 Rem 是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。em 相对于父元素，rem 相对于根元素。