HTML网页-页面布局
Posted HX花惜 iT TB
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML网页-页面布局相关的知识，希望对你有一定的参考价值。
页面布局
一．盒模型：
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>
<html>
<head>
<meta charset="utf-8">
<!--网页名-->
<title>演示</title>
<!--网页logo-->
<link href="../Img/a2.png" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div>
我是一个div盒子
</div>
</body>
</html>
图示：
效果：
3. 接下来给这个盒子设置一下大小和加一个边框。
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--网页名-->
<title>演示</title>
<!--网页logo-->
<link href="../Img/a2.png" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div style="width:200px;height:100px;border:2px solid #FF6C6E;">
我是一个div盒子
</div>
</body>
</html>
图示：
效果：
这样子就把盒子的长度，高度，边框 给设置好了。是不是感觉非常简单呢！
属性说明：
（1）width：指定元素的长度，单位为：px（像素）或 %（百分比）
（2）Height：指定元素的高度，单位为：px（像素）或 %（百分比）
（3）Border：指定元素的边框：2px（边框的大小），单位为：px（像素）
solid （指定边框为实线）
#FF6C6E （颜色值）
4. 我们再给元素加上背景图片
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--网页名-->
<title>演示</title>
<!--网页logo-->
<link href="../Img/a2.png" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div style="width:400px;height:300px;border:2px solid #FF6C6E;background-image: url(../Img/a2.png);background-size: cover;">
我是一个div盒子
</div>
</body>
</html>
图示：
效果：
这里我调整了元素的大小，为了让背景图片显示得跟和谐。
属性说明：
（1）background-image：设置元素的背景图片，Url指的是图片的路径
（2）background-size: 规定背景图片的尺寸，cover（让图片始终占满整个背景）
注意：写完每个属性后必须加一个英文状态的：分号，分号的作用是将每个属性分开，代码里的符号都是英文状态的哦，这是一种规范。所以好习惯要养成。
以上是关于HTML网页-页面布局的主要内容，如果未能解决你的问题，请参考以下文章