1 内联元素（inline-element）和块元素（block element）分别有哪些
常见内联元素（行内元素）有a、b、span、i 、em、input、select 、img等
常见的块元素有div、ul、li、h1~h6、talbe、ol、 ul、td、p等
2 浮动相关
浮动布局指将元素脱离普通流/文档流，使其可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素的排列。
正因为浮动元素脱离了文档流，其父级元素并不知道它的存在，因此会表现为高度为0，无论浮动元素如何变化，其父级元素也不会随它变化将其包裹，这种现象也叫作“高度塌陷”。
下面的例子中，不管#floatDom高度如何变化，#parent高度始终为0，这将导致父元素边框不能被撑开，背景不能显示等问题
<div> <div> <div> </div>
因为高度塌陷的存在（这往往不是我们所期望的），必须要清除浮动，下面介绍清除浮动的几种方式：
•在浮动元素后添加样式含有“clear：both”的元素
<div> <div> <div> </div>
也可以添加br标签，其自带clear：both属性
<div> <div> <br/> </div>
利用这种方式清除浮动的优点在于通俗易懂，容易掌握，缺点也很明显，增加了很多无意义的标签，这个在后期维护中是很痛苦的。
•为父元素添加样式“overflow:hidden"
<div> <div> </div>
利用这种方式不存在结构和语义化问题而且代码量极少，然而在内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
•利用：after伪元素
<style type="text/css"> .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } </style> <div> <div> </div>
利用这种方式，仅需在目标元素上添加一个类，也是目前使用最多的一种方式。
Reference
iyunlu.com/view/css-xht
3 相对布局（relative）和绝对布局的区别（absolute）
相对布局和绝对布局最本质的区别在于是否脱离文档流。
相对布局未脱离文档流，即设置元素相对布局后，文档流仍然保持其原始的位置，通过设置top、left等属性可设置其相对于原始位置的偏移量。
绝对布局是脱离文档流的，即文档流中的要素并不知道该绝对布局要素的存在，绝对布局的定位是相对于父元素中具有相对布局或绝对布局的要素，若都不存在则相对于body布局。
4 盒模型(Box Model)
盒模型定义了一个元素的显示形式，包括content（内容）、padding（内边距）、border（边界）以及margin（外边距）几部分组成，目前有两种盒模型标准，一种是W3C标准盒子模型，还有一种是IE盒子模型，采用的是Microsoft自己的标准。
这两种盒模型的区别主要在于元素宽度的计算。标准模式下css中定义的width即为content（内容）的宽度，整个元素在页面中占有的宽度，计算公式为：
复制代码 代码如下:
DOM_Width = width + padding + border + margin
而在IE盒子模型中，css中定义的width为content + padding + border，因此在IE盒子模型中，整个元素在页面中占有的宽度为(高度同理）
复制代码 代码如下:
DOM_Width = width + margin
在CSS3中利用box-sizing保留了两种盒子模型，当我们设置box-sizing: content-box（默认），采用的是W3C标准盒模型，当设置box-sizing:border-box时，采用的是IE盒模型。
5 CSS reset（重置）
每个浏览器都有一些自带的样式，而且各个浏览器这些自带的样式往往又存在不同，这给我们布局上带来了一些不便。因此在实践中往往需要对浏览器的css样式进行“清零”，即CSS reset。最简单的一种reset代码如下：
*{ margin:0; padding:0; }
这种方式虽然简单但太过“暴力”，因为很多要素像div、li等本身默认就没有margin、padding样式，这无异于造成大量冗余，更推荐的方式根据自己需要编写reset代码。
6 CSS hack
由于不同的浏览器对CSS的解析和支持是不同的，这会导致相同的CSS代码在不同浏览器中的显示方式并不是完全一致的，这就需要通过CSS Hack来解决不同浏览器的兼容性问题。针对不同浏览器写不同的样式的这个过程就称为CSS hack。
CSS Hack常见的形式有如下几种：
•属性Hack
比如IE6能识别_width以及*width，而在IE7中能识别*width,但是不能识别_width,在FireFox中两个都不识别。
•选择符Hack
比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
•条件Hack
IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：
<!–[if IE]> <!–Your Code–> <![endif]–>
针对IE6及以下版本：
<!–[if lt IE 7]> <!–Your Code–> <![endif]–>
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
Reference
https://www.jb51.net/css/226888.html
7 优雅降级（graceful degradation)与渐进增强(progressive enhancement)
渐进增强指针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级指一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。