CSS基础 盒子模型 浮动布局 定位布局

一.盒子模型

一个页面有很多盒子，这些盒子之间相互影响，因此掌握盒子模型需要从两个方面解释，一是一个盒子的内部结构，二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子，盒子模型是由content(内容)、padding(内边距)、margin外边距)和border(边框)这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以视为一个盒子。

属性                      说明

content                 内容

padding                内边距

margin                  外边距

border                  边距

1.内容

内容是盒子模型的中心，它呈现了盒子的主要信息内容。这些内容可以是文本、图片等。

2.内边距

内边距是指内容区和边距之间的空间，可以看成是内容区的背景区域。

3.外边距

外边距是指两个盒子之间的距离，它可能是子元素和父元素之间的距离，也可能是兄弟元素之间的距离。

4.边框

边框和之前学的边框是一样的。

（大家可以自行尝试写出更好看的）

二.浮动布局

在学习浮动布局和定位布局之前，先了解一下什么是正常文档流和脱离文档流。

正常文档流又称普通文档流或普通流。将一个页面从上到下一行一行的，其中块元素独占一行。是按照默认情况下元素的布局情况。

脱离文档流，是指脱离了正常文档流，正常文档流是没有使用浮动和定位去改变默认情况下的HTML文档的结构。也就是说，想改变正常文档流，可以使用浮动布局和定位。

1.浮动

在CSS中，浮动可以灵活的定位页面元素。

属性                      说明

left                        元素向左浮动

right                      元素向右浮动

2.消除浮动

可以使用clear消除浮动

属性                      说明

left                        消除向左浮动

right                      消除向右浮动

both                     同时消除左右浮动

三.定位布局

这里只介绍固定定位，相对定位和绝对定位。

这三种定位可以使用top（顶部）、bottom（底部）、left（左边）、right（右边）这四个属性一块使用。

1.固定定位

在CSS 中可以使用position:fixed来实现固定定位，所谓的固定定位，指的是被固定的 元素不会随着滚动条的拖动而改变位置。

2.相对定位

在CSS 中可以使用position:relative来实现相对定位，相对定位是指该元素的位置是相对于原始位置计算而来的。

3.绝对定位

在CSS 中可以使用position:absolute来实现绝对定位。它可以很精准地把元素定位到你需要的位置。

将此元素变成绝对定位后，这个元素就完全脱离文档流了，绝对元素的前面或后面的元素会认为这个元素不存在，即这个元素浮于其他元素上面，他是独立出来了的。