1、什么是块级元素？
“块级元素”和“display为block的元素”并不是一个概念。例如:<li>元素默认的display值是list-item,<table>元素默认的display值是table，但是他们均是“块级元素”。
“块级元素”的基本特征是一个水平流上只能单独显示的元素，多个块级元素则换行显示
2、怎么清除浮动？
配合clear属性
.clear:after {
content: '';
display: block; // 也可以是table或list-item
clear:both;
}3、为什么list-item元素会出现项目符号（display: list-item）
因为所有“块级元素”都有一个“主块级盒子”，list-item除此外还有一个“附加盒子”，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号.
4、display: inline-block 盒子结构？
该元素既能和图文一行显示，又能直接设置width/height.
原因：盒子结构为两个盒子，外面的盒子是inline级别，里面的盒子是block级别
同理：display: inline-table会渲染成一个可以和文字一行显示的表格
5、width/height作用在哪个盒子上？
作用在内在盒子，也就是“容器盒子”
6、外部尺寸与流体特性
（1）正常流宽度：当我们在一个容器中倒入足量的水时，水一定会均匀铺满整个容器。在页面中随便扔一个<div>元素，其尺寸表现就会和这水流一样铺满容器。
很多网站垂直导航有这样的写法：a { display: block; width: 100%}
<a>元素默认display是inline,所以需要垂直导航时可直接设置display:block使其块级化，没必要设置宽度，一旦设置宽度就会使流动性丢失。对比图如下：
代码：
HTML：
<h4>无宽度，借助流动性</h4><div class="nav">
<a href="" class="nav-a">导航1</a>
<a href="" class="nav-a">导航2</a>
<a href="" class="nav-a">导航3</a></div><h4>width:100%</h4><div class="nav">
<a href="" class="nav-a width">导航1</a>
<a href="" class="nav-a width">导航2</a>
<a href="" class="nav-a width">导航3</a></div>CSS：
.width {
width: 100%;
}
.nav {
background-color: #cd0000;
}.nav-a {
display: block;
margin: 0 10px;
padding: 9px 10px;
border-bottom: 1px solid #b70000;
border-top: 1px solid #de3636;
color: #fff;
}.nav-a:first-child { border-top: 0; }.nav-a + .nav-a + .nav-a { border-bottom: 0;}所谓流动性，是一种margin/border/padding和content内容区域自动分配水平空间的机制。
注：三准则：无宽度 ，无图片，无浮动。
其中，无宽度保留了容器流特性，使代码更简洁，更好维护。
（2）格式化宽度
div { position:absolute; left: 20px; right: 20px;}假设该<div>元素最近的具有定位特性的祖先元素的宽度是1000像素，则这个<div>元素的宽度是960像素。和普通流一样，“格式化宽度”具有完全的刘提醒，也就是margin、border、padding和content内容区域同样会自动分配水平（垂直）空间。