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

响应式布局(3种) + flex计算

响应式布局

  • 1.媒体查询
  • 2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等
    • 1.rem与em
    • 2.vw、vh、vmax、vmin
  • 3.Flexbox
    • flexbox计算题

响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。

1.媒体查询

媒体查询是最基础的实现响应式的方式
使用@media关键字
媒体查询是阶梯性的,不连续,没有完全响应

2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等

1.rem与em

rem(root em) 是相对于根元素(通常是 标签)的字体大小。适用于全局缩放和响应式布局.
em 是相对于父元素的字体大小。具有继承性,适用于局部尺寸的调整。

2.vw、vh、vmax、vmin

先来了解下网页视口相关:

屏幕的宽度和高度:window.screenWidth、window.screenHeight
网页视口的宽度和高度:window.innerWidth 、 window.innerHeight
body的宽度和高度:document.body.clientWidth、document.body.clientHeight

在这里插入图片描述

  1. 网页视口的高度=100vh
  2. 网页视口的宽度=100vw
  3. vmax 取vh和vw两者的最大值
  4. vmin 取vh和vw两者的最小值 所以1vh是网页视高度的百分之一,1vw是网页视口宽度的百分之一

3.Flexbox

主轴(Main Axis)、交叉轴(Cross Axis)、Flex容器(Flex Container):包含Flex项目的容器。、Flex项目(Flex Item)

设置Flex属性:使用Flex属性来控制Flex项目在主轴和交叉轴上的行为。

/* 容器属性 */.container {/* 定义为flex布局 */display: flex; /* 或 inline-flex *//* 主轴的方向 */flex-direction: row; /* 默认值,从左到右。还可以是row-reverse、column或column-reverse *//* 是否换行 */flex-wrap: nowrap; /* 默认值,不换行。还可以是wrap或wrap-reverse:当项目无法放在同一行时,它们会从容器的底部开始并向上堆叠 *//* flex-direction 和 flex-wrap 的简写 */flex-flow: row nowrap; /* 主轴上的对齐方式 */justify-content: flex-start; /* 默认值,左对齐。还可以是flex-end(右对齐)、center(中心对齐)、space-between(平分空间,左右顶边)、space-around(两侧空间是中间一半)或space-evenly(两侧空间等于中间) *//* 交叉轴上的对齐方式 */align-items: stretch; /* 默认值,项目被拉伸以适应容器的交叉轴宽度。还可以是flex-start、flex-end(从交叉轴底部排列)、center(交叉轴中间排列)或baseline *//* 多行的交叉轴上的对齐方式 */align-content: stretch; /* 默认值,行之间拉伸。也可为flex-start、flex-end、center、space-between或space-around */}
/* 项目属性 */.item {/* 排列顺序 */order: 0; /* 默认值。可以是任何整数 *//* 放大比例 */flex-grow: 0; /* 默认值。定义在分配多余空间时,项目的放大比例 *//* 缩小比例 */flex-shrink: 1; /* 默认值。定义在减少空间时,项目的缩小比例 *//* 初始大小 */flex-basis: auto; /* 默认值。初始大小 *//* 上述三个属性的简写 */flex: 0 1 auto; /* 使用flex-grow, flex-shrink 和 flex-basis的默认值 */flex: 1 1 0%; /* flex:1缩写 让所有Item平均分配剩余空间*//* 单个项目的对齐方式 */align-self: auto; /* 默认值,与继承容器的align-items值。还可以是flex-start、flex-end、center、baseline或stretch。控制交叉轴单独布局,没有与之对应的单独控制主轴的布局,除非换grid方法或加margin */
}

flexbox计算题

问题1:
你有四个项目,宽度分别为100px、150px、200px和250px,其flex-shrink值分别为2、1、3和0。
如果需要在这四个项目之间减少总共300px的空间,每个项目会减少多少像素?
解:
项目1的缩小比例为 2/6 = 1/3
项目2的缩小比例为 1/6
项目3的缩小比例为 3/6 = 1/2
项目4不会缩小,因为它的flex-shrink值为0。

项目1会减少:300px * 1/3 = 100px
项目2会减少:300px * 1/6 = 50px
项目3会减少:300px * 1/2 = 150px
项目4不会缩小。

最后宽度加上flex-basis

相关文章:

响应式布局(3种) + flex计算

响应式布局 1.媒体查询2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等1.rem与em2.vw、vh、vmax、vmin 3.Flexboxflexbox计算题 响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。 1.媒体查询 媒体查询是最基础的实现响应式的方式 使用media关键…...

Pytorch从零开始实战01

Pytorch从零开始实战——MNIST手写数字识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——MNIST手写数字识别环境准备数据集模型选择模型训练可视化展示 环境准备 本系列基于Jupyter notebook,使用Python3.7.12,Py…...

inappropriate address 127.0.0.1 for the fudge command, line ignored 时间同步的时候报错

1、安装ntp服务后,启动ntpd正常,但是在查看ntpd服务状态时,有一个红色的报错,报错信息如下: inappropriate address 127.0.0.1 for the fudge command, line ignored 2、解决方法:编辑ntp配置文件&#xf…...

linux并发服务器 —— 项目实战(九)

阻塞/非阻塞、同步/异步 数据就绪 - 根据系统IO操作的就绪状态 阻塞 - 调用IO方法的线程进入阻塞状态(挂起) 非阻塞 - 不会改变线程的状态,通过返回值判断 数据读写 - 根据应用程序和内核的交互方式 同步 - 数据的读写需要应用层去读写 …...

