创程前端学习第四课：教学内容（2025.5.15）

前端基础：CSS 盒模型与布局

一、认识 CSS 盒模型

同学们，咱们之前学会了给网页元素添加各种样式，但要做出更精美的网页，得先搞清楚 CSS 盒模型。简单来说，网页上的每个元素都被看作一个矩形盒子，盒模型就规定了这个盒子的组成部分和尺寸计算方式，搞懂它，布局就不再是难题。

### CSS 盒模型的组成

• 内容（content） ：就是元素真正的内容区域，比如一段文字、一张图片占据的地方。它的宽度和高度由元素widthheight属性决定。

• 内边距（padding） ：围绕内容的空白区域，让内容和边框之间有点空隙，避免内容直接贴着边框太拥挤。比padding: 10px;，就是在内容四周各留出 10 像素的空白。

• 边框（border） ：盒子里内容和内边距的外围边界，可以border-width（宽度）border-style（样式，比如实solid、虚dashed等）border-color（颜色）来设置，给元素加上个性的边框。

• 外边距（margin） ：元素与其他元素之间的空白距离，控制元素之间的间距，让页面布局不显得混乱拥挤。例margin: 20px;，就是让这个元素和其他元素保持上下左右各 20 像素的距离。

盒模型的尺寸计算

元素实际占据的总宽度 = 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距。

同理，总高度 = 上外边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下外边距。弄清楚这个，就能精准控制网页元素的大小和间距啦。

二、CSS 布局初体验

常见的布局方式

• 浮动布局 ：float属性可以让元素像水里的木块一样“浮动”起来，常用于制作多列布局。比如：

 .left-column {

    float: left;

    width: 200px;

    background-color: lightblue;

}

.main-content {

    margin-left: 220px; /* 避开左边浮动的列 */

    background-color: white;

}