[分享]css两大基本特性区别

CSS 是前端开发中最常用的技术，它可以控制网页的样式和布局。CSS 有很多的特性，其中两个最基本的特性是盒子模型和文档流。接下来，我们将介绍这两个特性的区别。 首先，CSS 盒子模型是指网页中的元素...

CSS 是前端开发中最常用的技术，它可以控制网页的样式和布局。CSS 有很多的特性，其中两个最基本的特性是盒子模型和文档流。接下来，我们将介绍这两个特性的区别。
首先，CSS 盒子模型是指网页中的元素以矩形的方式组织在一起。每个元素都有四个边界：上、下、左和右，这些边界包含了元素的内容、内边距、边框和外边距。CSS 盒子模型的设计原则是：元素的宽度和高度等于其内容区域的宽度和高度加上内边距、边框和外边距的总和。
与此相反，CSS 文档流是指网页中的元素按照其在 HTML 代码中的顺序布置在页面上。文档流是自然的，直观的排版方式。文档流中的元素通常在水平方向上排列，直到到达浏览器可见区域的边界，然后再排列到下一行。文档流中的元素根据其大小和位置相互影响，因此它们通常需要通过 CSS 的定位机制来手动设置其位置和大小。
总之，CSS 盒子模型和文档流是 CSS 中两个非常基本的特性。盒子模型控制元素的尺寸、内边距、边框和外边距的计算方式，而文档流控制元素在浏览器中的位置和相互排列的方式。理解这两个基本特性有助于开发人员更好地理解 CSS 的设计原则和特性，从而更好地掌握 CSS 技术。
下面是一些示例代码：

/* CSS 盒子模型示例 */
p {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}
<br>
/* CSS 文档流示例 */
p:first-child {
  position: absolute;
  top: 100px;
  left: 100px;
}
<br>
p:last-child {
  margin-left: 100px;
}