[分享]css两大基本结构

网页开发中，CSS（Cascading Style Sheets）是处理样式和布局的重要组成部分，有两种基本的CSS结构，分别是盒模型和文档流模型。/ 盒模型 / .box { width: 200p...

网页开发中，CSS（Cascading Style Sheets）是处理样式和布局的重要组成部分，有两种基本的CSS结构，分别是盒模型和文档流模型。

/* 盒模型 */
.box {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 20px;
} 

盒模型是CSS的一种基本结构，它是将HTML元素看作一个矩形盒子，包含四个部分：内容区域，内边距，边框和外边距。其中，内容区域是指元素内的实际内容，而内边距是指内容区域与边框之间的距离，边框则是围绕内容和内边距的线条，外边距则是盒子边缘与周围元素之间的距离。通过设置盒子的宽度、高度、内边距、边框和外边距，可以实现多种布局和样式效果。

/* 文档流模型 */
.content {
  width: ***px;
  margin: 0 auto;
  background-color: #eee;
}

.content p {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
} 

文档流模型是CSS的另一种基本结构，它是将HTML元素看作文档中的一部分，按照其出现的顺序在页面上按自然流排列。在文档流中，每个元素占据一定的空间，从上到下依次排列，相邻元素间不受任何影响。通过给元素设置不同的CSS属性，如宽度、高度、边框、背景等，可以影响元素在文档流中的排列和样式，实现多种设计效果。