任务11.1 认识CSS布局

模块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）：内容区域与边框之间的间隔，通过padding属性设置；边框（border）：位于内边距之外、外边距之内，可通过border设置大小、颜色、样式；外边距（margin）：盒子和其他元素之间的空白区域，通过margin属性设置。外边距margin边框border内边距padding内容contentwidth:200pxheight:100px图11-1盒子模型案例演示11-1：盒模型样式代码编写一段CSS样式代码作用于div，基于标准盒模型计算元素实际占据的空间大小.box{width:200px;/*内容区域的宽度*/height:100px;/*内容区域的高度*/padding:16px;/*内边距*/border:5pxsolidred;/*边框*/margin:25px;/*外边距*/}算一算：实际占据的空间width、height只指定内容区域的大小；实际宽度=200+16×2+5×2=242px实际高度=100+16×2+5×2=142px再加上四周25px的外边距，元素连同外边距共占据292px×192px的区域。块级盒子与内联盒子HTML中的块级元素被表示为块级盒子，内联元素被表示为内联盒子块级盒子（block）独占一行，垂直方向依次排列；可设置宽度、高度、内边距、边框、外边距；常见块级元素：div、p、ul、li、h1等。内联盒子（inline）不会独占一行，水平方向依次排列；无法设置元素的宽度、高度；可设置内边距、边框、外边距；常见内联元素：a、span等。块级元素：独占一行div1div2div3内联元素：不独占一行aspanaspan11.1.2元素的显示方式使用CSS的display属性可以更改元素的显示方式，常用取值有以下4种inline内联显示元素不会独占一行；在CSS中被表示为内联盒子；无法设置宽度、高度；可设置内边距、边框、外边距。block块级显示元素独占一行；在CSS中被表示为块级盒子；可设置宽度、高度、内边距、边框、外边距。inline-block行内块显示不会独占一行；具有块级元素的特点；可设置宽度、高度、内边距、边框、外边距。none隐藏元素及其后代元素均不会显示；且不占据页面空间。案例演示11-2：display演示观察四种display取值的显示差异<style>.s1{display:inline;}.s2{display:block;}.s3{display:inline-block;width:150px;height:40px;}.s4{display:none;}</style>

<spanclass="s1">我是inline</span><spanclass="s2">我是block</span><spanclass="s3">我是inline-block</span><spanclass="s4">你看不到我</span>观察要点s1：不独占一行，设置宽高无效；s2：独占一行，可设置宽高；s3：不独占一行，却能设置宽高；s4：连同内容一起消失，不占据空间。11.1.3CSS布局技术默认布局行为：元素按照文档流的规则排列什么是文档流元素根据其在HTML文档中出现的先后顺序排列；结合其显示方式，从上到下、从左到右地排列；排列过程中，元素之间不会重叠；文档流是浏览器对元素的默认布局行为。div1div2div3按出现顺序排列图：文档流中元素自上而下排列常见的CSS布局技术基于文档流，CSS布局技术可以覆盖元素的默认布局行为，实现复杂的页面结构float浮动控制元素脱离文档流，向左或向右浮动；典型应用：图文混排、两列布局。position定位将元素放置在页面中的任意位置；典型应用：层叠效果、悬浮菜单、弹出框。flex弹性盒子灵活控制子项的排列与对齐；典型应用：等高列布局、水平垂直居中。column多列布局将文本按报刊杂志方式分成多列；典型应用：文章的多列排版。任务实施：观察"学习强国"首页在谷歌浏览器地址栏输入/，查找覆盖默认布局行为的元素01打开官网在谷歌浏览器地址栏输入网址，打开首页02观察结构找出头部、导航栏、内容区、底部等区域03找出布局观察哪些元素的位置和排列覆盖了文档流04分析技术思考它们可能使用了哪种CSS布局技术05交流分享记录观察结果，与同学交流讨论提示：重点关注页面中的图文混排、多列卡片、悬浮按钮等效果，它们都不是默认文档流能够直接实现的，需要借助CSS布局技术来完成。任务小结本任务完成了从"认识盒模型"到"认识CSS布局技术"的学习会描述说出盒模型的四个组成部分及各部分的作用。会