css面试总结[updating]

1.visibility=hidden, opacity=0，display:none

都是隐藏元素，让元素消失
display=none重排，元素消失，会改变页面布局，可以理解成在页面中把该元素删除。
visibility=hidden重绘，占空间，但是看不见，不会改变页面布局，不会触发该元素已经绑定的事件
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的

2.说一下块级元素和行内元素、行内块元素

display:inline-block，block，inline

块元素（block）：独占一行，自动填满父元素宽度，可以设置 margin 和 pading 以及高度和宽度 ，块级元素中可以包含块级元素和行内元素。宽度没有设置时，默认为100%；

块级元素有：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre（定义预格式化的文本）、header、section、aside、footer。

行内元素（inline）：不会独占一行，水平排列直到当前行被占尽以后换行。width 和 height 会失效，并且在垂直方向的 padding 和 margin 会失效（水平方向有效）。根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

行内元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button。

inline-block：简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个 link（a 元 素）inline-block 属性值，使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

3.link 标签和 import 标签的区别

link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签，因此没有兼容性， 在支持 CSS 的浏览器上都支持，而@import 只有 IE5 以上才能识别。 link 方式样式的权重高于@import 的。

当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

4.position 属性（定位）

固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素， 那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky：

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 粘性定位占有原先的位置（相对定位特点）

默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit: 规定应该从父元素继承 position 属性的值。

5.浮动清除

方法一：使用带 clear 属性的空元素 在浮动元素后使用一个空元素如

，并在 CSS 中赋 予.clear{clear:both;}属性即可清理浮动。亦可使用
或 来进行清理。 方法二：使用 CSS 的 overflow 属性 给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。 在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮 动的效果。 方法三：给浮动的元素的容器添加浮动 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动， 影响布局，不推荐使用。 方法四：使用邻接元素处理 什么都不做，给浮动元素后面的元素添加 clear 属性。 方法五：使用 CSS 的:after 伪元素 结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素） 和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。 给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪 元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

6.盒模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：margin，border，padding和实际内容。

标准盒模型content-box：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

怪异盒模型border-box：一个块的总宽度=width+margin（左右）（既 width 已经包含了 padding 和 border 值）

inherit：继承父元素的 box-sizing

设置盒模型：box-sizing:border-box

7.了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流 有哪些方法

浏览器需要重新构造渲染，这个过程称之为重排（回流）
浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘，

引起重排的原因有：
添加或者删除可见的 DOM 元素，
元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，

引起重绘的原因有：
某个dom节点的颜色，背景颜色变了，字体大小，只影响自己，不影响其他元素

减少重绘重排的方法有：
尽量减少dom增删改
不在布局信息改变时做 DOM 查询，
使用 csstext,className 一次性改变属性
使用 fragment 对于多次重排的元素，比如说动画。
使用绝对定位脱离文档流，使其不影响其他元素

使元素脱离文档流的方法：
隐藏元素，施加修改，重新显示
使用document fragment在当前DOM之外构建一个子树，再把它拷贝会文档
将元素元素拷贝到另一个脱离文档的节点中，修改副本，完成后再替换原始元素

8.如何实现元素的垂直水平居中

对于行内块级元素

一：弹性布局 父元素 display:flex,align-items:center(垂直);justify-content: center;(水平)
二：父元素固定宽高，采用绝对定位，原理是子绝父相，父元素设置 position：relative，子元素设置 position：absolute，子元素设置设 置 top：50%，left：50%，然后通过 transform 或 margin 组合使用达到垂直居中效果，transform：translate（-50%，-50%） ，或者margin-top：-（高度/2）；margin-left:(宽度/2)
三：父级元素设置 display：table-cell，vertical-align：middle 达到垂直居中；如果还需要水平居中，则要设置子元素display: inline-block; 父元素设置text-align:center
四：采用 flex，父元素设置 display：flex，子元素设置 margin：auto

五：子绝父相，子top、bottom、left、right都设置为0，margin:auto

9.z-index 的定位方法

z-index 属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之 前，z-index 可以为负，且 z-index 只能在定位元素上奏效，该属性设置一个定位元素 沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有 auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承 z-index 属性 的值

10.文本省略号

单行

多行

11.双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠

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

12.flex布局

13.属性继承性

有继承性的属性

1、font字体系列属性

2、text文本系列属性

所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承：text-indent和text-align。 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

14.BFC

常见定位方案：
1.普通流定位：
元素按照其在HTML 中的先后位置至上而下布局
行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行
所有元素默认都是普通流定位
2.浮动
元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移
3.绝对定位
元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响

BFC块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则
BFC属于普通流，BFC可以看做是元素的一种属性，当元素拥有了BFC属性之后，这个元素就可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素

如何触发BFC（如何引发BFC）
根元素
float 不为 none 的元素
position 为 fixed 和 absolute 的元素
display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素
overflow 不为 visible 的元素

应用

原来display:block 的元素，浮动后，diaplay值没变，依然是block;

原来display：inline-block的元素，浮动后，display为block

原来display：inline的元素，浮动后，display值也被设置成block;