《网页设计与制作（HTML5+CSS3）》课件 项目4 大美中国

大美中国制作首页CONTENTS目录弹性盒子布局的概念第一部分弹性三要素第二部分设置对齐方式第三部分弹性盒子布局的概念第一部分弹性盒子布局的概念弹性盒子（Flexbox）布局是一种CSS布局模块，用于在容器内为元素对齐和分配空间。在元素大小未知或动态变化的情况下，弹性盒子布局都可以轻松地处理它们的对齐、排序和分布。这种布局方式非常适合于一维布局，即在网页设计中，元素沿着单一方向（水平或垂直）排列的布局方式。在这种布局中，元素的排列是线性的，通常只在一个维度上进行扩展。弹性盒子布局的概念1.容器在弹性盒子布局中，容器是指使用display:flex;或display:inline-flex;属性的元素。当元素被定义为容器后，其内部的直接子元素就是弹性项。容器与其内部的弹性项共同构成弹性上下文，其子元素将按照弹性盒子的规则进行布局。弹性盒子布局的概念2.主轴在弹性盒子布局中，主轴是指弹性容器内的弹性项沿着哪个方向排列的轴线。主轴的方向由CSS中的属性flex-direction决定，可以是水平方向，也可以是垂直方向。Flex-direction属性有以下4个属性值。主轴是水平方向，从左到右主轴是水平方向，从右到左主轴是垂直方向，从上到下主轴是垂直方向，从下到上rowrow-reversecolumncolumn-reverse默认值弹性盒子布局的概念2.主轴弹性三要素第二部分弹性三要素在使用弹性盒子进行布局时，关于弹性项在容器中如何分配空间、如何伸缩以及如何适应容器大小的变化，这些问题都是由弹性三要素来控制的。通过调整这些要素，开发者可以精确控制元素在容器中的行为，实现复杂的布局需求。弹性三要素1.flex-grow（弹性增长因子）flex-grow（弹性增长因子）用于控制弹性项在容器中剩余空间的分配比例。如果容器的总空间大于各弹性项的基础大小（flex-basis）之和，flex-grow属性决定了弹性项能够扩展多少来填充额外的空间。当设计者希望某些弹性项在容器中占据更多的空间时，可以通过增加这些弹性项的flex-grow值，使得它们在容器中占据更多的空间。flex-grow属性的默认值为0，即弹性项不扩展。弹性三要素2.flex-shrink（弹性收缩因子）flex-shrink（弹性收缩因子）用于控制当容器空间不足以容纳所有弹性项时，弹性项可以缩小的比例。如果容器空间小于弹性项的基础大小之和，flex-shrink属性决定了弹性项在缩小时的相对比例。当设计者希望在容器空间不足时，某些项目比其他项目缩小得更多，可以通过增加这些弹性项的flex-shrink值。flex-shrink属性的默认值为1，即弹性项等量收缩。弹性三要素3.flex-basis（基础大小）flex-basis（基础大小）定义了在分配额外空间之前，弹性项占据的主轴空间大小。它是弹性项在主轴上的初始大小，可以是固定值（如像素）、百分比，或者是auto（自动计算）。当设计者希望弹性项有一个固定的起始大小，或者希望弹性项的大小基于其内容自动调整时，可以设置flex-basis。弹性三要素案例为第1个盒子的弹性项添加弹性增长因子，设置该值为1。为第2个盒子的弹性项添加弹性收缩因子，设置该值为0。弹性三要素4.flex在CSS中，可以使用flex属性来控制弹性项元素的行为，该属性包括三个部分，分别是：flex-grow、flex-shrink和flex-basis。弹性三要素4.flexflex属性可以通过以下方式来设置：flex：none，表示flex-grow:0、flex-shrink:0、flex-basis:auto，即各弹性项不会扩展也不会缩小，初始大小为内容大小。flex：auto，表示flex-grow:1、flex-shrink:1、flex-basis:auto，即各弹性项会等量扩展也会等量缩小，初始大小为内容大小。flex：initial，表示flex-grow:0、flex-shrink:1、flex-basis:auto，即各弹性项不会扩展，但是在必要时会等量缩小，初始大小为内容大小。flex:<正整数>，在这种情况下，flex属性的值为1个正整数时，表示flex-grow的值为该正整数，而flex-shrink和flex-basis的值为默认值，即分别为1和auto。弹性三要素5.设置换行在弹性盒子布局中，元素默认是单行排列的。我们可以通过设置容器的flex-wrap属性来控制元素的换行行为。当需要创建多行布局结构时，可以使用该属性，这对于响应式设计和创建复杂的布局非常有用。弹性三要素5.设置换行flex-wrap属性常用的属性值有以下几个值。

