CSS 面试题

CSS3有哪些新能特性？

新增特性：

• 圆角border-radius
• 阴影 box-shadow
• 文字特效 text-shadow
• 线性渐变 gradient
• 变形 transform

增加了css选择器、媒体属性、多栏布局

媒体查询在CSS2中已经存在，只不过只能作用于style和link标签上

css选择器的优先级顺序？

内联样式 > ID选择器 > 类选择器 > 标签选择器

通过CSS有哪些方式可以实现隐藏页面上的元素？

方式	说明
opactiy: 0
visibility: hidden
overflow: hidden
display: none
transform: scale(0,0)
z-index: -9999
left: -9999

在CSS中有哪些定位方式？position的属性？

static：默认值，没有定位，元素正常出现在文档流中

relative：相对定位，相对于其在普通流中的位置进行定位

absolute：绝对定位，相对于最近的非static的祖先元素进行定位

fixed：固定定位，相对于浏览器窗口进行定位

sticky：粘性定位，像relative和fixed的结合，它的父元素在视口区域，当前元素就以fixed的方式进行定位，否则就以relative进行定位

水平垂直居中的方法？
未知宽高：position + transform

div{
  position:absolute;
  left:50%;
  top:50%;
  tansform:translate(-50%, -50%);
}

已知宽高：position + margin

div{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  argin-left: -100px;
  margin-top: -100px;
}

绝对定位方法：top left bottom right为0

div{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0;
}

flex布局方法

div{
    display: flex;
    justify-content: center;
    align-items: center;
}

转成行级块，给父盒子设置text-align：center

.father {
    text-align: center;
}

.child {

width: 100px;

height: 100px;

display: inline-block;

}

CSS属性content有什么作用？

css的content属性专门应用在after / before伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符号

translate和 margin 的百分比是根据什么计算的？（translate 和 margin 有什么不同？）

translate是根据自身宽度，margin是根据参照物

rgba() 和 opacity 有什么不同？

• opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色
• 设置rgba的元素，子元素不会继承透明效果

解释一下浮动及其工作原理

浮动元素脱离文档流，不占据空间。

浮动元素碰到包含它的边框或者浮动元素的边框停留

浮动元素引起的问题？

• 父元素的高度无法撑开
• 与浮动元素同级的，非浮动元素会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动。否则会影响页面显示的结构

清除浮动的方式？

• 父级元素定高，定义height
• 父级元素增加 overflow: hidden

• 结尾处增加 br

  <br style="clear:both"/>

• 父级元素增加伪元素 :after

  .clearfix:after{
  　　content: '';
  　　display: block;
  　　clear: both;
  　　visibility: hidden;
  　　height: 0;
  }

clear 实现清除浮动的原理？

原理：clear是css中的定位属性，规定元素的那一侧不允许浮动元素，clear: both 就是规定在左右两侧都不允许浮动元素

怎么理解盒子模型？

浏览器的渲染引擎对网页文档进行布局时，会按照”CSS基础盒模型“ （CSS Basic Box Model）标准，将文档中的所有元素都表示成一个个矩形的盒子，再用CSS决定这些盒子的大小尺寸、显示位置、以及其他属性（如颜色、背景、边框等）。

盒模型由以下几部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）

标准盒模型 和 怪异盒模型有哪些区别？

两者的区别主要提现在元素尺寸的表示上。

盒模型的指定

在CSS3中，可以通过设置box-sizing的值：

• content-box 标准盒模型
• border-box 怪异盒模型

标准盒模型  box-sizing: content-box;

标准盒模型的width和height属性的范围只包含了content

标准盒模型下，元素的宽（width）高（height）值即为盒模型中内容（content）实际宽高值

盒子宽度 = border-left + padding-left + width + padding-right + border-right

占据页面宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

怪异盒模型 box-sizing: border-box;

IE盒模型的width和height属性的范围包含了border、padding和content

在怪异盒模型下，元素的宽（width）高（height）不是 content的实际宽高，而是去除margin后，元素占用区域的宽高

盒子宽度 = width

盒子占据页面宽度 = margin-left + width + margin-right

盒模型中，content-box是标准，为什么经常使用border-box?

content-box是W3C的标准盒模型，元素的宽（width）高（height）指的是content区域的宽高。增加border、padding会把破坏布局

border-box是IE的怪异盒模型，元素的宽（width）高（height）指的是content宽高 + border + padding，在元素基础上添加border和padding，不会把破坏布局

什么是BFC？

BFC（Block Formatting Context），块级格式化上下文。是页面布局中的一种css渲染模式。相当于一个独立的布局容器。里面的元素和外部的元素相互不影响

