前端面试的热门问题之CSS_热门话题 效果 css

一、link标签和import标签的区别

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

二、transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from …. to，而animation可以一帧一帧的。

三、Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

四、BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

BFC区域不会与float box重叠

BFC是页面上的一个独立容器，子元素不会影响到外面

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

哪些元素会生成BFC：

1. 根元素
2. float不为none的元素
3. position为fixed和absolute的元素
4. display为inline-block、table-cell、table-caption，flex，inline-flex的元素
5. overflow不为visible的元素

五、垂直居中的方法

(1)margin:auto法

定位为上下左右为0，margin：0可以实现脱离文档流的居中.

(2)margin负值法

margin-top: -190px; /height的一半/

margin-left: -240px; /width的一半/

(3)table-cell（未脱离文档流的）

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

(4)利用flex

将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

六、说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度

行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
效。

七、position属性比较

固定定位fixed：

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

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

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

粘性定位sticky：
元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

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

八、浮动清除

方法一：使用带clear属性的空元素

• 在浮动元素后使用一个空元素，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
  来进行清理。

方法二：使用CSS的overflow属性

• 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
• 在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

• 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

• 什么都不做，给浮动元素后面的元素添加clear属性。

方法五：使用CSS的:after伪元素

• after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的
  IEhack 指的是触发 hasLayout。

九、css3新特性

CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。

十、CSS选择器有哪些，优先级呢

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等。

同一元素引用了多个样式时，排在后面的样式属性的优先级高。

样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；

样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

十一、怎么样让一个元素消失，讲讲

display:none; visibility:hidden; opacity: 0; 等等

十二、介绍一下盒模型

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

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

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

十三、如何实现元素的垂直居中

• 父元素display:flex,align-items:center;
• 元素绝对定位，top:50%，margin-top：-（高度/2）
• 高度不确定用transform：translateY（-50%）
• 父元素table布局，子元素设置vertical-align:center;

十四、calc属性

Calc用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)；

十五、line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度，

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

DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排。浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，引起重排重绘的原因有：

• 添加或者删除可见的DOM元素
• 元素尺寸位置的改变
• 浏览器页面初始化
• 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排
• 减少重绘重排的方法有
• 不在布局信息改变时做DOM查询
• 使用csstext,className一次性改变属性
• 使用fragment

十七、css预处理器有什么

less，sass等