盒子模型
盒子模型是CSS中一种常用于布局的基本概念。描述了 文档中的每个元素都可以看成是一个矩形的盒子，包含了内容、内边距、文本边距、外边距。
---------------------------------------------------------------------------------------------------------------------------------
盒子模型相关属性
内容(content)------盒子包含的实际内容，比如文本、图片等。
内边距(Padding)----围绕在内容的内部，是内容与边框之间的空间。可以使用 padding 属性来设置。
边框(Border)-----围绕在内边距的外部，是盒子的边界。可以使用 border 属性来设置。盒子的边界.
外边距(Margin)----围绕在边框的外部，是盒子与其他元素之间的空间。可以使用 margin 属性来设置。
内边距(Padding)、边框(Border)、外边距(Margin)都是复合元素。
---------------------------------------------------------------------------------------------------------------------------------
举例：
<div class="demo">CSDN关注计算机相关知识分享</div>
<div class="demo1">CSDN关注计算机相关知识分享</div>
<div class="demo2">CSDN关注计算机相关知识分享</div>
效果：
---------------------------------------------------------------------------------------------------------------------------------
举例:
.border-demo{
background-color: aquamarine;
width: 300px;
height: 200px;
border-style: solid;
border-width: 10px;
border-color: blue;
}
...
<div class="border-demo">这是一个边框示例</div>
效果：
---------------------------------------------------------------------------------------------------------------------------------
举例：
<div class="border-demo">这是一个边框示例</div>
效果：
举例：
<div class="border-demo">这是一个边框示例</div>
效果：
举例：
效果：
传统网页布局方式
标准流（普通流、文档流）:网页按照元素的书写顺序依次排列。
浮动。
定位。
Flexbox、grid（自适应布局）：可以更轻松地实现复杂的自适应布局，比如，网页可以在手机端访问，也可以在电脑端访问。提供了更灵活的布局选项。
上述几种布局方式，本质上都是摆盒子。
浮动
最典型应用：可以让多个块级元素在同一行排列显示。
浮动的元素 相互贴靠在一起的，不会有缝隙。如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行。
浮动，是相对于父元素进行浮动的，即，只会在父元素的内部进行移动。
语法：
选择器{
float:left/right/none;
}
使用行内块元素，彼此之间有缝隙，不如浮动那么方便。
浮动的三大特性
1.脱标：脱离标准流。
当元素设置了浮动后，这个元素就会脱离标准流的控制，移动到指定的位置，浮动的盒子就 不再保留原来所占的位置。就像漂浮在空中一样。
2.一行显示，顶部对齐。
如果多个盒子同时设置了浮动，那么它们会按照属性值一行内显示，并且顶端对齐。
3.具备行内块元素特性。
举例：
---
效果：
举例：
效果：
定位
定位布局可以精准定位，但缺乏灵活性。
定位方式：
1.相对定位:相对于元素在文档流中的正常位置进行定位。
2.绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流。
3.固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动。
举例：
效果：
后续内容见《Web前端基础知识（六）》