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

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

news 文章来源：https://blog.csdn.net/m0_73809176/article/details/129264629 2024/11/1 4:25:14

一、移动端基础知识

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

站内信箱系统的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;在经济全球化和信息技术成为发展迅速的今时今日&#xff0c;人们通过电子邮件收发进行信息传递已经成为主流。随着互联网和网络办公的发展&#xff0c;电子邮件正在被广泛应用在人们的日常生活中。跟据调查研究统计&#xff0c;在全…...

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

systemV共享内存

systemV共享内存 共享内存区是最快的IPC形式。共享内存的大小一般是4KB的整数倍&#xff0c;因为系统分配共享内存是以4KB为单位的&#xff08;Page&#xff09;&#xff01;4KB也是划分内存块的基本单位。 之前学的管道&#xff0c;是通过文件系统来实现让不同的进程看到同一…...

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

Python基础之if逻辑判断

在学习if语句之前&#xff0c;我们先学习一种数据类型&#xff0c;布尔类型&#xff08;bool&#xff09;&#xff0c;在if语句中&#xff0c;我们需要通过判断条件是否为真或者假&#xff0c;才进入下面的语句块执行。 一、布尔类型&#xff08;bool&#xff09; 布尔类型&a…...

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

实现pdf文件预览

前言 工作上接到的一个任务&#xff0c;实现pdf的在线预览&#xff0c;其实uniapp中已经有对应的api&#xff1a;uni.openDocument(OBJECT)&#xff08;新开页面打开文档&#xff0c;支持格式&#xff1a;doc, xls, ppt, pdf, docx, xlsx, pptx。&#xff09;**实现了相关功能…...

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

【java】alibaba Fastjson --全解史上最快的JSON解析库

文章目录前序Fastjson 简介Fastjson 的优点速度快使用广泛测试完备使用简单功能完备下载和使用将 Java 对象转换为 JSON 格式JSONField创建 JSON 对象JSON 字符串转换为 Java 对象使用 ContextValueFilter 配置 JSON 转换使用 NameFilter 和 SerializeConfigFastjson 处理日期F…...

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

绝对零基础的C语言科班作业（期末模拟考试）（十道编程题）

编程题&#xff08;共10题&#xff1b; 共100.0分&#xff09;&#xff08;给猛男妙妙屋更一篇模拟考试&#xff09;模拟1&#xff08;输出m到n的素数&#xff09;从键盘输入两个整数[m,n], 输出m和n之间的所有素数。 输入样例&#xff1a;3&#xff0c;20输出样例&#xff1a;…...

编程日记 2023/5/28 12:07:55

按位与为零的三元组[掩码+异或的作用]

掩码异或的作用前言一、按位与为零的三元组二、统计分组1、map统计分组2、异或掩码总结参考资料前言 当a b 0时&#xff0c;我们能够很清楚的知道b是个什么值&#xff0c;b 0 - a -a&#xff0c;如果当a & b 0时&#xff0c;我们能够很清楚的知道b是什么值吗&#xf…...

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

C++基础篇（一）-- 简单入门

C 语言是在优化 C 语言的基础上为支持面向对象的程序设计而研制的一个通用目的的程序设计语言。在后来的持续研究中&#xff0c;C 增加了许多新概念&#xff0c;例如虚函数、重载、继承、标准模板库、异常处理、命名空间等。 C 语言的特点主要表现在两个方面&#xff1a;全面兼…...

编程日记 2023/5/28 12:07:40

前端整理 —— javascript 2

1. generator&#xff08;生成器&#xff09; 详细介绍 generator 介绍 generator 是 ES6 提供的一种异步编程解决方案&#xff0c;在语法上&#xff0c;可以把它理解为一个状态机&#xff0c;内部封装了多种状态。执行generator&#xff0c;会生成返回一个遍历器对象。返回的…...

编程日记 2023/5/28 12:07:29

Spring-注解注入

一、回顾XML注解 bean 配置 创建 bean public class Student { } 配置 xml bean <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSche…...

编程日记 2023/5/28 12:07:21

网站和微信公众号建设/优化设计五年级下册数学答案

数据湖技术圈作者刘凯廷 百草味-信息数据中心负责人 朱齐天 百草味-信息数据中心-数据部负责人1百草味公司及业务简介 百草味是以休闲食品研发、加工、生产、贸易、仓储、物流为主体&#xff0c;集互联网商务经营模式、新零售为一体的全渠道品牌和综合型品牌。百草味以“让…...

编程日记 2024/11/1 1:11:42

wordpress菜单横排/互动营销案例都有哪些

我有一个archlinux设置并通过arch用户存储库安装neo4j(yaourt -S neo4j),我能够很好地运行web控制台(sudo neo4j控制台具有看似正常的输出和完整功能),但是当我尝试启动时服务器(sudo neo4j start),我遇到以下错误信息&#xff1a;/usr/share/neo4j/bin/utils: line 345: [: -l…...

编程日记 2024/11/1 0:28:44

开源网站系统/网站关键词排名分析

作者 | 屠敏出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;日前&#xff0c;TIOBE 编程语言社区最新发布了 2019 年 5 月排行榜。和 4 月榜单相比&#xff0c;5 月编程语言排行榜的 Top 10 位置并没有太大变化。但是在 C 和 Python 激烈的竞争局势下&#xff0c;随…...

编程日记 2024/10/31 23:14:56

科普网站栏目建设方案策划/百度网站排名

在 C 语言标准(C89)没有定义布尔类型&#xff0c;所以 C 语言判断真假时以 0 为假&#xff0c;非 0 为真。 //就是1为ture,0为false int i1; int j0;https://www.runoob.com/note/34742...

编程日记 2024/10/31 22:57:46

个人网站做百度竞价/网络营销的方法包括哪些

文章目录场景复现原因分析解决方法ListMap场景复现 对于list&#xff0c;map都有可能出现&#xff0c;这里主要分析list&#xff01; Testpublic void testList() {List<String> list new ArrayList();list.add("1");list.add("2");list.add("…...

编程日记 2024/10/31 20:33:55

一般上什么网站/中国十大关键词

1、原因&#xff1a;引入了新包&#xff0c;然后不想用了&#xff0c;又删掉了&#xff0c;提交的时候依然提示删掉的包要进行上传&#xff1b; 2、commit 后提示E155010错误&#xff1b; 3、所以重新提交的时候&#xff0c;只需要在文件上面点击右键&#xff0c;点击Revert&…...

编程日记 2024/10/31 18:01:11