当前位置： 首页 > news >正文

HTML、CSS学习笔记5（移动端基础知识、Flex布局）

news 2026/5/27 18:07:15

一、移动端基础知识

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端和移动端区别 移动端&#xff1a;手机版网页&#xff0c;手机屏幕小&#xff0c;网页宽度多数为100%&#xff0c;没有版心 PC端&#xff1a;电脑版网页&#xff0c;屏幕大&#xff0c;网页固定版心 PC端和移动端不是同一个网页 2.如何在电脑里面…...

编程日记 2023/5/28 7:49:55

【Java学习笔记】2.Java 开发环境配置

Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境。 window系统安装java 下载JDK 首先我们需要下载 java 开发工具包 JDK&#xff0c;下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/&#xff0c;在下载页面中根据自己的系统选…...

编程日记 2023/5/28 7:49:46

MyBatis——进阶操作（2）

标签 if标签 当提交的表单中有些为非必填项&#xff0c;用户并没有上传这些属性的值&#xff0c;那么程序可以上传NUll&#xff0c;也可以用if标签判断用户有没有上传这个值 <if test"参数!null">操作 </if>其中test中填写一条语句&#xff0c;如果得…...

编程日记 2023/5/28 7:49:35

循环结构

循环结构循环结构一、课前问答二、while循环三、do-while循环四、for循环五、流程控制5.1 break5.2 continue循环结构 一、课前问答 1、switch支持的数据类型。 2、switch中break的作用。 3、多重if如果多个条件都成立&#xff0c;执行方式。 二、while循环 语法&#xff1a; …...

编程日记 2023/5/28 7:49:25

漫谈数据库表设计及索引设计

一.数据库表设计 在数据库表设计上有个很重要的设计准则&#xff0c;称为范式设计。 什么是范式设计&#xff1f; 范式来自英文Normal Form&#xff0c;简称NF。MySQL是关系型数据库&#xff0c;但是要想设计—个好的关系&#xff0c;必须使关系满足一定的约束条件&#xff0c…...

编程日记 2023/5/28 7:49:15

【JavaWeb】CSS基础知识：引入方式 + 选择器

CSS引入 CSS的引入有三种&#xff0c;三种的优缺点各不相同。 行内样式表 <!-- 行内样式表 --><!-- 相当于标签的一个属性 --><!-- 只对当前标签生效 --><!-- 优先级较高&#xff0c;会覆盖其他样式 --><p style"color: blue;">这是…...

编程日记 2023/5/28 7:49:04

02-前端-javaScript

文章目录JavaScript1&#xff0c;JavaScript简介2&#xff0c;JavaScript引入方式2.1 内部脚本2.2 外部脚本3&#xff0c;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 …...

编程日记 2023/5/28 7:48:53

对链表学习的总结一

一，单链表结构定义 C/C++ 数组：一组具有相同类型数据的集合。结构体：不同类型数据的集合。 // Definition for singly-linked list. struct ListNode {int val;ListNode *next;ListNode(int x) : val(x), next...

编程日记 2023/5/28 7:48:42

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.…...

编程日记 2023/5/28 7:48:29

Linux--多线程（3）

目录1. POSIX信号量1.1 概念2. 基于环形队列的生产消费者模型2.1 环形队列的基本原理2.2 基本实现思想3. 多生产多消费1. POSIX信号量 1.1 概念 信号量本质是一个计数器&#xff0c;申请了信号量以后&#xff0c;可以达到预定临界资源的效果。 POSIX信号量和SystemV信号量相同…...

编程日记 2023/5/28 7:48:16

【spring】事务

概述 1、什么事务 事务是数据库操作最基本单元&#xff0c;逻辑上一组操作&#xff0c;要么都成功&#xff0c;如果有一个失败所有操 作都失败 2、事务四个特性&#xff08;ACID&#xff09; &#xff08;1&#xff09;原子性 &#xff08;2&#xff09;一致性 &#xff08;3…...

编程日记 2023/5/28 7:48:00

