CSS（6）布局初步

3.元素分类

我们尝试着对a标签和span标签进行盒模型相关属性设置，如下：

why？

这就涉及到标签（元素）的分类。

元素 = 标签 +属性 +内容

在css中，从外观上来看的，将标签分成两大类：

块状

行内

以后我们每写一个标签，首先问题就是弄清它的性别关系。

实际上，在盒模型中，

对于块级元素，所有的这6大特性都能生效。

对于行级元素，width和height不起作用，设置了也是白设，border有效、background有效、margin和padding在水平方向上有效，在

垂直方向上无效。

还有一个行级块元素，介于二者之间，如下：

显示效果：

关于行内块元素，除了它不占据一整行之外，其它块级元素的特点它都有。

-------------------------------------------------------------------------------------------------------------------------------------

4.流动布局

流动布局是默认的，也是最简单的。

默认状态下，HTML中所有的元素都是根据流动布局模型来分布网页内容的。流动布局模型有两个特征：

通过代码来理解：

5.浮动初步

浮动是css中的难点，也是重点。

作用：用来实现布局的，使得块级元素能够在同一行上和平共处。

属性：float

属性值：left、right

基本使用：

浮动是完全不同于流动的另一种布局模型，有如下特征：

任何定义为float的元素都会自动被设置为一个块状元素显示，可以定义宽高

浮动模型不会与流动模型发生冲突，在垂直方向上应该还处于文档流中

与普通元素意义，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系

需要清除浮动

浮动需要清除，如果不清除，会对后面的内容造成影响。

清除可以使用clear属性来完成。

其中：

clear是用在被受影响的元素上

clear属性有三个值，left、right和both，通常就使用both。

关于浮动的原理和细节，我们放在后面讲。