这是我的第一篇前端学习笔记。前端网页开发我在初一就开始学习相关内容，但是现在也忘得差不多了，写网页经常要查资料问AI也挺麻烦的，所以我想梳理一下相关的内容。
盒子模型 / The box model
在前端网页中，每个元素都是一个盒子，它有内容（content），内边距（padding），边框（border），外边距（margin），如下图清晰的展示了这些组成部分的位置
Block Boxes & Inline Boxes
block box 顾名思义是块状盒子，它会在HTML文档中另起新的一行放置元素，inline box 则不会换行。使用display属性来指定盒子显示属性。需要注意的是当“display: inline”时width和height属性不会生效。还有一种显示方式：inline-block，它即保持了行内属性，同时也保留了块级元素的特性
Inner and outer display types
每个盒子都有inner display type和outer display type两个属性，前者定义盒子内的元素如何排列，后者定义盒子本身如何排列。比如上面所说”display: block”和”display: inline”都是outer display type，而flex，grid这样的属性值都是inner display type。
例子 / Example
接下来是一个示例：
<body>
<div class="container">
<div class="content">
<p>Content1</p>
</div>
<div class="content">
<p>Content2</p>
</div>
</div>
</body>body {
width: 50%;
}
.container {
padding: 10px;
border: 1px solid blueviolet;
border-radius: 14px;
}
.content {
display: block;
border: 1px solid blue;
border-radius: 14px;
margin: 10px;
}以下是浏览器中显示的效果：
可以看到两个div都是block显示方式，所以换行显示。这里还涉及到外边距重叠（Margin Collapse），两个div垂直放置，中间的距离取的是两个div的margin最大值，而不是叠加。内层div和外层div的距离则是由外层div的padding和内层div的margin相加而得。
接下来把内层div的显示方式改为inline-block：
此时两个div就并排显示了，并且间距为两个margin相加（只有垂直margin取最大值）
至于为什么没有用inline是因为inline属性的元素行高受父容器行高（line-height）限制，inline元素并不会向外挤压，会挡住边框。
可以在浏览器调试工具中看到一个盒子的各个部分占用的空间。