怎么创建BFC？

• position值为 absolute 或 fixed
• float值不为 none
• overflow值不为visible
• display值为 inline-block、flex、inline-flex、grid、inline-grid

BFC的作用？

避免外边距重叠（两个相邻的盒子外边距重叠或父子盒子的外边距塌陷）

清除浮动

计算BFC高度时，浮动元素也会参与计算

什么外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collaps

在css中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式称为折叠，所结合成的外边距成为折叠外边距

折叠结果计算规则：

• 两个相邻的外边距都是正数时，折叠结果取两者之间较大的值
• 两个相邻的外边距都是负数时，折叠结果取两者绝对值的较大值
• 两个外边距一正一负时，折叠结果取两者相加的和

浏览器是怎样解析css选择器的？

css选择器是从右向左解析的，为了避免对所有元素进行遍历

若从左向右匹配，发现不符合规则，需要回溯，会损失很多性能

若从右向左匹配，先找到最右节点，向上寻找，会筛选掉大量不符合条件的最右节点

谈谈对媒体查询的理解？

响应式适配，根据不同的屏幕尺寸，显示不同的效果

媒体查询由两个部分组成：

一个可选的媒体类型 (计算机屏幕screen、打印预览模式print、all所有设备)

零个或多个媒体功能限定表达式（max-width: 500px、min-width: 500px）

@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
}

说一下CSS的自适应单位？

vw 是相对视口（viewport）的宽度而定，1vw是viewport宽度的1%

vh  是相对窗口（viewport）的高度而定，1vh是viewport高度的1%

vmin和vmax 比较的是vw和vh，选择其一

vmin 选择的是两者较小的值，比如宽度500px，高度300px，1vmin就是3px

vmax 选择的是两者较大的值，比如宽度500px，高度300px，1vmax就是5px

px、em、rem之间有什么区别？

• px：绝对单位。代表像素数量，页面会按照给出的精确像素进行展示
• em：相对单位。基于父元素的字体大小，如果自身定义了字体大小则按照自身的来算
• rem：相对单位。可以理解为root em，基于根节点<html>的字体大小

谈谈对flex的理解？

flex是flexible box的缩写，即弹性布局，为盒模型提供灵活性

只需要声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器完成实际布局

flex-direction: 调整主轴方向

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justify-content 主要用来设置主轴方向的对齐方式

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

align-items 用于调整侧轴的对齐方式

flex-start： 元素在侧轴的起始位置对齐。
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

align-content 用来设置多行的 flex 容器的排列方式

flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。

flex-wrap 属性控制 flex 容器是单行或者多行,默认不换行

nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。

display、visibility、opacity的区别？

• display: none
  • dom结构：不会占据空间
  • 事件监听：无法进行事件监听
  • 性能：动态改变此属性，会引起重排。性能较差
  • 继承：不会被子元素继承
  • transition：不支持display

• visibility: hidden
• dom结构：会占据空间
• 事件监听：无法进行事件监听
• 性能：动态改变此属性，会引起重绘，性能较高
• 继承：会被子元素继承，子元素可以设置visibility: visible取消隐藏
• transition：visibility会立即显示，隐藏会延时
• opacity: 0
  • dom结构：会占据空间
  • 事件监听：可以进行事件监听
  • 性能：不会引起重绘，性能较高
  • 继承：会被子元素继承，子元素可以通过设置opacity: 1取消隐藏
  • transition：opacity可以延时和隐藏

position的absolut与fixed有什么相同点和不同点？

相同：

• 让元素脱离文档流，不占据空间
• 改变行内元素呈现的方式，display被置为block

不同：

• absolut的根元素是可以设置的，而fixed的根元素固定为浏览器窗口
• 滚动网页的时候，fixed在浏览器窗口的位置是不会变化的

css伪类和伪元素

伪类：一般用于匹配元素特殊状态，例如：:checked、:hover

伪元素：用于创建一些不在DOM树中显示的元素，并为其添加样式，例如：:after、:before（注：伪元素无法注册事件，不能通过js控制伪元素）

　　伪类用单冒号表示：如:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child、:nth-last-child、:not()

　　伪元素用双冒号表示：如::fist-letter、::first-line、::before、::after

　　部分伪类解释：

　　:link　　设置未被访问的链接样式   　　　　:visited　　设置被访问的链接样式

　　:hover　　设置鼠标悬浮的样式　　　　　　:active　　设置鼠标松开的样式　　　:focus 　　使用键盘移动页面焦点时的样式

　　伪类弥补了常规css选择器的不足，伪元素创建了一个虚拟容器

.clearfix:after{
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}