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时间复杂度（就是一个函数）的计算，…...
隧道裂缝剥落病害AI识别系统
我国现有公路隧道超2.5万座，总里程超2.8万公里，其中运营超过15年的老旧隧道占比达35%。据交通运输部2025年统计，年均因隧道结构病害导致的交通中断超1200次，直接经济损失超45亿元。传统检测模式暴露四大核心痛点：检测周…...
Agent开发面试通关攻略：吃透稳拿offer
阅读前置：2026年当下最卷也最缺人的AI岗位，一定是AI Agent开发。最近刷遍CSDN、牛客、力扣最新面经，发现一个非常明显的招聘趋势：普通大模型微调岗位饱和内卷，而AI Agent开发岗位人才严重缺口，薪资更高、竞…...
三十岁想从零转行现实吗？带你分辨真正有前景的好工作
我是29岁那年，完成从转行裸辞副业的职业转型。 如果你把职业生涯看成是从现在开始30岁，到你退休那年，中间这么漫长的30年，那么30岁转行完全来得及…...
户外实用｜艾迪欧 R6000 测评 —— 户外 / 自驾 / 露营的通讯好搭档
户外出行，通讯工具的核心是稳定、清晰、耐用、续航久、功能全。艾迪欧 R6000 作为一款兼顾专业与户外的 DMR 对讲机，全频段覆盖、双模通讯、自定义功能、长续航，完美适配自驾、露营、登山、越野等户外场景，是户外爱好者的靠谱通讯…...
告别SVN恐惧症：美术策划也能轻松上手的Unity PlasticSCM极简入门（附团队项目拉取实战）
告别SVN恐惧症：美术策划也能轻松上手的Unity PlasticSCM极简入门（附团队项目拉取实战） 在游戏开发团队中，版本控制系统是协作的基石，但传统工具如SVN往往让非技术成员望而生畏。当美术资源频繁更新、策划案不断迭代时&…...
RevSSH反向SSH隧道：无公网IP设备的安全远程运维方案
1. 这不是又一个SSH封装工具——RevSSH解决的是“根本性连接悖论”你有没有遇到过这样的场景：一台部署在客户内网的嵌入式设备，没有公网IP，NAT穿透失败，防火墙策略死死锁住所有入向端口，连ICMP都被禁了；或者…...
Ubuntu经常安装软件
1、垃圾清理工具stacer sudo apt updatesudo apt install stacer apt cleanapt autocleanapt autoremove 2、类似与everything的工具Fsearcch 1sudo add-apt-repository ppa:christian-boxdoerfer/fsearch-stable 2sudo apt update 3sudo apt install fsearch (注…...
万星easy-vibe：描述需求即发布 零基础无需学语法
开源Easy-Vibe是一套开源AI编程学习方案，把学习顺序从先学语法再做项目翻转为直接做项目。文章拆解了项目驱动、提示词编写、AI编辑器和多Agent协作的完整流程，解释了为什么想法比语法更重要。 github上datawhalechina/easy-vibe：它在GitHub…...
java项目011-ssm 宠物医院系统
java项目011-ssm 宠物医院系统 是一款基于springspringmvcmybatis的宠物系统， 包含界面布局、医生信息管理、客户信息管理、宠物管理、浏览管理、 诊断管理、医生管理、用户管理 其中医生管理、用户管理只能管理员有权限进行操作。 采用spingboot方式启动 运行截图...
 指针的常见操作)
C语言(12) 指针的常见操作
指针的常见操作指针变量，有两方面的意思:一个指针指向的内容(数据值，一级)指针变量本身存储的数据 (地址值)#include <stdio.h>int main() {int a 10;int b 0 ;int c 50;int *p NULL;int *q NULL;p &a; // 对指针变量本身进行修改// 对指…...