使用弹性盒子flex对html进行布局和动态计算视口高度
使用弹性盒子flex对html进行布局的一个练习
height: calc(100vh - 4px); # vh表示视口高度的百分比，所以100vh表示整个视口的高度。
.mytxt {
text-indent: 2em; /* 首航缩进2字符 */
line-height: 2; /* 2倍行高 */
padding: 8px; /* 内容与边框的距离 */
}
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="jquery.min.js"></script><style>body {margin: 0;padding: 0;}/* 在css中设置 row */.content{width: 100%;#height: 700px;height: calc(100vh - 4px);display : flex; /* 弹性盒子布局 */flex-direction: row; /* flex-direction属性决定主轴的方向 *//* justify-content属性定义了项目在主轴上的对齐方式 */justify-content: flex-start;align-content:flex-start; /* align-items属性定义项目在交叉轴(侧轴)上如何对齐 */}.content-item{ border:1px solid red;margin: 10px;}.item1{width:45%;}.item2{width:55%; }.leftrow1 {border:1px solid blue;width:100%;height:30%;}.leftrow2 {border:1px solid blue;width:100%;height:30%;}.leftrow3 {border:1px solid blue;width:100%;height:40%;}.rightrow {border:1px solid green;width:100%;height:50%;}.mytxt { text-indent: 2em; /* 首航缩进2字符 */line-height: 2; /* 2倍行高 */padding: 8px; /* 内容与边框的距离 */}</style></head><body><div class="content" id="app"><!-- left 45% --><div class="content-item item1"><div class="leftrow1"></div><div class="leftrow2"></div><div class="leftrow3 content"><div class="content-item item1"></div> <div class="content-item item2"></div> </div> </div><!-- left 55% --><div class="content-item item2"><div class="rightrow"></div><div class="rightrow content"><div class="content-item item1"></div> <div class="content-item item2"></div> </div></div> </div></body></html>效果如图
相关文章：
使用弹性盒子flex对html进行布局和动态计算视口高度
使用弹性盒子flex对html进行布局的一个练习 height: calc(100vh - 4px); # vh表示视口高度的百分比，所以100vh表示整个视口的高度。 .mytxt { text-indent: 2em; /* 首航缩进2字符 */ line-height: 2; /* 2倍行高 */ padding: 8px; /* 内容与边框的距离 */ } …...
华为云云耀云服务器L实例评测｜华为云耀云服务器L实例评测用例(五)
六、华为云耀云服务器L实例评测用例： “兵马未动，粮草先行”，随着企业业务的快速发展，服务器在数字化建设体系至关重要，为了保证服务器的稳定性、可靠性，需要对服务器进行评测，以确保服务器能够…...
uniapp-vue3微信小程序实现全局分享
uniapp-vue3微信小程序实现全局分享 文章目录 uniapp-vue3微信小程序实现全局分享微信小程序官方文档的分享说明onShareAppMessage(Object object)onShareTimeline() uniapp 官方文档的分享说明onShareAppMessage(OBJECT) 实现全局分享代码结构如下share.js文件内容main.js注意…...
Qt如何实现动态背景-视频背景
前言 需求：加载视频作为视频背景，在上层可以进行图片的动画化，或是进行其他操作。 几种方法： 1、直接将视频弄成一个QDialog， 然后再上层在弄一个QDialog,背景透明即可。但遇到一个问题，QDialog没办法局…...
vue按键全屏和F11全屏共存
以下代码可直接复制 注意此段代码 // let element document.documentElement // 当前页所有元素全屏 let element document.getElementById(‘div1’) //让某个div元素全屏 <template><div><div style"width: 300px;height: 300px;background-color: cya…...
springboot就业信息管理系统springboot32
大家好✌！我是CZ淡陌。一名专注以理论为基础实战为主的技术博主，将再这里为大家分享优质的实战项目，本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目，希望你能有所收获，少走一些弯路…...
深入探讨芯片制程设备：从原理到实践
💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】 在现代科技领域…...
Vuex的简介以及入门案例
🏅我是默，一个在CSDN分享笔记的博主。📚📚 🌟在这里，我要推荐给大家我的专栏《Vue》。🎯🎯 🚀无论你是编程小白，还是有一定基础的程序员，这个专栏…...
上海亚商投顾：沪指探底回升 华为汽车概念股集体大涨
上海亚商投顾前言：无惧大盘涨跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。 一.市场情绪 三大指数昨日探底回升，早盘一度集体跌超1%，随后震荡回暖，深成指、创业板指…...
Android网络监听
1.通过注册BroadCastReceiver进行网络监听。 1) 添加网络权限 <uses-permission android:name"android.permission.INTERNET"/><uses-permission android:name"android.permission.ACCESS_NETWORK_STATE" /> 2）定义BroadCastRe…...
Kubernetes 常用命令 持续更新
1、进入指定namespace pod kubectl exec -it --namespacekube-system g-lsb-proxy-nginx-r7zfl-2522744936-11rld /bin/sh kubectl exec -it g-lsb-proxy-nginx-r7zfl-2522744936-9tz5k -n kube-system /bin/bash2、查看k8s pod详情 kubectl describe pods -n jiankunking …...
达梦数据库常用命令行
导出dmp文件（迁移用） 管理工具在dmdbms下的tool文件夹下 使用tool目录下的manage程序，导出dmp文件 导入dmp文件 切到tool目录下 ./dimp 用户id/密码ip:5236 file"导入的文件路径(包括文件名)" 导入的模式（一般与库名…...
【通信系列 6 -- AT 命令介绍】
文章目录 1. 背景介绍1.2 AT的命令格式1.3 AT指令用法1.3.1 指令执行结果 1.2 CP 常用AT指令1.2.1 CP 模式设置1.2.2 网络相关1.2.3 IP获取1.2.4 Band 设置1.2.5 电话相关1.2.6 SIM卡检测1.2.7 cmwap 和cmnet1.2.8 AT 写 IMEI 1. 背景介绍 AT 命令一般分为三种： C…...
flask捕获@app.errorhandler/@app.after_request全局异常总结
捕获处理全局异常的方法有两种：app.errorhandler、app.after_request1、第一种的使用，需要将flask的debug开关打开才能生效（自动捕获异常），在config里面将DEBUG TRUE就可以（默认是False）。 但是…...
智能晾衣架丨以科技解放双手
以往的晾衣架大多是平放式、手摇式居多，为衣物的晾晒提供了一个“栖身之所。”随着科技的日新月异，智能家居的产品越来越多。晾衣架也不例外，一款带有语音控制升降、同时具备照明和消毒的多功能衣架也已深入生活，正被人们所接受。…...
asp.net饭店订餐管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机设计定制
一、源码特点 asp.net 饭店订餐管理系统 是一套完善的web设计管理系统，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为vs2010，数据库为sqlserver2008，使用c#语 言开发 asp.net饭店订餐系统 二、功能介…...
Pushgateway的场景使用
1，Pushgateway简介 Pushgateway为Prometheus整体监控方案的功能组件之一，并做为一个独立的工具存在。它主要用于Prometheus无法直接拿到监控指标的场景，如监控源位于防火墙之后，Prometheus无法穿透防火墙；目标服务没有可抓取监控数据的端点等多种情况。在类似场景中，可通…...
时间范围配置(昨天,今天,本周,本月,本季度,本年)
ranges:{ ‘昨天’: [ moment(moment().subtract(1, ‘days’).format(‘YYYY-MM-DD 00:00:00’)) ,moment(moment().subtract(1, ‘days’).format(‘YYYY-MM-DD 23:59:59’))], ‘今天’: [ moment(moment().format(‘YYYY-MM-DD 00:00:00’)),moment( moment().format(‘YYY…...
PlantUML 绘图
官网 https://plantuml.com/zh/ 示例 绘制时序图 USB 枚举过程 PlantUML 源码 startuml host <-- device : device insert host note right : step 1 host -> device : get speed, reset, speed check note right : step 2 host -> device …...
spring boot自定义配置时在yml文件输入有提示
自定义一个配置类，然后在yml文件具体配置值时，一般不会有提示，这个解决这个问题 依赖 <!--自定义配置类，在yml文件写的时候会有提示--><dependency><groupId>org.springframework.boot</groupId><arti…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性： 隐藏字段的实现细节 提供对字段的受控访问 访问控制： 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性： 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑： 可以…...
【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 ：主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 ：确保数据的完整性，便于数据的查询和管理。 示例 ：在学生信息表中，学号可以作为主键ÿ…...