生信教程|替代模型选择

摘要 由于教程时间比较久远,因此不建议实操,仅阅读以了解学习。 在运行基于可能性的系统发育分析之前,用户需要决定模型中应包含哪些自由参数:是否应该为所有替换假设单一速率(如序列进化的 Jukes-Cantor 模型&#xf…...

redis持久化、主从和哨兵架构

一、redis持久化 1、RDB快照(snapshot) redis配置RDB存储模式,修改redis.conf文件如下配置: # 在300s内有100个或者以上的key被修改就会把redis中的数据持久化到dump.rdb文件中 # save 300 100# 配置数据存放目录(现…...

Python 连接 Oracle 详解

文章目录 1 首先,安装第三方库 cx_Oracle2 其次,配置命令 1 首先,安装第三方库 cx_Oracle 参考 CSDN 博客:Python 安装第三方库详解(含离线) 2 其次,配置命令 import cx_Oracle# 1.数据库连接…...

认识模块化

1. 模块化的基本概念 1.1 什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组 合、分解和更换的单元。 1. 现实生活中的模块化 2.编程领域中的模块化 编程领域中的模块化,…...

2023年及以后语言、视觉和生成模型的发展和展望

一、简述 在过去的十年里,研究人员都在追求类似的愿景——帮助人们更好地了解周围的世界,并帮助人们更好地了解周围的世界。把事情做完。我们希望建造功能更强大的机器,与人们合作完成各种各样的任务。各种任务。复杂的信息搜寻任务。创造性任务,例如创作音乐、绘制新图片或…...

OpenLdap +PhpLdapAdmin + Grafana docker-compose部署安装

目录 一、OpenLdap介绍 二、PhpLdapAdmin介绍 三、使用docker-compose进行安装 1. docker-compose.yml 2. grafana配置文件 3. provisioning 四、安装openldap、phpldapadmin、grafana 五、配置OpenLDAP 1. 登陆PhpLdapAdmin web管理 2. 需要注意的细节 内容介绍参考…...

Java | 排序内容大总结

不爱生姜不吃醋⭐️ 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始,不如现在行动! 文章目录 🌴前言🌴算法整理🌴两个结论🌴总结 🌴前言 本文内容是关于选择排序、冒泡排序、插入排序…...

Go 语言入门指南:基础语法和常用特性解析

什么是Go语言? Go语言是Google开发的一种静态强类型、编译型、并发型,并具有垃圾回收功能的编程语言。它用批判吸收的眼光,融合C语言、Java等众家之长,将简洁、高效演绎得淋漓尽致。 Go语言语法与C相近,但功能上有&a…...

20.添加HTTP模块

添加一个简单的静态HTTP。 这里默认读者是熟悉http协议的。 来看看http请求Request的例子 客户端发送一个HTTP请求到服务器的请求消息,其包括:请求行、请求头部、空行、请求数据。 HTTP之响应消息Response 服务器接收并处理客户端发过来的请求后会返…...

Qemu 架构 硬件模拟器

Qemu 架构 硬件模拟器 Qemu 是纯软件实现的虚拟化模拟器, 几乎可以模拟任何硬件设备, 我们最熟悉的就是能够模拟一台能够独立运行操作系统的虚拟机, 虚拟机认为自己和硬件打交道, 但其实是和 Qemu 模拟出来的硬件打交道&#xff…...

通过starrocks jdbc外表查询sqlserver

1.sqlserver环境准备,使用docker环境,可以参考使用flink sqlserver cdc 同步数据到StarRocks_gongxiucheng的博客-CSDN博客 部署获得sqlserver环境; 2.获取starrocks环境,也可以通过docker部署,参考:使用…...

ArcGIS 10.5安装教程!

软件介绍: ArcGIS Desktop 10.5中文特别版是一款功能强大的GSI专业电子地图信息编辑和开发软件,ArcGIS Desktop 包括两种可实现制图和可视化的主要应用程序,即 ArcMap 和 ArcGIS Pro。ArcMap 是用于在 ArcGIS Desktop 中进行制图、编辑、分析…...

ConstraintLayout约束布局

1.进行复杂页面布局时&#xff0c;最外层的根布局不要用ConstraintLayout. 示例布局&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.co…...

通过pyinstaller将python项目打包成exe执行文件

目录 第一步&#xff1a;安装pyinstaller 第二步&#xff1a;获取一个ico图标&#xff08;也即是自己这个exe文件最后的图标&#xff09; 第三步&#xff1a;打包 第一步&#xff1a;安装pyinstaller pip install pyinstaller 第二步&#xff1a;获取一个ico图标&#xff…...

P1068 [NOIP2009 普及组] 分数线划定

题目描述 世博会志愿者的选拔工作正在 A 市如火如荼的进行。为了选拔最合适的人才&#xff0c;A 市对所有报名的选手进行了笔试&#xff0c;笔试分数达到面试分数线的选手方可进入面试。面试分数线根据计划录取人数的 150 % 150\% 150% 划定&#xff0c;即如果计划录取 m m …...

应用在汽车新风系统中消毒杀菌的UVC灯珠

在病毒、细菌的传播可以说是一个让人敏感而恐惧的事情。而对于车内较小的空间&#xff0c;乘坐人员流动性大&#xff0c;更容易残留细菌病毒。车内缺少通风&#xff0c;残留的污垢垃圾也会滋生细菌&#xff0c;加快细菌的繁殖。所以对于车内消毒就自然不容忽视。 那么问题又来…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...