HTML 前端 实例与教程 12

单元7CSS3布局属性HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】7.1CSS3浮动7.2CSS3定位7.2.1static静态定位7.2.2fixed固定定位7.2.3relative相对定位7.2.4absolute绝对定位7.2.5重叠的元素7.3CSS3弹性盒子属性7.3.1flex7.3.2justify-content7.3.3flex-wrap7.3.4align-content7.3.5align-items7.3.6align-self7.3.7flex-direction【商业实例】“仿写淘宝首页”项目——设置“猜你喜欢”模块的样式任务一设置商品卡片样式任务二设置商品列表样式【综合实训】制作浮动的广播条【单元小结】目录【学习导读】CSS3布局属性用于控制网页元素的位置、大小和对齐方式等。在浏览网页时，我们可以发现网页的布局千变万化、风格各异，每种布局都能吸引不同的用户浏览，符合不同用户的阅读习惯。通过使用这些布局属性，我们可以轻松地创建灵活、能适应不同屏幕尺寸和设备的网页布局，实现自适应和响应式设计，提升用户体验和网页可访问性。CSS3布局属性为开发人员提供了更多的工具，使网页布局更加灵活、美观。本单元将详细介绍CSS3布局属性的使用方法。学习导读【学习目标】知识目标1．掌握元素布局属性的使用方法。2．掌握浮动属性的使用方法。能力目标1．能够独立设置布局样式。2．能够设置元素定位方式。素质目标1．培养学生的思维能力。2．培养学生的搭配能力。学习目标思维导图7.1CSS3浮动浮动元素会向左或向右移动，直到碰到容器的边缘或其他浮动元素。这使开发人员可以创建多列布局、图文混排等复杂的网页结构。浮动属性取值浮动（float）是一种布局技术，用于控制元素在网页中的位置和相对于其周围元素的对齐方式。将元素设置为浮动，可以使其脱离正常的文档流，并相对于其容器或其他浮动元素进行定位。属性值描述left表示元素向左浮动，脱离正常文档流，并尽可能向左停靠right表示元素向右浮动，脱离正常文档流，并尽可能向右停靠none表示元素不浮动，按照正常文档流布局，是默认值inherit表示元素继承其父元素的float属性值7.1CSS3浮动浮动元素具有以下特点。（1）浮动元素只能左右移动而不能上下移动。（2）浮动元素会向左或向右移动，直到触达父元素边界或其他浮动元素。（3）浮动元素的宽度默认由内容宽度决定，而非撑满父容器。（4）正常文档流中的文本会环绕在浮动元素周围。（5）浮动元素位于普通文档流元素之上，但低于绝对定位或固定定位元素。7.1CSS3浮动例如将列表设置为左浮动，列表会横向排列，代码如下所示（实例位置：单元7/7-1.html）7.1CSS3浮动clear属性用于清除浮动元素对其他非浮动元素造成的影响，属性值有none、left、right和both。清除浮动属性值属性值描述left表示元素不清除浮动right表示元素的顶部边界必须低于前面所有左浮动元素的底部边界none表示元素的顶部边界必须低于前面所有右浮动元素的底部边界inherit元素的顶部边界必须低于前面所有左浮动和右浮动元素的底部边界7.1CSS3浮动设置列表标签的clear属性，使正文部分正常展示，代码如下所示（实例位置：单元7/7-2.html）。7.2CSS3定位通过结合定位属性和相应的属性值（如static、relative、fixed和absolute），可以精确地控制元素的位置。CSS3定位是一种强大的布局技术，可以用于创建复杂的布局结构，实现层叠效果和交互式元素定位。CSS3定位属性用于控制元素在文档中的位置。通过使用CSS3的定位属性，可以确定元素相对于其父元素或文档的特定位置。属性描述static静态定位，默认值relative相对定位，相对当前元素位置fixed固定定位，在网页上固定的位置出现absolute绝对定位，相对于上级已经定位的元素的位置position属性值7.2CSS3定位7.2.1static静态定位静态定位是元素的默认定位方式。将元素的position属性设置为static时，元素将按照正常的文档流进行布局，不受任何定位属性的影响。静态定位的元素不会受到top、right、bottom和left属性的影响，也不会影响其他元素的位置。静态定位的元素会按照HTML文档的顺序自上而下进行布局，根据元素的display属性和盒子模型进行定位。静态定位适用于大多数元素，特别是不需要进行特殊布局或定位的元素。将元素的position属性设置为static，可以恢复元素的默认定位，以确保元素按照正常的文档流进行布局。7.2CSS3定位7.2.2fixed固定定位固定定位可使元素相对于视口固定不动。将元素的position属性设置为fixed时，元素将相对于视口进行定位，无论网页如何滚动，该元素始终保持在相同的位置。固定定位的元素不会受到其他元素的影响，并且不会占据文档流中的位置。可以使用top、right、bottom和left属性来精确控制固定定位元素的位置。固定定位常用于创建导航栏、悬浮元素、广告条等需要始终可见的元素。通过将元素的position属性设置为fixed，可以确保元素始终保持在视口的固定位置，从而为网页提供稳定的导航。7.2CSS3定位7.2.2fixed固定定位例如设置导航栏为固定定位，代码如下所示（实例位置：单元7/7-3.html）。7.2CSS3定位7.2.2fixed固定定位运行效果7.2CSS3定位7.2.3relative相对定位相对定位的元素会占据文档流中的位置，但其偏移量不会影响其他元素的布局。相对定位常用于微调元素的位置，例如调整元素的水平或垂直位置，或创建层叠效果。通过将元素的position属性设置为relative并调整偏移属性的值，可以实现元素在文档流中的微小偏移，从而精确控制元素的位置。AB相对定位可使元素相对于其正常位置进行微调。将元素的position属性设置为relative时，元素仍会按照正常的文档流进行布局，但可以通过调整top、right、bottom和left属性来改变元素相对于其正常位置的偏移量。7.2CSS3定位7.2.4absolute绝对定位绝对定位可使元素相对于其最近的具有定位属性的父元素进行定位。将元素的position属性设置为absolute时，元素会脱离正常的文档流，不占据文档布局空间，并相对于其最近的具有定位属性的元素（通常是父元素）进行定位。通过调整top、right、bottom和left属性的值，可以精确控制元素相对于其定位父元素的位置。如果没有找到具有定位属性的父元素，绝对定位的元素将相对于文档的初始包含块进行定位。通过将元素的position属性设置为absolute并调整偏移属性的值，可以实现元素在文档中的精确定位，从而实现自定义的布局效果。7.2CSS3定位7.2.4absolute绝对定位将元素设置为绝对定位，制作一个悬浮菜单，将菜单内容展示在菜单右边，代码如下所示（实例位置：单元7/7-4.html）。7.2CSS3定位7.2.4absolute绝对定位将元素设置为绝对定位，制作一个悬浮菜单，将菜单内容展示在菜单右边，代码如下所示（实例位置：单元7/7-4.html）。运行效果7.2CSS3定位7.2.5重叠的元素元素层叠属性z-index用于控制元素在垂直方向上的叠放顺序。通过设置元素的z-index属性，可以确定元素在堆叠上下文中的显示顺序，即元素位于其他元素的上方或下方。具有较大的z-index值的元素将显示在具有较小的z-index值的元素上方。只有定位元素（position属性值为relative、absolute或fixed）才拥有z-index属性，position属性值为static的元素无法使用该属性。z-index值可以是正数、负数或0，但不推荐使用非整数值。7.2CSS3定位7.2.5重叠的元素例如给图片元素设置不同的z-index值，代码如下所示（实例位置：单元7/7-5.html）。运行效果7.3CSS3弹性盒子属性CSS3弹性盒子属性是一组用于创建灵活布局的属性。它提供了一种直观和简单的方式来组织和对齐元素，使其可适应不同的屏幕尺寸和设备。弹性盒子属性允许我们创建灵活的布局，无论是单行、单列还是多行多列布局，都可以通过简单的属性设置来实现。它使得元素能够自动适应容器大小，并且可以轻松地调整元素的顺序和大小，以便更好地适应不同的屏幕尺寸和布局。7.3CSS3弹性盒子属性弹性盒子常用的属性属性描述display指定

