CSS进阶班笔记(五)

原创 于 2024-04-28 13:56:24 发布 · 153 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #笔记 #css3

本文详细介绍了CSSflex布局的概念、原理，包括flex-direction、justify-content、flex-wrap等关键属性的使用，以及rem适配和媒体查询在响应式设计中的作用。它涵盖了从基础概念到实战技巧，适合前端开发者深入学习和实践。

在这里插入图片描述

2.2、flex布局

| 传统布局 | flex弹性布局 |

| — | — |

| 兼容性好 | 操作方便，布局极为简单，移动端应用很广泛 |

| 布局繁琐 | PC 端浏览器支持情况较差 |

| 局限性，不能再移动端很好的布局 | IE 11或更低版本，不支持或仅部分支持 |

建议：

  1. 如果是PC端页面布局，我们还是传统布局。

  2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

2.2.1、初体验

  1. 搭建HTML结构

1

2

3

  1. CSS样式

span 直接给宽度和高度，背景颜色，还有蓝色边框

给 div 只需要添加 display: flex 即可

Document

1

2

3

在这里插入图片描述

2.2.2、flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

在这里插入图片描述

  • 上述例子 div 就是 flex父容器。

  • 上述例子 span 就是 子容器 flex项目

  • 子容器可以横向排列也可以纵向排列

总结 flex 布局原理：就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。

2.2.3、flex布局常见父项属性

以下有 6 个属性是对父元素设置的

  • flex-direction：设置主轴的方向

  • justify-content：设置主轴上的子元素排列方式

  • flex-wrap：设置子元素是否换行

  • align-content：设置侧轴上的子元素的排列方式（多行）

  • align-items：设置侧轴上的子元素排列方式（单行）

  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

2.2.3.1、flex-direction设置主轴方向

主轴和侧轴：在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

  • 默认主轴方向就是 x 轴方向，水平向右

  • 默认侧轴方向就是 y 轴方向，水平向下

在这里插入图片描述

Document

1

2

3

在这里插入图片描述

  • flex-direction 属性决定主轴的方向（即项目的排列方向）

  • 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

| 属性值 | 说明 |

| — | — |

| row | 默认值从左到右 |

| row-reverse | 从右到左 |

| column | 从上到下 |

| column-reverse | 从下到上 |

2.2.3.2、justify-content 设置主轴上的子元素排列方式

  • justify-content 属性定义了项目在主轴上的对齐方式

  • 注意： 使用这个属性之前一定要确定好主轴是哪个

| 属性值 | 说明 |

| — | — |

| flex-start | 默认值从头部开始，如果主轴是x轴，则从左到右 |

| flex-end | 从尾部开始排列 |

| center | 在主轴居中对齐(如果主轴是 x 轴则水平居中) |

| space-around | 平分剩余空间 |

| space-between | 先两边贴边，再平分剩余空间🔥 |

Document

1

2

3

4

在这里插入图片描述

Document

1

2

3

在这里插入图片描述

2.2.3.3、flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

意思就是如果按照我们设置的盒子大小，一行只能装 3 个盒子，但是我们有 5 个盒子，那么 flex 布局默认会给我们塞上去，自动缩小盒子大小。

| 属性值 | 说明 |

| — | — |

| nowrap | 默认值，不换行 |

| wrap | 换行 |

Document

1

2

3

4

5

在这里插入图片描述

2.2.3.4、align-items 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

| 属性值 | 说明 |

| — | — |

| flex-start | 从上到下 |

| flex-end | 从下到上 |

| center | 挤在一起居中(垂直居中) |

| stretch | 拉伸(默认值) |

Document

1

2

3

在这里插入图片描述

2.2.3.5、align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

| 属性值 | 说明 |

| — | — |

| flex-start | 默认值在侧轴的头部开始排列 |

| flex-end | 在侧轴的尾部开始排列 |

| center | 在侧轴中间显示 |

| space-around | 子项在侧轴平分剩余空间 |

| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |

| stretch | 设置子项元素高度平分父元素高度 |

Document

1

2

3

4

5

6

在这里插入图片描述

2.2.3.6、align-content 和 align-items 区别

  • align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸

  • align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。

  • 总结就是单行找 align-items 多行找 align-content

在这里插入图片描述

2.2.4、flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow: row wrap;

  • flex-direction：设置主轴的方向

  • justify-content：设置主轴上的子元素排列方式

  • flex-wrap：设置子元素是否换行

  • align-content：设置侧轴上的子元素的排列方式（多行）

  • align-items：设置侧轴上的子元素排列方式（单行）

  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

Document

1

2

3

4

5

2.3、flex布局子项常见属性

  • flex 子项目占的份数

  • align-self 控制子项自己在侧轴的排列方式

  • order属性定义子项的排列顺序（前后顺序）

2.3.1、flex属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

在这里插入图片描述

.item {

flex: ; /* default 0*/

}

Document

1

2

3

在这里插入图片描述

2.3.2、align-self 控制子项自己在侧轴上的排列方式

  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

  • 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

Document

1

2

3

在这里插入图片描述

2.3.3、order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

Document

1

2

3

在这里插入图片描述

2.4、背景颜色渐变

Document

在这里插入图片描述

2.5、rem适配布局

