知识点梳理

布局 Layout

在CSS中，布局是一个核心问题。布局将页面划分为不同的块，并通过算法来确定每个块的大小和位置，这个算法就是布局。

三种布局方式 Positioning Schema

常规流：又被称为文档流，是最常见的布局方式。在常规流中，元素按照其在HTML中的出现顺序进行排布。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      margin: 10px;
      padding: 20px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

浮动
绝对定位

盒子模型 Box Model

CSS中的一切都是盒子，我们可以将元素看作盒子，每个盒子有内容、宽度、高度、边框和内外边距。

宽度和高度

宽度和高度指定内容盒子的尺寸。可以使用长度、百分比或auto进行指定。

.box {
  width: 200px; /* 或者 50% */
  height: 150px; /* 或者 auto */
}

内外边距

内边距（padding）是盒子内部内容与边界之间的间隔。
外边距（margin）是盒子与其他盒子之间的间隔。

.box {
  padding: 10px; /* 或者 10px 20px */
  margin: 20px; /* 或者 20px 10px 30px */
}

边框

边框（border）可以设置边框的样式、宽度和颜色。
通过border-width、border-style和border-color来指定。

.box {
  border: 1px solid black;
  border-left: 2px dashed red;
  border-top-width: 3px;
}

边距合并

边距在垂直方向上会有合并现象。在相邻元素的上下边距中，取较大的值作为实际边距。

自动外边距 Auto Margin

自动外边距（margin）在一些情况下可以用来实现水平居中。

.container {
  width: 300px;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

盒子模型类型 Box Sizing

在默认的盒子模型中，宽度和高度指定的是内容的宽度和高度。使用border-box属性可以指定宽度和高度包括边框和内边距。

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box;
}

溢出 Overflow

通过overflow属性可以控制内容溢出的处理方式。

.box {
  width: 200px;
  height: 100px;
  overflow: hidden; /* 或者 scroll 或者 auto */
}

理解感受

通过本节课的学习，我对CSS布局的核心概念有了更清晰的了解。布局是网页设计和开发中的重要部分，它涉及到如何将页面的不同元素组织成一个有序的结构。在常规流、盒子模型以及自动外边距等方面，我了解到了如何利用CSS的属性来控制元素的位置、大小以及间距。同时，我还学习到了如何通过边框的设置和外边距的合并来实现一些有趣的视觉效果。

深入CSS（中） ｜ 青训营