CSS进阶班笔记(五)(1)

最新推荐文章于 2024-06-04 23:11:16 发布
最新推荐文章于 2024-06-04 23:11:16 发布
阅读量291 收藏 9
点赞数 5
文章标签： java 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83977369/article/details/138948404
版权

最后

对于很多Java工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。

整理的这些资料希望对Java开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

再分享一波我的Java面试真题+视频学习详解+技能进阶书籍

美团二面惜败，我的凉经复盘（附学习笔记+面试整理+进阶书籍）

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

需要这份系统化的资料的朋友，可以点击这里获取

  • {

margin: 0;

padding: 0;

}

section {

width: 100%;

max-width: 980px;

min-width: 320px;

margin: 0 auto;

}

section div {

float: left;

width: 50%;

height: 400px;

}

section div:nth-child(1) {

background-color: pink;

}

section div:nth-child(2) {

background-color: purple;

}

在这里插入图片描述

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：指定某个特定的媒体类型，可以省略。

2.5.2.3、媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含。

| 值 | 解释 |

| — | — |

| width | 定义输出设备中页面可见区域的宽度 |

| min-width | 定义输出设备中页面最小可见区域宽度 |

| max-width | 定义输出设备中页面最大可见区域宽度 |

注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

Document

在这里插入图片描述

2.5.3、媒体查询+rem实现元素动态大小变化

  • rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

  • 媒体查询可以根据不同设备宽度来修改样式

  • 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

Document
购物车

上述代码的意思是：屏幕尺寸小于320px， div 大小为 0.5*50 = 25px，屏幕尺寸大于 320px 小于 640px， div 大小为 0.5 * 100 = 50px

2.5.4、引入资源

最近我根据上述的技术体系图搜集了几十套腾讯、头条、阿里、美团等公司21年的面试题，把技术点整理成了视频（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分

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

需要这份系统化的资料的朋友，可以点击这里获取

round-color: green;

}

} */

@media screen and (min-width: 540px) {

body {

background-color: green;

}

}

/* 4. 大于等于970 我们页面的颜色改为 红色 */

@media screen and (min-width: 970px) {

body {

background-color: red;

}

}

/* 5. screen 还有 and 必须带上不能省略的 */

/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */

在这里插入图片描述

2.5.3、媒体查询+rem实现元素动态大小变化

  • rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

  • 媒体查询可以根据不同设备宽度来修改样式

  • 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

Document
购物车

上述代码的意思是：屏幕尺寸小于320px， div 大小为 0.5*50 = 25px，屏幕尺寸大于 320px 小于 640px， div 大小为 0.5 * 100 = 50px

2.5.4、引入资源

[外链图片转存中…(img-0exb6VTA-1715824895018)]

最近我根据上述的技术体系图搜集了几十套腾讯、头条、阿里、美团等公司21年的面试题，把技术点整理成了视频（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分

[外链图片转存中…(img-zbSdLjC2-1715824895018)]

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

需要这份系统化的资料的朋友，可以点击这里获取

