页面布局
一．盒模型：
1.所谓盒模型，就是浏览器为页面中的每个HTML元素(标签)生成的矩形盒子。这些盒子们都要按照可见 板式模型在页面上排布。可见的板式模型主要由三个属性控制：
(1)position属性:position属性控制页面上元素间的位置关系。
(2)display属性:display属性控制元素是堆叠、并排或者不在页面上显示。
(3)float属性:float属性提供控制的方法，以便于把元素组成成多栏布局。
2.所谓的盒模型，顾名思义就是盒子，这个盒子叫盒模型，也叫元素，也可以叫标签。
3.那么盒子的作用呢，肯定是用来装东西的，代码盒子可以装图片，装字，装链接，还有就是可往盒子 里面装盒子。
4.我们看一下一个网页是如何用盒子堆起来的。这张图片是一个已完成的网页(这只是一部分)。
注意：如有侵权，请联系删除,谢谢!
5.上面的网页就是由各个盒子堆起来的，下面这张图对盒子做了简易的划分。
6.不管多难多简单的页面都是由一个个大小不一的盒子堆叠而成。我觉得我划分得还是可以的。要是每个盒子堆得好看，就要用到上面所说的三大属性了position（定位），display（指定生成的框类型）,
Float(浮动)。
二．向页面添加一个盒子（元素）
1.HTML中有非常多的元素，最常用的就是div元素，也就是div标签。
2.在之前的创建好的HTML文件中添加一个div元素（盒子）。
3.我使用的编程工具是Adobe Dreamweaver CC 2019
代码：
<!doctype html>
图示：
效果：
3.接下来给这个盒子设置一下大小和加一个边框。
代码：
<!doctype html>
图示：
效果：
这样子就把盒子的长度，高度，边框 给设置好了。是不是感觉非常简单呢！
属性说明：
（1）width：指定元素的长度，单位为：px（像素）或 %（百分比）
（2）Height：指定元素的高度，单位为：px（像素）或 %（百分比）
（3）Border：指定元素的边框：2px（边框的大小），单位为：px（像素）
solid （指定边框为实线）
#FF6C6E （颜色值）
4.我们再给元素加上背景图片
代码：
<!doctype html>
图示：
效果：
这里我调整了元素的大小，为了让背景图片显示得跟和谐。
属性说明：
（1）background-image：设置元素的背景图片，Url指的是图片的路径
（2）background-size: 规定背景图片的尺寸，cover（让图片始终占满整个背景）
注意：写完每个属性后必须加一个英文状态的：分号，分号的作用是将每个属性分开，代码里的符号都是英文状态的哦，这是一种规范。所以好习惯要养成。