HTML、CSS学习笔记5（移动端基础知识、Flex布局）
一、移动端基础知识
1.PC端和移动端区别
移动端：手机版网页，手机屏幕小，网页宽度多数为100%，没有版心
PC端：电脑版网页，屏幕大，网页固定版心
PC端和移动端不是同一个网页
2.如何在电脑里面边写代码边调试移动端网页效果
使用谷歌浏览器（查看源代码，使用谷歌模拟器）
3.分辨率
1）屏幕尺寸：指的是屏幕对角线的长度，一般使用英寸来度量
2）PC分辨率：（越高越好）
1920 * 1080 （横着能显示1920个像素点，竖着能显示1080个像素点）
1366 * 768
3） 缩放150%（放大150%则横着能显示的像素点变少了）
公式：（1920 / 150% ）*（1080 / 150%）
4）分辨率分类
物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的
写代码时尽量使用逻辑分辨率
4.视口（移动端）
视口标签的作用：实现网页的宽度跟（如手机）设备宽度一样
注：PC端视口不用考虑，跟逻辑分辨率一致，默认100%（移动端默认980）
不用记，HTML中有
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口标签 viewport即视口--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>5.二倍图（即比例关系2:1，750像素的图）
移动端一般参考iPhone6/7/8这款手机出设计稿来写代码
设计师给的搞像素是750（而不是375）（即写代码以750像素来写）（原因：让图片更加清晰）
图片分辨率，为了高分辨率下图片不会模糊失真
做网站开发以二倍图居多
将设计稿放到Pxcook（像素大厨）里面，点击“ <>开发 ”模式，
-->设计图（1x / 2x）--> 2x模式即375px（书写代码时注意要转换为2x模式来测量宽度 ，因为要基于逻辑分辨率375）
6.百分比布局（流式布局）
效果：宽度自适应，高度固定
（D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.3.1素材(8)\素材）
二、Flex布局/弹性布局
D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.3.2素材(9)\素材
1.flex简介
网站：https://caniuse.com/用来查询哪些浏览器是否兼容某个标签、。。。
2.flex组成
注：
1.父元素：（上一级，亲爹）
2.弹性容器：父元素（亲爹）即弹性盒子
3.默认主轴在水平，侧轴在垂直方向
3.Flex--主轴对齐方式：justify-content
注：
- space-around:视觉效果：子级之间的距离是父级两头距离的2倍
- space-between：间距在弹性盒子（子级）之间
- space-evenly：所有地方的间距都相等
4.Flex--侧轴对齐方式：
align-items（添加到父级上）
align-self（添加到子级上）
- align-items: center；
- align-items: stretch; 拉伸，默认值，测试时去掉子级高度
如果将子级高度注释掉，弹性盒子沿着主轴线拉满整个盒子
- align-self: center;
5.弹性盒子尺寸特点
单独设置某个弹性盒子（子级）的对齐方式，若弹性盒子（子级）没有给宽度or高度，则按内容的高度来定
6.flex--伸缩比
属性： flex：值；
取值分类： 数值（整数）
注意：只占用父盒子剩余尺寸的份数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;height: 300px;border: 1px solid #000;}.box div {height: 200px;margin: 0 20px;background-color: pink;}.box div:nth-child(1) {width: 50px;}.box div:nth-child(2) {flex: 3;}.box div:nth-child(3) {flex: 1;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>
上述编码，除去1盒子所占尺寸（宽度），父级的剩下尺寸2盒子占3份，3盒子占1份
相关文章：
HTML、CSS学习笔记5（移动端基础知识、Flex布局）
一、移动端基础知识 1.PC端和移动端区别 移动端：手机版网页，手机屏幕小，网页宽度多数为100%，没有版心 PC端：电脑版网页，屏幕大，网页固定版心 PC端和移动端不是同一个网页 2.如何在电脑里面…...
【Java学习笔记】2.Java 开发环境配置
Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境。 window系统安装java 下载JDK 首先我们需要下载 java 开发工具包 JDK，下载地址：https://www.oracle.com/java/technologies/downloads/，在下载页面中根据自己的系统选…...
MyBatis——进阶操作（2）
标签 if标签 当提交的表单中有些为非必填项，用户并没有上传这些属性的值，那么程序可以上传NUll，也可以用if标签判断用户有没有上传这个值 <if test"参数!null">操作 </if>其中test中填写一条语句，如果得…...
循环结构
循环结构循环结构一、课前问答二、while循环三、do-while循环四、for循环五、流程控制5.1 break5.2 continue循环结构 一、课前问答 1、switch支持的数据类型。 2、switch中break的作用。 3、多重if如果多个条件都成立，执行方式。 二、while循环 语法： …...
漫谈数据库表设计及索引设计
一.数据库表设计 在数据库表设计上有个很重要的设计准则，称为范式设计。 什么是范式设计？ 范式来自英文Normal Form，简称NF。MySQL是关系型数据库，但是要想设计—个好的关系，必须使关系满足一定的约束条件，…...
【JavaWeb】CSS基础知识：引入方式 + 选择器
CSS引入 CSS的引入有三种，三种的优缺点各不相同。 行内样式表 <!-- 行内样式表 --><!-- 相当于标签的一个属性 --><!-- 只对当前标签生效 --><!-- 优先级较高，会覆盖其他样式 --><p style"color: blue;">这是…...
02-前端-javaScript
文章目录JavaScript1，JavaScript简介2，JavaScript引入方式2.1 内部脚本2.2 外部脚本3，JavaScript基础语法3.1 书写语法3.2 输出语句3.3 变量3.3.1 全局变量var3.3.2 局部变量let3.3.3 常量const3.4 数据类型3.5 运算符3.5.1 \和区别 ▲3.5.2 …...
对链表学习的总结一
一，单链表结构定义 C/C++ 数组：一组具有相同类型数据的集合。结构体：不同类型数据的集合。 // Definition for singly-linked list. struct ListNode {int val;ListNode *next;ListNode(int x) : val(x), next...
还有个高级用法好用)
toSring()还有个高级用法好用
Object.prototype.toString()能够很好的判断数据的类型及内置对象 typeof xxx：能判断出number，string，undefined，boolean，object，function（null是object）Object.prototype.toString.call(xxx)：能判断出大部分类型Array.isArray(xxx)：判断是否为数组var test= Object.…...
Linux--多线程（3）
目录1. POSIX信号量1.1 概念2. 基于环形队列的生产消费者模型2.1 环形队列的基本原理2.2 基本实现思想3. 多生产多消费1. POSIX信号量 1.1 概念 信号量本质是一个计数器，申请了信号量以后，可以达到预定临界资源的效果。 POSIX信号量和SystemV信号量相同…...
【spring】事务
概述 1、什么事务 事务是数据库操作最基本单元，逻辑上一组操作，要么都成功，如果有一个失败所有操 作都失败 2、事务四个特性（ACID） （1）原子性 （2）一致性 （3…...
博通仍然是美股市场最好的芯片半导体股
来源：猛兽财经 作者：猛兽财经 博通(AVGO)是一家快速增长的半导体公司，并且有很高的股息分红，目前其股息收益率已经高出了平均水平3.2%，而且估值非常合理，仅为预期净利润的14倍。 虽然博通也受到了经济衰退影…...
java开发手册之异常日志
文章目录异常日志异常处理日志规约异常日志 异常处理 1.Java 类库中定义的一类 RuntimeException可以通过预先检查进行规避，而不应该通过 catch 来处理 比如：IndexOutOfBoundsException，NullPointerException 等等。 说明：无法通…...
P6专题：关于P6 EPPM和PPM的区别及选型
目录 引言 什么是 Primavera P6 项目管理？ Primavera P6 PPM 关键点 Primavera P6 PPM 是独立工具还是企业工具？ 什么是 Primavera P6 企业项目组合管理？ 那么EPPM的windows-tool呢？ P6 EPPM 适合谁？ 更多对比…...
亿万级海量数据去重软方法
文章目录原理案例一需求：方法案例二需求：方法：参考原理 在大数据分布式计算框架生态下，提升计算效率的方法是尽可能的把计算分布式话、并行化，避免单节点计算过载，把计算分摊到各个节点。这样解释小白能够…...
记录--手摸手带你撸一个拖拽效果
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 最近看见一个拖拽效果的视频(抖音：艾恩小灰灰)，看好多人评论说跟着敲也没效果，还有就是作者也不回复大家提出的一些疑问，本着知其然必要知其所以然…...
python高德地图+58租房网站平台源码
wx供重浩：创享日记 对话框发送：python地图 免费获取完整源码源文件说明文档配置教程等 在PyCharm中运行《高德地图58租房》即可进入如图1所示的高德地图网页。 具体的操作步骤如下： （1）打开地图网页后，在编…...
ubuntu 将jupyter-lab保存为桌面快捷方式和favourites
ubuntu: 将jupyter-lab保存为桌面快捷方式和favourites desktop shortcut 建立一个新的desktop文件 cd ~/Desktop touch Jupyter-lab.desktop将文件修改成如下： [Desktop Entry] Version1.0 NameJupyterlab CommentBack up your data with one click Exec/home/cjb/…...
Java 类和对象简介
类是对象的抽象，是一组具有相同特性（属性，事物的状态信息）和行为（事物能做什么）的事物的集合，可以看做一类事物的模板。 对象是类的实例化，是具体的事物。 比如：人类和…...
时间复杂度的计算
个人主页：平行线也会相交 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 平行线也会相交 原创 收录于专栏【数据结构初阶（C实现）】 文章目录123456789时间复杂度（就是一个函数）的计算，…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）
CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...
MySQL的pymysql操作
本章是MySQL的最后一章，MySQL到此完结，下一站Hadoop！！！ 这章很简单，完整代码在最后，详细讲解之前python课程里面也有，感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统
Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...