【九月打卡】第16天 CSS3布局模型

课程名称：初识HTML(5)+CSS(3)-升级版

课程章节： CSS3布局模型

主讲老师：五月的夏天

课程内容：

今天学习的内容包括： 布局模型有哪些？ 什么是层模型以及分类？

课程收获：

在网页中，元素有三种布局模型，分别为流动模型（Flow），浮动模型 (Float)，层模型（Layer）。

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100% 。在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型（Float），任何元素在默认情况下是不能浮动的，但是我们可以设置左浮动和右浮动。我们也可以同时设置两个元素右浮动也可以实现一行显示。

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。层模型有三种形式绝对定位，相对定位和固定定位。

绝对定位的值为absolute，如果想为元素设置层模型中的绝对定位，需要设置position:absolute来表示绝对定位，使用绝对定位后，它的位置相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

相对定位的值为relative，如果想为元素设置层模型中的相对定位，需要设置position:relative。相对定位是相对于自身的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

fixed表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

Relative与Absolute组合使用，我们需要注意的是参照定位的元素必须是相对定位元素的前辈元素，参照定位的元素必须加入position:relative;定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

今天学习了CSS3布局模型的13-1到13-9的9个小结，花费了60分钟，今天主要学习了布局用到的相关模型。我们在平时写代码时定位用的地方很多，我们可以在图片上面显示文字，也可以让不同的元素显示不同的压盖效果。我们还可以利用浮动，让元素并排显示。当网页出现滚动条时，我们想要一个元素一直显示在右下角，我们可以使用固定定位来实现。