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使其块级化，没必要设置宽度，一旦设置宽度就会使流动性丢失。对比图如下：
代码：
所谓流动性，是一种margin/border/padding和content内容区域自动分配水平空间的机制。
注：三准则：无宽度 ，无图片，无浮动。
其中，无宽度保留了容器流特性，使代码更简洁，更好维护。
（2）格式化宽度（大概了解）
div { position:absolute; left: 20px; right: 20px;}
假设该<div>元素最近的具有定位特性的祖先元素的宽度是1000像素，则这个<div>元素的宽度是960像素。和普通流一样，“格式化宽度”具有完全的刘提醒，也就是margin、border、padding和content内容区域同样会自动分配水平（垂直）空间。
网友评论