问：display:none和visibility:hidden区别是什么
css绘制画面有两种形式：repaint 和reflow，当我们更改css属相如background时，浏览器只需repaint就行，dom节点的大小、位置均未发生改变，我理解为：原地不动只是换个颜色填充而已。这时的开销就小。当我们操作dom节点要改变其大小和位置时，对浏览器来说就比较麻烦了，必须要进行reflow，重新定位，重新布局，只不过对于现在的电脑硬件和高版本浏览器来说这倒不是显而易见的性能问题，visibility:hidden;对浏览器来说只需一次repaint就OK。但display:none;浏览器要进行reflow，也就是要销毁原先绘制的frame，然后还要再次重绘frame，浪费，不环保。
问：block，inline和inline-block区别
行内元素有（inline）：title span br a style em b i strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo。
不独占一行，margin-top margin-bottom width height 无法指定。
块级元素有（block）：body form textarea h1-h6 html table button hr p ol ul dl center div pre noscript blockquote fieldset address
独占一行，margin pading width height 可以指定
行内块元素有（inline-block）： img input td select textarea label
不独占一行，margin pading width height 可以指定
问：rgba 和opacity的区别
rgba仅作用于元素，opacity作用于元素和子元素
问：如何垂直水平居中一个元素？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中一个浮动元素</title>
<style type="text/css">
#div2{
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto;
position: absolute;//或者relative
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#container{
width: 600px;
height: 600px;
background: hotpink;
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div style="background:hotpink; width: 600px; height: 600px; position: relative;">
<div id="div2">
方法二:未知元素的高宽
</div>
</div>
<br>
<div id="container">
<img width="200px" height="200px" src="assets/images/mug.jpg">//需要行内元素
</div>
</body>
</html>
问：实现不使用border，画出1px高的线
<div style=”height:1px;overflow:hidden;background:red”></div>
问：position的值relative和absolute的定位原点是什么？
relative:他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
absolute:他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
| absolute | 父级有position | 父级无position |
| 设置TRBL | 父原点 | 浏览器原点 |
| 无TRBL | 父原点（上一节点结束），父节点的padding或者上一届点的margin将影响位置 | 父原点（上一节点结束），父节点的padding或者上一届点的margin将影响位置 |
问：css中为什么要浮动，怎么清楚浮动？
1.增加一个div 设置clear:both属性
2.给父元素设置overflow:hide或者auto（display：table）
3. .clearfix:after { display: block; content: "."; height: 0; visibility: hidden; clear: both; }
参考：https://www.cnblogs.com/zhongweizhu/p/6003537.html
问：对WEB标准以及W3C的理解与认识?
web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，表现即指css样式表，通过css可以是页面的结构标签更具美感，行为是指页面和用户具有一定的交互。
W3C对web标准提出了规范化的要求：
①标签字母要小写②标签要闭合③标签不允许随意嵌套④尽量使用外链css样式表和js脚本⑤样式尽量少用行间样式表⑥标签的id和class等属性命名要做到见文知义
问：标准盒子模型和IE盒子模型？
标准盒子模型：box-sizing:content-box;
IE盒子模型： box-sizing:border-box;
IE盒子模型使用场景：假如有一个容器，我们希望在里面用两个子容器并排填满，肯定会设置width：50%，但是如果要对两个子容器的内容区进行分离，需要使用padding属性，但是使用padding的话会撑宽盒子的宽度，导致两个子容器无法并排，这个时候就可以使用IE盒子模型。
问：超出容器的内容省略号显示？
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
问：reflow和repaint？
reflow（重排）：浏览器根据各种样式来将元素放到确定的地方。
repaint（重绘）： relfow完成之后，浏览器把这些元素按照各自的特性绘制一遍。
引起repaint的操作-改变外观，不改变布局
1.visibility
2.outline
3.background color
引起reflow的操作
1、添加或者删除可见的DOM元素
2、元素位置改变
3、元素尺寸改变
4、元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
5、页面渲染初始化（这个无法避免）
6、浏览器窗口尺寸改变
问：
扫一扫
6580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