nowrap：默认值，表示弹性容器的所有项目不会换行，它们将在一行内显示。

wrap：表示弹性容器中的项目在必要时会换行，即如果一行中放不下所有的项目，它们会自动换到下一行。

wrap-reverse：与wrap类似，但是项目的换行方向是相反的。第一行的项目会显示在最后一行，第二行的项目显示在倒数第二行，以此类推。下面我们通过案例4-1-3来演示弹性容器中弹性项的换行。弹性三要素案例两个容器分别设置了不同的flex-wrap值，各容器内弹性项实现了换行显示。设置对齐方式第三部分设置对齐方式在弹性盒子布局中，对齐方式可以通过不同的属性来设置。这些属性控制了容器内部元素在主轴和交叉轴上的对齐方式。设置对齐方式1.justify-content属性justify-content属性用于控制容器内元素在主轴上的对齐方式。其常用的属性值有以下值。

flex-start：弹性项沿着主轴的起点对齐。

flex-end：弹性项沿着主轴的终点对齐。

center：弹性项沿着主轴的居中位置对齐。

space-between：弹性项沿着主轴的两端对齐，各项目均匀地沿着主轴排列并占满主轴，并且各项目之间的间隔相等，弹性项与容器边框之间没有间隔。

设置对齐方式1.justify-content属性

space-around：弹性项沿着主轴的两端和中间均匀分布，但两端的间隔是项目与中间间隔的一半。

space-evenly：弹性项沿着主轴的两端和中间均匀分布，所有间隔相等。设置对齐方式案例flex-start对齐方式flex-end对齐方式设置对齐方式案例center对齐方式space-between对齐方式设置对齐方式案例space-around对齐方式space-evenly对齐方式设置对齐方式2.align-items属性align-items属性用于控制容器内元素在交叉轴上的对齐方式。其常用的属性值有以下值。

stretch：默认值，如果弹性项未设置高度（或高度为auto），且容器的高度大于弹性项内容的高度，弹性项将在交叉轴上拉伸以填满容器的高度。

flex-start：所有弹性项在交叉轴的起始位置对齐。

flex-end：所有弹性项在交叉轴的终点位置对齐。

center：所有弹性项在交叉轴的居中位置对齐。

baseline：弹性项在交叉轴上根据它们的基线对齐。通常用于文本元素，使其基线对齐。设置对齐方式案例交叉轴flex-start对齐方式交叉轴flex-end对齐方式设置对齐方式案例交叉轴center对齐方式交叉轴baseline对齐方式设置对齐方式案例交叉轴stretch对齐方式大美中国制作“传统建筑”页面CONTENTS目录网格布局第一部分网格容器及其属性第二部分网格项及其属性第三部分网格线的定义和使用第四部分网格布局第一部分网格布局网格布局是一种强大的二维布局系统，它允许开发者通过行和列的组合来创建复杂的页面布局。在网格布局中，容器被划分为多个网格轨道，包括行轨道和列轨道。这些轨道通过网格线来分隔，网格线可以是水平的也可以是垂直的。网格项可以被放置在这些轨道形成的单元格中，并且可以跨越多个单元格。网格布局的概念1.应用场景响应式网页布局复杂页面布局仪表盘布局电商产品展示页面网格容器及其属性第二部分网格布局网格布局是CSS3引入的一种强大的布局系统，它允许开发者通过行和列的组合来创建复杂的页面布局。在网格布局中，有两个核心概念：网格容器（gridcontainer）和网格项（griditem）。网格布局网格容器是应用了display:grid;（块级网格容器）或display:inline-grid;（行内网格容器）样式的元素。它是网格布局的基础，定义了网格布局的范围，并且可以包含多个网格项。网格容器内部的元素（网格项）会按照网格布局的规则进行排列。网格布局1 <divclass="container"style="display:grid;">2

<divclass="item">Item1</div>3

<divclass="item">Item2</div>4