我们来看几个问题：

  1. 页面布局文字能否随着屏幕大小变化而变化？

  2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？

  3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

2.5.1、rem基础

  • rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

  • 不同的是rem的基准是相对于html元素的字体大小。

  • 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px

  • rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小

Document

在这里插入图片描述

2.5.2、媒体查询

媒体查询（Media Query）是CSS3新语法。

  • 使用 @media 查询，可以针对不同的媒体类型定义不同的样式

  • @media 可以针对不同的屏幕尺寸设置不同的样式

  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

  • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法如下：

@media mediatype and|not|only(media feature){

CSS-code

}

  • 用 @media 开头 注意@符号

  • mediatype 媒体类型

  • 关键字 and not only

  • media feature 媒体特性 必须有小括号包含

Document

上面代码的意思是在我们屏幕上页面处于 500px-800px 之间，页面背景颜色显示为 pink 色。页面小于 500px，背景颜色显示为 purple 色

2.5.2.1、mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

| 值 | 解释说明 |

| — | — |

| all | 用于所有设备 |

| print | 用于打印机和打印预览 |

| scree | 用于电脑屏幕、平板电脑、智能手机等 |

2.5.2.2、关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。

  • not：排除某个媒体类型，相当于“非”的意思，可以省略。

  • only：指定某个特定的媒体类型，可以省略。

最后

光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性

Java面试宝典2021版

最常见Java面试题解析（2021最新版）

2021企业Java面试题精选

  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

  • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法如下：

@media mediatype and|not|only(media feature){

CSS-code

}

  • 用 @media 开头 注意@符号

  • mediatype 媒体类型

  • 关键字 and not only

  • media feature 媒体特性 必须有小括号包含

Document

上面代码的意思是在我们屏幕上页面处于 500px-800px 之间，页面背景颜色显示为 pink 色。页面小于 500px，背景颜色显示为 purple 色

2.5.2.1、mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

| 值 | 解释说明 |

| — | — |

| all | 用于所有设备 |

| print | 用于打印机和打印预览 |

| scree | 用于电脑屏幕、平板电脑、智能手机等 |

2.5.2.2、关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。

  • not：排除某个媒体类型，相当于“非”的意思，可以省略。

  • only：指定某个特定的媒体类型，可以省略。

最后

光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性

Java面试宝典2021版

[外链图片转存中…(img-jyK6pYhu-1714283772952)]

[外链图片转存中…(img-glFMHkEF-1714283772953)]

最常见Java面试题解析（2021最新版）

[外链图片转存中…(img-TMOt5zIQ-1714283772953)]

[外链图片转存中…(img-wmi2qBDG-1714283772953)]

2021企业Java面试题精选

[外链图片转存中…(img-PswXRxPn-1714283772953)]

[外链图片转存中…(img-aWfgrHoP-1714283772954)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

【黑马程序员】2、CSS进阶_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-11 1714
但是body的子级有自己的样式，则生效自己的样式，不继承父级样式。比如h1标签，默认有自己的字体大小，再有超链接，默认是蓝的，就不继承body的红色。选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用。选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用。注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。截不了图，鼠标在第一行，字体变红，鼠标在第二行，字体变黄。
2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc
11-09
**CSS样式学习笔记** **一、CSS简介** CSS（Cascading Style Sheets）是一种层叠样式表语言，自1996年起发展至今，已经成为Web设计的标准之一。1998年5月，W3C发布了CSS Level 2规范，为网页设计提供了强大的样式...
移动web开发---rem适配案例---优惠券.rar
11-06
移动web开发---rem适配---优惠券案例资源，其中一个是用公式来完成适配的，另一个是用JS来完成适配的。
Rem布局
ZWTLF的博客
03-08 1928
Rem布局？什么东西？？？Rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现，一种通过JavaScript实现；还有一种通过vw实现。在这里小编主要讲述第二种方式。 下面小编先简单的说一下rem布局的优缺点： 优点：在不同的设备下看起来比较协调，内容会随着设备屏幕的大小进行等比缩放。 缺点: 随着屏幕的变大或缩小不会展现更多的内容。 它的优缺点小编就说的...
rem布局
U_Are_My_Halo的博客
04-15 419
rem布局 各种布局特征的对比 由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，美工一般只会提供750px或者是640px的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。 通常解决方案如下： 流式布局：可以让各种屏幕都适配，只是在大屏幕中显示效果不是非常的友好, 即使这样, 由于开发...
css进阶笔记，通俗易懂
04-22
css进阶笔记，通俗易懂，后期会持续更新
Day 03 CSS 基础与进阶学习笔记
最新发布
02-10
CSS进阶包括各种布局技术，如浮动（float）、定位（position）、Flexbox、Grid布局等。这些技术用于创建复杂的页面结构和响应式设计，能够有效地控制元素的位置和大小。 #### 开发建议 在实际开发中，建议使用外部...
CSS进阶笔记：实例详解与技巧
本篇CSS进阶笔记旨在提供一个通俗易懂的学习路径，帮助读者深入了解和掌握高级CSS技巧。以下部分知识点概述： 1. **选择器优先级**： - 了解HTML元素的层次结构和选择器类型（如`html`、`div`、`h1`等）在CSS中的...
移动web开发_rem布局
function_road的博客
05-07 253
移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值