div 为什么默认宽度100 - 理解HTML中的盒模型
HTML是构建网页的基础，而盒模型则是HTML中最重要的一个概念之一。在网页设计和布局中，我们经常使用
什么是盒模型
盒模型是指HTML元素在布局时的一个概念。每个HTML元素在渲染为网页时，都被视为一个矩形盒子，这个矩形盒子有四个边框，以及可选的内容、内边距和外边距。具体而言，盒模型由以下部分组成：
- content box（内容框）：包含元素的实际内容，例如文本、图像、按钮等。
- padding box（内边框）：围绕内容框的空白区域，会影响元素的大小和背景颜色。
- border box（边框框）：成为内边框的外侧边框。
- margin box（外边距框）：成为边框的外侧边距。
这四个部分组成了一个HTML元素的盒模型，可以通过CSS进行控制和调整。当你使用CSS设置元素的宽度和高度时，实际上调整的是其内容框的大小。
为什么div有默认宽度
当然，你也可以通过CSS来调整
```
div {
width: 50%;
}
```
这会将
盒模型和网页布局
网页布局是HTML中最基本和最重要的方面之一。掌握HTML元素的盒模型，可以更好地控制网页布局和排版。盒模型的特点是可以通过CSS来进行调整和控制，例如：
```
div {
margin: 10px;
padding: 20px;
border: 1px solid #ddd;
}
```
这将创建一个带有10像素外边距、20像素内边距和1像素灰色边框的
盒模型也是响应式网页设计的重要基础。响应式网页设计是指可以在不同设备和屏幕尺寸上正确呈现的网页设计。使用媒体查询和各种CSS尺寸单位，可以根据设备和屏幕尺寸调整网页的布局和外观。例如：
```
/* 对于宽度小于768px的设备 */
@media (max-width: 768px) {
div {
width: 100%;
}
}
```
这将在宽度小于768px的设备上将
HTML的盒模型和