<divclass="item">Item3</div>5 </div>以上代码创建了一个容器网格布局网格布局提供了一套丰富的属性，可以创建复杂的网页布局。这些属性可以分为两大类：容器属性和项属性。容器属性用于定义网格的结构和布局，而项属性则用于控制网格项的位置和对齐。布局的容器属性是构建网格结构的基础，它们用来定义网格的尺寸、间隙、对齐方式以及自动布局的行为。网格布局属性属性值描述displaygrid将元素设置为块级网格容器。inline-grid将元素设置为行内网格容器。grid-template-columns固定宽度：具体的像素值、百分比等单位。重复函数：使用repeat()函数重复创建多个相同的列轨道。定义网格的列轨道。grid-template-rows定义网格的行轨道。grid-template-areas字符串数组这个属性用于给网格项指定一个区域名称。表4-2-1容器属性网格布局属性属性值描述grid-column-gap固定宽度：具体的像素值、百分比等单位。设置网格列之间的间隔。grid-row-gap设置网格行之间的间隔。justify-itemsstart、end、center控制网格项在列轨道中的水平对齐方式。align-items控制网格项在行轨道中的垂直对齐方式。grid-auto-columns具体的像素值定义自动创建的列轨道的大小。grid-auto-rows定义自动创建的行轨道的大小。网格项及其属性第三部分网格项及其属性网格项是网格布局的基本单元，是网格容器的直接子元素。只有直接子元素才能成为网格项，孙元素不会自动成为网格项。网格项属性允许开发者对单个网格项进行更精细的控制，包括它们的位置、对齐方式和排序。网格项及其属性1.grid-column和grid-row这些属性用于指定网格项跨越的列或行。可以通过指定起始线和结束线来定义网格项的位置。例如，grid-column:1/3;表示网格项从第1条列线到第3条列线，共跨2列。网格项及其属性2.grid-area这个属性用于将网格项放置到指定的网格区域。如果网格区域已经通过grid-template-areas定义，可以直接使用区域名称来定位网格项。例如，grid-area:header;将网格项放置在定义为“header”的网格区域内。网格项及其属性3.order这个属性定义了网格项的排序顺序，数值越小，网格项在网格容器中排列得越靠前。例如，order:2;将网格项的顺序设置为2，使其排在其他默认顺序（通常是1）之后的网格项前面。网格线的定义及使用第四部分网格线的定义及使用网格线是网格轨道之间的分隔线。网格线可以是水平的（行线）或垂直的（列线），它们用于定义网格项的位置。每条网格线都有一个编号，从1开始，水平网格线的编号表示行线，垂直网格线的编号表示列线。此外，还可以给网格线命名，以便更直观地引用它们。网格线的定义及使用列线的编号是从左到右，行线的编号是从上到下，序号都是从1开始。网格线可以通过在grid-template-columns和grid-template-rows中使用方括号[]来命名。在使用时，我们可以使用编号和名字定位网格线。大美中国制作“名山大川”页面CONTENTS目录响应式概述第一部分像素和屏幕分辨率第二部分视口第三部分CONTENTS目录媒体查询第四部分百分比布局第五部分响应式概述第一部分响应式概述响应式布局是一种网页设计和开发的方法，目标是创建一个能够兼容多个终端的网站，而不是为每个终端创建特定版本的网站。它使得网站能够适应不同设备的屏幕尺寸和分辨率，从而提供最佳的用户体验。这种设计方法通过使用流体网格、弹性图片、媒体查询等技术，确保网页在各种设备上都能正确显示和操作，从手机、平板电脑到桌面电脑，甚至更大的显示屏。响应式概述1.优点灵活性高，易解决多设备显示适应问题有效降低开发和维护成本12响应式概述2.缺点12开发工作量增加，开发效率降低代码累赘，页面加载时间增加改变网站原有的布局结构，用户使用不习惯3响应式概述3.技术原理<meta>标签控制浏览器视口根据屏幕尺寸和设备特性应用不同的CSS样式使用百分比来定义元素的宽度使用相对单位（如em或rem）来设置字体大小视口CSS媒体查询百分比布局可伸缩的字体图片和其他媒体元素能够自动调整大小弹性图片和媒体像素和屏幕分辨率第二部分像素和屏幕分辨率1.像素和屏幕分辨率像素是显示设备上最小的物理点，可以被单独控制以产生光。它是构成图像的最小单位。像素可以是单个颜色，也可以是子像素。我们打开ps，将图片放到最大，那些一个个模糊的小方格就是像素。像素和屏幕分辨率1.像素和屏幕分辨率屏幕分辨率是指屏幕上可以显示的像素数量，通常以水平像素数乘以垂直像素数来表示，例如1920x1080。分辨率决定了屏幕能够显示的图像的精细程度。分辨率越高，显示的图像越清晰，能够展示的细节也越多。像素和屏幕分辨率2.设备像素设备像素（DevicePixels）是指显示设备（如显示器、手机屏幕、平板电脑屏幕等）上实际的物理像素点。这些像素点是构成图像、视频和用户界面的基本单元，它们决定了显示设备的分辨率和图像的清晰度。设备像素直接关联到设备的物理分辨率，即屏幕上可以容纳的水平和垂直像素点的数量。例如，一个1920x1080像素的屏幕意味着它有1920个水平像素点和1080个垂直像素点。像素和屏幕分辨率2.设备像素由于不同型号的手机、平板或电脑的实际屏幕尺寸不同，我们使用像素密度PPI（PixelsPerInch，每英寸像素数）来衡量它们的屏幕分辨率，PPI描述了在一英寸长度内可以容纳多少个像素点。PPI越高，屏幕显示的图像越清晰细腻。像素和屏幕分辨率2.设备像素设备设备类型屏幕分辨率移动设备小屏幕手机320*480px中等屏幕手机360*640px大屏幕手机375*667px超大屏幕手机414*736px全面屏手机428*926px平板设备小屏幕平板768*1024px大屏幕平板1024*1366px电脑和显示器标准屏幕1280*800px、1366*768px宽屏显示器1440*900px、1600*900px全高清（FullHD）1920*1080px2K显示器2560*1440px4K显示器3840*2160px表4-3-1常用屏幕分辨率像素和屏幕分辨率3.CSS像素CSS像素指的是在网页设计和开发中使用的虚拟像素或逻辑像素，它们是相对于设备独立像素的概念。CSS像素通常被浏览器映射到屏幕上的物理像素。在标准的显示设备上，1个CSS像素可能正好对应1个物理像素。然而，这个映射可能因设备而异。例如，在高分辨率的显示屏上，一个CSS像素可能对应多个物理像素，以提高图像的清晰度。因此我们使用设备像素比DPR（DevicePixelRatio）来表示CSS像素与物理像素之间的对应关系：一个DPR为1的屏幕意味着1个物理像素对应1个设备独立像素。DPR为2的屏幕意味着1个物理像素对应4个设备独立像素（2x2子像素排列）。视口第三部分视口视口指的是浏览器窗口中用于显示网页内容的区域。在传统的桌面浏览器中，视口通常与浏览器窗口的大小相同。然而，在移动设备上，视口的概念更加复杂，因为它涉及到屏幕的实际大小、设备的分辨率以及浏览器如何渲染网页。视口1.布局视口指的是浏览器用来计算布局的视口。在桌面浏览器中，布局视口通常与浏览器窗口的大小相同。在移动设备上，它可能被设置为一个固定的宽度，如980px，或者与设备的屏幕宽度相同。视口2.视觉视口指的是用户可以看到的网页内容的区域。在移动设备上，视觉视口可以被缩放和滚动，以适应不同屏幕尺寸和分辨率。视口设置是通过在HTML文档的<head>部分添加一个<meta>标签来实现的，语法如下所示：<metaname="viewport"content="width=device-width,initial-scale=1.0">视口2.视觉视口上述代码中<meta>标签用于描述html文档的属性，这里name="viewport"用来进行视口设置，content中是viewport的属性，指的是将视口宽度与屏幕宽度匹配，初始缩放比例为100%。视口2.视觉视口viewport常用属性值介绍如表4-3-2所示。属性值含义width视口的宽度，可以是固定的像素值或设置为device-width，后者意味着视口的宽度将与设备的屏幕宽度相匹配。height视口的高度，通常设置为device-height，与设备的屏幕高度相匹配。initial-scale设置页面的初始缩放比例，通常设置为1.0，意味着页面以100%的比例显示。maximum-scale限制用户能够放大视口的最大比例。minimum-scale限制用户能够缩小视口的最小比例。user-scalable是否允许用户缩放视口，通常设置为yes或no。表4-3-2viewport常用属性值媒体查询第四部分媒体查询媒体查询（MediaQueries）是CSS3的一个功能，它允许