「资深前端工程师总结」前端面试知识点大全—CSS篇
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、浏览器渲染css 属性选择器
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：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联块状元素：<img>、<input>
其他display的属性值不是很常用，其具体的含义如下：
list-item：此元素会作为列表显示，块类型元素一样显示。
run-in：此元素会根据上下文作为块级元素或内联元素显示。
inline-table：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group： 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row：此元素会作为一个表格行显示（类似 <tr>）。
table-column-group：此元素会作为一个或多个列的分组来显示（类似<colgroup>）。
table-column：此元素会作为一个单元格列显示（类似 <col>）
table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption：此元素会作为一个表格标题显示（类似 <caption>）
inherit： 规定应该从父元素继承 display 属性的值。
display:inline-block 什么时候会显示间隙？(携程)
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
4、介绍一下 CSS 的盒子模型？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。