网页设计项目教程（HTML5+CSS3+JavaScript）（第2版）【PPT课件】任务11.1 认识CSS布局.pptxVIP

模块11CSS布局

任务11.1认识CSS布局

网页设计项目教程（HTML5+CSS3+JavaScript）

学习目标

从认识盒模型、区分元素的显示方式，到理解CSS布局技术的作用

知识目标

了解CSS盒模型的构成；

了解元素的显示方式；

了解CSS布局的作用与常见布局技术。

能力目标

能根据盒模型结构描述元素的样式；

能根据需求调整元素的显示方式；

能讲出CSS布局的重要性。

素养目标

培养细致认真的职业素养；

培养精益求精的工匠精神；

养成规范编码的良好习惯。

任务描述

HTML创建网页的内容与结构，CSS控制网页的样式和外观

HTML创建了网页的内容与结构，而CSS则控制了网页的样式和外观，提高了网页的美观性和易读性。

通过CSS的布局技术调整网页中各元素的位置、大小和排列方式，使得它们放在与视口相关的正确位置上，实现排版设计的各种布局效果。

本任务目标：了解基础的CSS盒模型结构，能够根据元素的显示方式以及盒模型来设置元素的样式，认识可使用CSS布局技术覆盖默认布局行为，实现复杂的页面布局。

11.1.1CSS盒模型

浏览器的渲染引擎将网页中的每个元素表示为一个矩形盒子，由四部分构成

盒子的四个组成部分

内容区域（content）：显示元素的内容，其大小通常由width、height指定；

内边距（padding）：内