博通仍然是美股市场最好的芯片半导体股

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 博通(AVGO)是一家快速增长的半导体公司&#xff0c;并且有很高的股息分红&#xff0c;目前其股息收益率已经高出了平均水平3.2%&#xff0c;而且估值非常合理&#xff0c;仅为预期净利润的14倍。 虽然博通也受到了经济衰退影…...

编程日记 2023/5/28 12:09:32

java开发手册之异常日志

文章目录异常日志异常处理日志规约异常日志 异常处理 1.Java 类库中定义的一类 RuntimeException可以通过预先检查进行规避&#xff0c;而不应该通过 catch 来处理 比如&#xff1a;IndexOutOfBoundsException&#xff0c;NullPointerException 等等。 说明&#xff1a;无法通…...

编程日记 2023/5/28 12:09:28

P6专题：关于P6 EPPM和PPM的区别及选型

目录 引言 什么是 Primavera P6 项目管理&#xff1f; Primavera P6 PPM 关键点 Primavera P6 PPM 是独立工具还是企业工具&#xff1f; 什么是 Primavera P6 企业项目组合管理&#xff1f; 那么EPPM的windows-tool呢&#xff1f; P6 EPPM 适合谁&#xff1f; 更多对比…...

编程日记 2023/5/28 12:09:23

亿万级海量数据去重软方法

文章目录原理案例一需求&#xff1a;方法案例二需求&#xff1a;方法&#xff1a;参考原理 在大数据分布式计算框架生态下&#xff0c;提升计算效率的方法是尽可能的把计算分布式话、并行化&#xff0c;避免单节点计算过载&#xff0c;把计算分摊到各个节点。这样解释小白能够…...

编程日记 2023/5/28 12:09:17

