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

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

news 2026/2/8 22:21:18

一、移动端基础知识

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2026/1/30 2:33:11

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2026/2/8 1:53:31

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/12/1 3:15:17

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

编程新知 2025/10/8 8:04:56

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2026/1/23 1:08:01

分布式计算框架学习笔记

一、&#x1f310; 为什么需要分布式计算框架&#xff1f; 资源受限&#xff1a;单台机器 CPU/GPU 内存有限。 任务复杂&#xff1a;模型训练、数据处理、仿真并发等任务耗时严重。 并行优化&#xff1a;通过任务拆分和并行执行提升效率。 可扩展部署&#xff1a;适配从本地…...

编程新知 2025/9/7 5:28:35