网页设计基础第十四讲：打造网页布局基石：巧用CSS盒子模型本文将带您深入了解CSS盒子模型的应用技巧，通过几个实用的实

本文将带您深入了解CSS盒子模型的应用技巧，通过几个实用的实验案例，展示如何利用内容、内边距、边框和外边距来创建美观且功能性的网页布局。从基础的网页结构开始，逐步介绍如何通过CSS美化标题、导航、内容区块及页脚，帮助您掌握盒子模型的核心概念，并将其运用到实际的设计项目中。

盒子模型简介

在网页设计中，“盒子模型”是一个基本概念，它定义了元素如何在页面上渲染以及如何与其它元素相互作用。盒子模型由以下几个部分组成：

内容（Content）：这是实际的文本或图片等元素。
内边距（Padding）：这是内容与边框之间的空间。
边框（Border）：围绕在内边距之外的一条线。
外边距（Margin）：位于边框外部的空间，用来创建元素之间的距离。

盒子模型的标准视图

按照 W3C 标准，一个元素的总宽度计算公式为：

元素宽度=内容宽度+左右内边距+左右边框+左右外边距

任务描述

在本次实践中，您将学习如何使用CSS盒子模型来创建一个简单的网页布局。我们将设计一个包含标题、导航、主内容区域和页脚的基础网页布局。通过这个实践，您将深入理解盒子模型的概念，并能够灵活应用边距、填充、边框和宽高设置。

任务准备

理解HTML基本结构
理解CSS的基本语法
熟悉盒子模型的概念，包括内容、内边距（padding）、边框（border）和外边距（margin）

任务实施

创建HTML文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子布局应用</title>
</head>
<body>
<header>
    <h1>我的盒子模型应用实践</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
</header>
<main>
    <section>
        <h2>主内容区域</h2>
        <p>这是一些示例文本，用于填充主内容区域。</p>
    </section>
</main>
<footer>
    <p>© 2024 我的网页. 我来造.</p>
</footer>
</body>
</html>

2. 创建CSS文件：

新建一个styles.css文件，链接到HTML文件的<head>中：

在styles.css中，设置以下样式：

       body {
           margin: 0;
           font-family: Arial, sans-serif;
       }

       header {
           background-color: #4CAF50;
           color: white;
           padding: 10px 0;
           text-align: center;
       }

       nav ul {
           list-style-type: none;
           padding: 0;
       }

       nav ul li {
           display: inline;
           margin: 0 15px;
       }

       nav ul li a {
           color: white;
           text-decoration: none;
       }

       main {
           padding: 20px;
       }

       section {
           background-color: #f4f4f4;
           padding: 15px;
           margin: 10px 0;
           border: 1px solid #ccc;
       }

       footer {
           text-align: center;
           padding: 10px 0;
           background-color: #333;
           color: white;
           position: relative;
           bottom: 0;
           width: 100%;
       }

实验实训

实验一

1）上图中的文字均为超链接。

2）上方的边框粗细为3px，颜色为#ff8500；

3）下方的边框粗细为1px，颜色为#edeef0；

4）当鼠标移动到超链接上时，字体颜色变为橙色，背景色变为#fcfcfc。

实验二

1）上图中的文字均为超链接。

2）第一个超链接样式为当鼠标移动到超链接上时的样式，字体颜色变为黑色，背景色变为橙色。

实验三

1）上述区域块在整个浏览器页面水平居中

2）小米图标宽49px，高49px

3）输入框和按钮的实际宽度为358px，高度为50px。

实验四

1）上述方块区域在整个浏览器中水平居中

2）方块区域宽298px，高415px，边框粗细1px；

3）图片下方的文字左侧、右侧距离边框均为28px;

4）第一行文字与上方的图片距离是30px；与第二行文字的距离是40px；

5）第二行文字与第三行文字的距离是15px

网页设计基础 第十四讲：打造网页布局基石：巧用CSS盒子模型