css面试总结

js面试题：https://www.cnblogs.com/srqsl/p/17317510.html

html面试题：https://www.cnblogs.com/srqsl/p/17309191.html

 

盒模型介绍

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：只包含 content 。

IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。

box-sizing: border-box ：IE（替代）盒模型。

CSS选择器和优先级

id选择器、类选择器、后代选择器( > )

子选择器( 如：#head .nav ul li 从父集到子孙集的选择器 )

相邻兄弟选择器(如：h1+p,带加号+)

属性选择器(语法：[属性名]{}，[属性名=属性值]{}，[属性名^=属性值]{} ，[属性名$=属性值]，[属性值*=属性名]{}，例如：p标签里面写一个title属性，给title设置样式)

(^ $ *三种，分别对应开始、结尾、包含)

通配符选择器(*号，匹配页面中所有的元素)

伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

标签选择器（如：body,div,p,ul,li）

优先级：!important > 行内样式（即标签内的style）>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

css水平垂直居中多种实现方式

方法一：

.father { position: relative; }
.son { position: absolute;
　　    left: 50%;
　　    top: 50%;
　　    transform: translate(-50%, -50%);
}

方法二：

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

方法三：

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

方法四：

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

px，rem，em，vh，vw，%的区别

px：全称pixel像素被视为绝对单位，尽管它们与查看设备的 DPI 和分辨率有关。但是在设备本身上，PX 单元是固定的，不会根据任何其他元素进行更改。

em：em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size），如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸（16px）

rem：rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

vw：vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

vh：vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

%：百分比一般来说就是相对于父元素，例宽10%，占父级的10%的宽度

什么是BFC

BFC即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定

怎么生成一个BFC区域？

1.设置浮动（float），且值不为none（为 left、right），

2.设置定位（position）, 不为static或relative（为 absolute、fixed）

3.设置display为这些值inline-block、flex、table、table-cell、table-caption等

4.设置 overflow，且值不为visible (为 auto、scroll、hidden)

BFC 具有一些特性：

1.块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。

2.在 BFC 中上下相邻的两个容器的 margin  会重叠，创建新的 BFC 可以避免外边距重叠。

3.计算 BFC 的高度时，需要计算浮动元素的高度。

4.BFC 区域不会与浮动的容器发生重叠。

5.BFC 是独立的容器，容器内部元素不会影响外部元素。

6.每个元素的左 margin  值和容器的左 border  相接触。

根据BFC的特性，我们可以解决哪些问题？

问题1：解决外边距的塌陷问题（当两个盒子设置100的外边距，会发现应该200px的外边距发生了塌陷，margin重叠只有100px）

方法一：给其中一个标签添加一个父级标签，并给父级标签设置overflow：hidden使其成为BFC区域，使两个独立容器互不影响

方法二：给其中一个元素设置display：inline-block，同样可以使其成为BFC区域

问题2：解决父元素高度塌陷问题（子元素设置float:left，父级元素就找不到高，造成塌陷）

方法：将父元素设置为BFC区域即可，给父级元素overflow：hidden

问题3：解决浮动重叠问题（前一个盒子设置了float:left，导致后面的盒子与前面的盒子发生重叠）

方法：给后面的盒子添加overflow：hidden

 

清除浮动的方法

方法一：给父级设置overflow：hidden

方法二：添加一个空白标签，并给空白标签设置clear：both即可

方法三：使用给父级添加after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

方法四：给父级添加before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
        content: "";
        display: block;
        clear: both;
}

 如何用css实现多行文本溢出省略效果

单行：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;

opacity: 0、visibility: hidden、display: none的区别

结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能： displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少

css3新增了那些东西？

盒模型属性：border-radius、box-shadow、border-image

背景：background-size、background-origin、background-clip

文本效果：text-shadow、word-wrap

颜色：新增 RGBA，HSLA 模式

渐变：线性渐变、径向渐变

2D/3D转换：transform、transform-origin

过渡与动画：transition、@keyframes、animation

多列布局

媒体查询

css3中 transition和 animation的属性分别有哪些

transition 过渡动画：

transition-property：指定过渡的 CSS 属性

transition-duration：指定过渡所需的完成时间

transition-timing-function：指定过渡函数

transition-delay：指定过渡的延迟时间

animation 关键帧动画：

animation-name：指定要绑定到选择器的关键帧的名称

animation-duration：动画指定需要多少秒或毫秒完成

animation-timing-function：设置动画将如何完成一个周期

animation-delay：设置动画在启动前的延迟间隔

animation-iteration-count：定义动画的播放次数

animation-direction：指定是否应该轮流反向播放动画

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

animation-play-state：指定动画是否正在运行或已暂停

重排（reflow）和重绘（repaint）的理解

简单地总结下两者的概念：

重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。

重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

如何减少重排和重绘？

最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。

批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。

使用 absolute 或 fixed使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。

开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。