记录--手摸手带你撸一个拖拽效果

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 最近看见一个拖拽效果的视频(抖音&#xff1a;艾恩小灰灰)&#xff0c;看好多人评论说跟着敲也没效果&#xff0c;还有就是作者也不回复大家提出的一些疑问&#xff0c;本着知其然必要知其所以然…...

编程日记 2023/5/28 12:09:10

python高德地图+58租房网站平台源码

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;python地图 免费获取完整源码源文件说明文档配置教程等 在PyCharm中运行《高德地图58租房》即可进入如图1所示的高德地图网页。 具体的操作步骤如下&#xff1a; &#xff08;1&#xff09;打开地图网页后&#xff0c;在编…...

编程日记 2023/5/28 12:09:02

ubuntu 将jupyter-lab保存为桌面快捷方式和favourites

ubuntu: 将jupyter-lab保存为桌面快捷方式和favourites desktop shortcut 建立一个新的desktop文件 cd ~/Desktop touch Jupyter-lab.desktop将文件修改成如下&#xff1a; [Desktop Entry] Version1.0 NameJupyterlab CommentBack up your data with one click Exec/home/cjb/…...

编程日记 2023/5/28 12:08:57

Java 类和对象简介

类是对象的抽象&#xff0c;是一组具有相同特性&#xff08;属性&#xff0c;事物的状态信息&#xff09;和行为&#xff08;事物能做什么&#xff09;的事物的集合&#xff0c;可以看做一类事物的模板。 对象是类的实例化&#xff0c;是具体的事物。 比如&#xff1a;人类和…...

编程日记 2023/5/28 12:08:48

时间复杂度的计算

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【数据结构初阶&#xff08;C实现&#xff09;】 文章目录123456789时间复杂度&#xff08;就是一个函数&#xff09;的计算&#xff0c;…...

编程日记 2023/5/28 12:08:43

Allegro等长设置翻车实录：拓扑模板法的3个坑与手工PinPair的救赎

Allegro等长设计避坑指南&#xff1a;从拓扑模板到精准PinPair的实战演进在高速PCB设计中&#xff0c;等长匹配如同精密钟表里的齿轮啮合&#xff0c;差之毫厘便可能导致整个系统时序崩塌。当设计从简单的点对点结构升级到多负载复杂拓扑时&#xff0c;Allegro用户常陷入两种典…...

编程新知 2026/5/26 3:32:09

Goframe项目实战：从数据库表到API接口的全链路开发指南（含避坑点）

Goframe项目实战&#xff1a;从数据库表到API接口的全链路开发指南&#xff08;含避坑点&#xff09;在当今微服务架构盛行的时代&#xff0c;Go语言因其高性能和并发优势成为后端开发的热门选择。而Goframe作为一款企业级的Go应用开发框架&#xff0c;提供了从数据库操作到API…...

编程新知 2026/5/26 3:24:07

百考通智能任务书：贴合你的选题，拒绝空话假大空

毕业设计任务书是高校教学管理中的关键环节&#xff0c;它不仅标志着研究工作的正式启动&#xff0c;更是后续开题、实施、论文撰写和答辩全过程的行动依据。然而&#xff0c;许多学生在撰写时常常因不熟悉本专业写作规范、技术表达能力有限&#xff0c;或缺乏权威模板参考而陷…...

编程新知 2026/5/26 2:59:49

为内部知识库问答机器人接入Taotoken多模型增强回答效果

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为内部知识库问答机器人接入Taotoken多模型增强回答效果 构建一个高效的企业内部知识库问答机器人&#xff0c;核心挑战在于如何让…...

编程新知 2026/5/26 0:32:21

智能体所有权与版权：AI Agent Harness Engineering 创造的作品归谁所有？

1. 标题选项 《AI Agent创作版权迷局破解：从Harness工程原理到所有权划分的完整指南》 《智能体作品归谁？AI Agent Harness Engineering场景下的版权规则深度拆解》 《告别权属纠纷：一文搞懂AI Agent生成内容的所有权、版权与收益分配规则》 《Harness工程视角下的AI创作权：…...

编程新知 2026/5/26 0:18:08

文件-语言-系统：基础IO-2.0——IO重定向接口，语言层缓冲区，系统级缓冲区。内核级分析！

bit::Shadow✧(≖ ◡ ≖✿ 目录 重定向接口dup2() ">" ">>" "<" 函数原型 输出重定向1和2的使用 文件描述符表 ./a.out运行&#xff1a; "./a.out >"默认重定向是fd 1 合并标准输入输出 缓冲区 什么是缓冲…...

编程新知 2026/5/26 0:03:57

Spring Security OAuth2 /oauth/token 401原因与Content-Type规范

1. 问题现场还原&#xff1a;一个看似简单却让开发停摆两小时的/oauth/token请求刚接手一个老项目做安全加固&#xff0c;第一件事就是验证OAuth2密码模式的token获取流程。我照着文档写了一条curl命令&#xff1a;curl -X POST http://localhost:8080/oauth/token回车执行&…...

编程新知 2026/5/25 22:38:33

HiveWE终极指南：快速掌握魔兽争霸III现代化地图编辑器

HiveWE终极指南&#xff1a;快速掌握魔兽争霸III现代化地图编辑器 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 还在为传统魔兽争霸III地图编辑器缓慢的加载速度和复杂的操作界面而烦恼吗&#xff1f;Hiv…...

编程新知 2026/5/25 20:28:07

接口测试用例设计：超详细防御体系与分层校验实践

1. 为什么“超详细”三个字在接口测试用例里不是修饰词&#xff0c;而是生死线我带过三支不同行业的测试团队——金融支付、SaaS中台、IoT设备管理平台。每次新人入职第一周&#xff0c;我都会收走他们写的前5条接口测试用例&#xff0c;逐行标红批注。不是因为格式不对&#x…...

编程新知 2026/5/25 19:11:38

基于PGA2311的树莓派Hi-Fi模拟音量控制器设计与实现

1. 项目概述&#xff1a;为树莓派DAC打造的高品质模拟音量控制器玩过树莓派音频播放器的朋友都知道&#xff0c;用上像PCM1794A这类高性能DAC芯片后&#xff0c;音质确实能上一个台阶&#xff0c;但有个不大不小的麻烦&#xff1a;这类芯片本身不带音量控制。软件调音量&#x…...

编程新知 2026/5/25 18:32:47