2401_83977369
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css进阶笔记，通俗易懂
04-22
css进阶笔记，通俗易懂，后期会持续更新
2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc
11-09
CSS-- Cascading Style Sheets，层叠式样式表。该技术始于1996年，1998年5月，level2(水平) 成为了W3C 的新标准。CSS扩展了HTML的功能，CSS与HTML、脚本相结合，可以更加有效的实现对网页元素的布局、排版和显示效果...
CSS进阶班笔记(四)
Augenstern_QXL的博客
07-28 1万+
✍目录总览 1、精灵图Sprites 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了 1.1、精灵图的使用???? 使用精灵图的核心： 精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中 这个大图片也称为 sprites 精灵图 或者 雪碧图 移动背景图片的位置，此时可以使用 background-position 移动的距离就是这个目标
CSS进阶班笔记(五)
热门推荐
Augenstern_QXL的博客
09-18 1万+
✍、拖了好久的移动端web开发，今天补上了
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 359
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
CSS进阶——学习笔记
2301_80194870的博客
10-12 150
css进阶、盒子模型、浮动
最全CSS进阶班笔记(四)，推荐给大家
2401_84692226的博客
05-13 670
按照上面的过程，4个月的时间刚刚好。当然Java的体系是很庞大的，还有很多更高级的技能需要掌握，但不要着急，这些完全可以放到以后工作中边用别学。学习编程就是一个由混沌到有序的过程，所以你在学习过程中，如果一时碰到理解不了的知识点，大可不必沮丧，更不要气馁，这都是正常的不能再正常的事情了，不过是“人同此心，心同此理”的暂时而已。道路是曲折的，前途是光明的！本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录。
CSS进阶班笔记(四)，HTML如何添加锚点
2201_75294326的博客
04-03 883
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-WO4gipfx-1712092778489)][外链图片转存中…(img-jJ6NB8he-1712092778490)]
CSS进阶班笔记(四)，2024年前端程序员职业规划
2401_83944596的博客
04-09 817
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包一个人可以走的很快，但一群人才能走的更远。
前端笔记（2）CSS进阶
m0_57497700的博客
02-20 48
一
前端笔记之CSS进阶 - CSS特性
qq_52647098的博客
07-11 168
CSS特性
Vue学习笔记进阶篇之单元素过度
12-09
可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 单元素/组件的过度 Vue 提供了 transition 的封装组件，...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
jqGrid 学习笔记整理——进阶篇(一 )
11-23
在浏览导航栏添加所需按钮 <!...<...link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css" /> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-boot
JAVAEE之多线程进阶（2）_ CAS概念、实现原理、ABA问题及解决方案
2301_80653026的博客
05-29 1623
CAS全称Compare and swap，字面意思:”比较并交换“，它是一条 CPU 并发原语，用于判断内存中某个值是否为预期值，如果是则更改为新的值，这个过程是原子的。全称 Compare and swap, 即 “比较并交换”. 相当于通过一个原子的操作, 同时完成 “读取内存, 比较是否相等, 修改内存” 这三个步骤. 本质上需要 CPU 指令的支撑。
java环境部署
JiuMeilove的博客
06-04 388
如果你电脑已经下载了 jdk ，那你可以跳过这一步了我这里下载的是java21 你们可以选择自己需要下载的游览进去的页面是这样子的（相比以前这个页面发生很大变化了），可以看见目前 jdk 已经发行到 17 了，jdk 它又分了三个个操作系统，一个是 Linux、一个是 macOS、以及 windows，如果你是在 windows 操作系统上，那当然就下载 windows 对应的 jdk，其次的话就是还会区分你操作系统的处理器是 32 位的还是 64 位的，可以点击 我的电脑 - 属性 查看。
java中Overload和Override的区别
codedadi的博客
06-04 569
当调用Dog对象的makeSound方法时，将执行Dog类中的方法，而不是Animal类中的方法。定义：在子类中，有一个与父类同名、同参数列表、同返回类型（或协变返回类型）的方法，则称子类中的该方法为父类同名方法的重写。子类方法的访问权限不能低于父类方法的访问权限（如父类方法为public，则子类方法也必须是public）。Override（重写）：子类与父类之间，方法名、参数列表和返回类型（或协变返回类型）相同。定义：在同一个类中，方法名相同但参数列表（参数类型、参数数量或参数顺序）不同的多个方法。
JavaScript第九讲：BOM编程
最新发布
星途码客的博客
06-04 1430
今天星途给大家带来JavaScript倒数第二部分知识：BOM编程，希望对码客们有帮助。
Css进阶练习(实现抽屉网样式布局)
05-26
抽屉网是一种常见的网页布局，可以用 CSS 实现。下面是一个简单的实现方法： HTML 结构： ```html <!-- 网页主体内容 --> <!-- 抽屉内容 --> ``` CSS 样式： ```css .container { display: flex; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值