CSS面试题(二)

2017-10-09 本文已影响57人迷人的洋葱葱

一、用css实现div水平垂直居中。

方法一：设置div的宽度和高度，然后设置div为绝对定位，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div分别左移和上移，左移和上移的大小就是该div宽度和高度的一半。
注意：该方法必须已知div的宽度和高度。

#box {
    background-color: #00bc9b;
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-150px;
}

<div id="box"></div>

方法二：
元素未知的宽度高度的元素，使其让它的top,bottom,left,right,都与父级的距离为零，如果其元素宽高不够的，就会用margin:auto去填充其大小。
注意：该方法可以用于宽高未知的元素。
从而实现了居中。

#box{
    position:absolute;
    width:100px;
    height:100px;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    background:red;
    }

<div id="box"></div>

方法三：
用弹性盒模型实现水平垂直居中

.wrap{
    width:400px;
    height:400px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:red;
    }
.content{
    width:200px;
    height:200px;
    background:blue;
    }

<div class="wrap">
<div class="content"></div>
</div>

二、解释px/em/rem

1、px像素（Pixel）：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)。
特点：
①IE无法调整那些使用px作为单位的字体大小；
②国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
③Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
2、em:相对长度。1em为父级元素的字体大小。
特点：
①em的值并不是固定的；
②em会继承父级元素的字体大小。
3、rem:相对长度。rem是CSS3新增的一个相对单位（root em，根em）。1rem为HTML根元素的字体大小。除了IE8及更早版本外，所有浏览器均已支持rem。
特点：
①只修改根元素就成比例地调整所有字体大小
②可以避免使用em时字体大小逐层复合的连锁反应。

三、正常正常文档流和脱离文档流的区别

正常文档流：元素排版布局过程中，元素自动从左向右，从上往下排列。
脱离文档流：元素脱离普通排版布局的位置，其他元素会当做脱离文档流的元素不存在进行定位。
补充：
1、block元素和inline元素在文档流中的排列方式
block元素：
①独占一行
②宽度默认填满其父元素宽度
③可以设置宽高和内外边距。
inline元素：
①多个行内元素排列在同一行里，直到一行排不下才会换行
②宽度由内容撑开
③支持水平方向的左右内外边距，不支持竖直方向的左右内外边距。
2、哪些css样式会引起脱离文档流？区别是什么？
position:absolute; position:fixed;和float
绝对定位：完全无视。其他元素和元素内的文本都无视这个元素。
浮动float:部分无视。其他元素会无视这个元素，但元素内的文本会为这个元素让出位置。
3、浮动的定义：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边框为止。

参考文献：
脱离文档流分析

四、render tree 的创建过程

1、处理HTML标签和js生成的标签建立DOM树
2、处理CSS样式建立CSSOM树
3、连接CSSOM树和DOM树形成一个render树
4、从根节点递归调用，计算render树上每一个可见节点的大小、形状和位置（reflow）
5、在屏幕上画出每一个可见节点(repaint)
补充：
有哪些不可见的节点？
1、一些节点完全不可见，如script标签，meta标签等等，这些节点不会影响渲染输出。
2、通过css样式被隐藏的节点，如css样式为display:none的节点。
渲染树render tree

五、repaint（重绘） reflow（回流）

reflow:浏览器根据css样式计算元素的大小、形状、位置，并将元素放到它该出现的位置，这个过程称为reflow。（元素布局发生改变）
repaint:当DOM节点的位置、大小、形状等样式都确定下来，浏览器按照元素各自的样式，将这些元素重新绘制了一遍，使页面呈现出来，这个过程叫做repaint。（元素的颜色等属性发生改变，但并未影响布局）
注意：回流必然重绘，重绘不一定引起回流。

补充：

1、引起Repain和Reflow的一些操作
①增加、删除、修改DOM节点
②移动DOM的位置
③resize窗口或滚动页面。
④动画
⑤修改网页的默认字体
⑥设置style属性的值
⑦修改或删除css样式
常见例子：
display:none会触发reflow,visibility:hidden只会触发repaint

2、如何减少repaint和 reflow?
①避免逐条修改css样式。可以预先定义好css的class样式，通过修改className将多次样式属性的操作合并成一次操作。
②对需要进行复杂操作的元素进行“离线处理”，处理完后一起更新
a、使用DocumentFragment进行缓存操作
b、使用display:none
c、使用cloneNode()和replaceChild技术
③避免在循环中修改DOM节点
④尽可能修改层级比较低的DOM节点
⑤将需要多次重排的元素的position属性设置为absolute或fixed,使元素脱离文档流。这样它们的改变不会影响到其他元素的布局，只会引起重绘而不是回流。
⑥避免使用table布局，因为table中的某个元素触发reflow会导致table里面所有元素的reflow。
⑦避免使用css的javaScript表达式？？？（没搞懂），如果css里面有expression，每次都会重新计算一遍。

参考文献：
reflow（回流）和repaint（重绘）及其优化