跳到主要内容

待整理

1、css的display:none和visibility:hidden区别

display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载;元素原来占据的空间位置不保留;产生回流和重绘;

visibility:hidden:视觉上的不可见,但是保留占据的空间,还具有宽度和高度;

2、box-sizing : content-box || border-box || inherit

content-box:border和padding不计算入width之内;

padding-box:padding计算入width内;

border-box:border和padding计算入width之内,其实就是怪异模式了;

当为border-box,则让元素维持在了IE传统模式下的怪异模式,即,设置的元素的width和height都是包括元素的宽度和padding和border。可以运用到布局(因为当其内元素和父元素宽度相等时没有问题但是只要加了一点padding和margin整个布局就崩溃了)和表单元素(表单中除了checkbox和radio外默认都是2px的border)上。

3、浏览器渲染

DOM:浏览器将HTML解析成树形结构,即DOM。

CSSOM:将css解析成树形结构,即CSSOM。

Render Tree:DOM 和 CSSDOM合并后生成Render Tree。

Layout:计算Render Tree每个节点的具体位置。

Painting:将layout后的节点内容呈现在屏幕上;

遇到外部的css文件和图片,浏览器会另外发出一个请求,来获取css文件和相应的图片,这个请求是异步的,并不会影响html文件。如果遇到javascript文件,html文件会挂起渲染的线程,等待javascript加载完毕后,html文件再继续渲染。

Repaint——(重绘)是在一个元素的外观被改变,但没有改变布局的情况下发生。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器repaint。

Reflow——(回流):浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,这个回退的过程就叫回流。意味着元件的几何尺寸变了,我们需要重新验证并计算 Render Tree。

4、display有哪些值?说明他们的作用。

display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit 其中常用的的有none、inline、block、inline-block。分别的意思是:

1)none: 元素不会显示,而且该元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的。

2)inline: display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为inline,设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。

3)block: 将元素将显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。

4)inline-block:行内块元素。这个属性值融合了inline 和 block 的特性,即是它既是内联元素,又可以设置width和height。

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

6)table:此元素会作为块级表格来显示(类似