HTML

元素盒子类型flex-direction指定了弹性容器中子元素的排列方式justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式flex-wrap设置弹性盒子的子元素超出父容器时是否换行align-content修改

flex-wrap

属性的行为，类似

align-items,

但不是设置子元素对齐，而是设置行对齐方式flex-flowflex-direction

和

flex-wrap

的简写order设置弹性盒子的子元素排列顺序align-self在弹性子元素上使用。覆盖容器的

align-items

属性flex设置弹性盒子的子元素如何分配空间7.3CSS3弹性盒子属性7.3.1flex通过设置display属性的值为flex或inline-flex将容器定义为弹性容器。弹性容器能够高效地分配空间、对齐元素，并处理响应式需求。flex属性用于设置或检索弹性盒子模型对象的子元素如何分配空间。flex属性是混合属性，包含flex-grow、flex-shrink和flex-basis等子属性。flex属性的子属性值描述flex-grow定义项目的扩展比例（默认为0，不扩展）flex-shrink定义项目的收缩比例（默认为1，空间不足时收缩）flex-basis定义项目的初始大小（默认为auto，即项目内容的大小）7.3CSS3弹性盒子属性7.3.2justify-contentjustify-content属性用于定义元素在主轴上的对齐方式。它决定了弹性容器中的元素在主轴上的对齐方式，可以控制元素的对齐位置和间距。通过设置justify-content属性，我们可以在弹性容器中水平对齐元素，使它们沿主轴的方向对齐。justify-content属性值值描述flex-start默认值。元素位于容器的开头。flex-end元素位于容器的结尾。center元素位于容器的中心。space-between元素位于各行之间留有空白的容器内。space-around元素位于各行之前、之间、之后都留有空白的容器内。space-evenly元素位于各行之前、之间、之后都留有空白的容器内。等分间距7.3CSS3弹性盒子属性7.3.3flex-wrapflex-wrap属性用于控制弹性容器不足以容纳所有元素时元素是否换行以及换行的方式。通过设置flex-wrap属性，我们可以控制元素在容器中的换行方式。该属性有3个值。flex-wrap属性值值描述nowrap默认值，所有弹性项目强制在一行内显示wrap项目在一行空间不足时自动换行wrap-reverse与wrap类似，但换行方向相反7.3CSS3弹性盒子属性7.3.4align-contentalign-content属性用于控制弹性容器中多行元素在交叉轴方向（与元素的排列方向垂直的方向）的对齐方式。它决定了当弹性容器中的元素占用的空间小于容器的高度时，如何在交叉轴上对齐和分布这些元素。通过设置align-content属性，我们可以控制多行元素在交叉轴上的对齐方式。align-content属性值值描述stretch默认值，元素被拉伸以适应容器center元素位于容器的中心flex-start元素位于容器的开头flex-end元素位于容器的结尾值描述space-between元素位于各行之间留有空白的容器内。space-around元素位于各行之前、之间、之后都留有空白的容器内。inherit从父元素继承该属性7.3CSS3弹性盒子属性7.3.5align-itemsalign-items属性用于控制弹性容器中的元素在交叉轴上的对齐方式，即垂直方向上的对齐方式。align-items属性值通过设置align-items属性，我们可以控制元素在弹性容器中的垂直对齐方式。值描述stretch默认值，元素被拉伸以适应容器center元素位于容器的中心flex-start元素位于容器的开头flex-end元素位于容器的结尾baseline元素位于容器的基线上initial设置该属性为它的默认值inherit从父元素继承该属性7.3CSS3弹性盒子属性7.3.6align-selfalign-self属性用于控制弹性容器中单个元素在交叉轴上的对齐方式。它允许我们为每个元素单独设置垂直方向上的对齐方式，而不影响其他元素的对齐方式。通过设置align-self属性，可以覆盖父容器的align-items属性，并单独控制元素在交叉轴上的对齐方式。align-self属性值值描述auto默认值，元素继承它的父容器的

align-items

属性。如果没有父容器则为

stretchstretch元素被拉伸以适应容器center元素位于容器的中心flex-start元素位于容器的开头flex-end元素位于容器的结尾baseline元素位于容器的基线上initial设置该属性为它的默认值，等同于autoinherit从父元素继承该属性的设置7.3CSS3弹性盒子属性7.3.7flex-directionflex-direction属性用于控制弹性容器中的元素是按照水平方向排列还是按照垂直方向排列。通过设置flex-direction属性，我们可以改变元素在弹性容器中的排列方向。flex-direction属性值值描述row默认值，将元素沿水平方向从左到右显示row-reverse将元素沿水平方向从右到左显示column将元素沿垂直方向从上到下显示column-reverse将元素沿垂直方向从下到上显示initial设置为浏览器的默认值，等同于rowinherit从父元素继承该属性的设置7.3CSS3弹性盒子属性7.3.7flex-direction例如设置一个列表为弹性布局，并控制每一列占据不同的空间，代码如下所示（实例位置：单元7/7-6.html）。【