入门 CSS 排版

在 Web 开发中，CSS 是很重要的一部分，它主要用来控制页面的排版样式以及美化页面。

本文将为程序员介绍 CSS 排版的入门知识，包括基本选择器、盒模型、浮动、定位等等。

基本选择器

CSS 中最基本的选择器为元素选择器，其用法如下：

p {
  color: red;
}

这段代码表示将网页中所有的 <p> 元素的颜色设置为红色。除此之外还有一些其他的选择器，如 ID 选择器、类选择器、后代选择器等，它们的使用方法可以通过 MDN 文档进行学习。

盒模型

每个 HTML 元素都可以看作是一个盒子，而盒模型就是对这个盒子的各个部分进行分解和解析，最终确定这个盒子在页面中的具体布局。

盒模型包括四个部分：内容区域、内边距、边框和外边距。其中，内容区域指的是 HTML 元素中包含的具体内容，内边距是内容区域和边框之间的距离，边框是内容区域和外边距之间的距离，而外边距则是边框和周围元素之间的距离。

在 CSS 中可以通过 box-sizing 属性来指定盒模型的大小模式，默认为 content-box 模式，即宽度/高度只包含内容，不包含内边距和边框。如果我们将它设置为 border-box 模式，则宽度/高度包含了内容、内边距和边框的尺寸。

div {
  box-sizing: border-box;
  width: 150px;
  padding: 10px;
  border: 1px solid #ccc;
}

浮动

在 CSS 中，元素的浮动可以使它脱离文档流，向左或向右移动，直到它的边缘碰到了包含它的元素或者另一个浮动元素为止。浮动元素在文档流中不占据空间，因此它后面的元素会往上移动。

img {
  float: left;
  margin-right: 20px;
}

这段代码表示将页面中所有的 <img> 元素向左浮动，并留出 20px 的右边距。

定位

除了浮动之外，还有另一种方式可以让元素脱离文档流，那就是使用定位。在 CSS 中，可以使用 position 属性来为元素设置定位方式，常见的定位方式有相对定位、绝对定位和固定定位。

div {
  position: absolute;
  top: 50px;
  left: 50px;
}

这段代码表示将页面中所有的 <div> 元素设置为绝对定位，并设置它们距离页面顶部和左侧分别为 50px。需要注意的是，当为元素设置了定位方式之后，它就会脱离文档流，因此后面的元素可能会重叠在一起。

总结

本文介绍了 CSS 排版的入门知识，包括基本选择器、盒模型、浮动、定位等等，希望能对程序员们在 Web 开发中的实践有所帮助。