css三段式

CSS三段式是一种快速构建网站的方法，通过这种方法，我们可以更加高效地编写CSS代码，从而更好地掌控整个网站的样式。接下来我们将介绍CSS三段式的三个部分：样式重置、布局控制和模块样式。

/* 样式重置 */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* 布局控制 */
.container{
  width: 80%;
  margin: 0 auto;
}

.header{
  height: 100px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.footer{
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

/* 模块样式 */
.article{
  width: 70%;
  float: left;
}

.sidebar{
  width: 30%;
  float: left;
}

.post{
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}

.post h2{
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

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

样式重置部分的作用是将所有元素的外边距和内边距设置为0，以及使所有元素的盒模型为border-box，从而在制作网页时统一元素的样式。另外，为整个网站设置字体也是在这部分进行的。

布局控制部分主要是针对整个网页的布局进行设置，如网页的宽度、页面的居中等。

模块样式是CSS三段式中最重要的一部分。它可以让我们更好地掌控网站的模块样式，如文章中的h2标题、p段落等，同时还可以更加方便地控制网页的响应式布局。