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

前端理论总结(css3)——页面布局方法

瀑布流

            优点:节省空间,外表美观,更有艺术性
                      对于触屏设备非常友好,通过向上滑动浏览
                      用户浏览时的观赏和思维不容易被打断,留存更容易
            缺点:用户无法了解内容总长度,对内容没有宏观掌控
                      用户无法了解现在所处的具体位置,不知道离终点还有多远
                      回溯时不容易定位到之前看到的内容
                      容易造成页面加载的负荷
                      容易造成用户浏览的疲劳,没有短暂的休息时间

盒模型

             在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border

弹性布局


             优点:应用恰当的弹性布局对用户十分友好。页面中所有的元素可以随着用户的偏好缩放
对于同时喜欢流动布局和固定宽度布局的设计师来说,弹性布局是完美的,因为在弹性布局中都能找到
             缺点:正式因为第一个优点,这种布局会产生很大额可用性问题。需要花更多时间理解和测试,让布局适应所有用户
             这种布局类型相对于其他两个(流动和固定宽度)更难设计

圣杯布局

        中间列为主内容区域,左右两列为侧边栏(父级div给 padding-left 和 padding-right 限制,让字不会被左边和右边挡住)

优点:优先展示center内容
缺点:center的最小宽度不能小于left的宽度,否则left会掉到下一行
           如果其中一列的内容高度比较长,其他两列的背景并不会自动填充

双飞翼

        中间列为主内容区域,左右两列为侧边栏(给中间的div添加一个小div,这个小div使用外边距)

优点:优先展示center内容
 缺点:center的最小宽度不能小于left的宽度,否则left会掉到下一行
            如果其中一列的内容高度比较长,其他两列的背景并不会自动填充

相关文章:

前端理论总结(css3)——页面布局方法

瀑布流 优点:节省空间,外表美观,更有艺术性 对于触屏设备非常友好,通过向上滑动浏览 用户浏览时的观赏和思维不容易被打断,留存更容易 缺点:用户…...

06|Java集合框架初学者指南:List、Set与Map的实战训练

Java集合框架是Java语言的核心部分,它提供了丰富的类和接口,用来高效地管理和操作大量数据。这个强大的工具箱包括多种集合类型,其中最为常用的是List、Set和Map。 1.List - 有序且可重复的数据清单 概念: List就像一个购物清单,你可以按照加入顺序存放和检索项目,而且同…...

Jmeter基础篇(18)压测过程中的注意事项

一、测试计划设计: 1、场景设计:需要基于实际业务需求设计合理的并发用户模型、事务和思考时间,模拟真实用户的操作行为。 2、目标明确:定义明确的性能指标(如响应时间、吞吐量、并发用户数、错误率等)和性…...

‘npm‘ 不是内部或外部命令,也不是可运行的程序

npm认识三年了,今天才知道这是node.js的命令 也就是说,想要在cmd里面运行 npm 命令,但就的安装node.js 1. node.js安装 没有安装包的先下载安装包:下载 | Node.js 中文网 (nodejs.cn) 下载之后双击打开,一路安装确…...

使el-table通过操控鼠标滚轮横向滚动

1.创建directive文件夹&#xff0c;里面创建directive.js文件 import Vue from vue;Vue.directive(scroll-x,{inserted:function(el){let domClass el.getAttribute(class)if(domClass.indexOf(el-table)<0){return false}const scrollDiv el;if(scrollDivnull){return fa…...

神经网络深度学习梯度下降算法优化

【神经网络与深度学习】以最通俗易懂的角度解读[梯度下降法及其优化算法]&#xff0c;这一篇就足够&#xff08;很全很详细&#xff09;_梯度下降在神经网络中的作用及概念-CSDN博客 https://blog.51cto.com/u_15162069/2761936 梯度下降数学原理...

向开发板上移植ip工具:将ip工具移植到开发板系统中

一. 简介 前面一篇文章对 ip工具源码进行了交叉编译&#xff0c;生成了ip工具。文章如下&#xff1a; 向开发板上移植ip工具&#xff1a;交叉编译 ip工具-CSDN博客 本文对生成的 ip工具进行移植&#xff0c;即移植到开发板系统中&#xff0c;并确定是否可用。 二. 向开发板…...

数据关联_3.7

目标 利用匈牙利算法对目标框和检测框进行关联 在这里我们对检测框和跟踪框进行匹配&#xff0c;整个流程是遍历检测框和跟踪框&#xff0c;并进行匹配&#xff0c;匹配成功的将其保留&#xff0c;未成功的将其删除。 def associate_detections_to_trackers(detections, track…...

总结虚函数表机制——c++多态底层原理

前言&#xff1a; 前几天学了多态。 然后过去几天一直在测试多态的底层与机制。今天将多态的机制以及它的本质分享给受多态性质困扰的友友们。 本节内容只涉及多态的原理&#xff0c; 也就是那张虚表的规则&#xff0c;有点偏向底层。 本节不谈语法&#xff01;不谈语法&#x…...

Contos7 安装 Maven

Contos7 安装 Maven 前言 ​ Maven是一个用于构建和管理Java项目的强大工具。它提供了一种简单且一致的方式来构建、测试和部署项目&#xff0c;同时管理项目依赖关系。Maven基于项目对象模型&#xff08;Project Object Model&#xff0c;POM&#xff09;&#xff0c;使用XML…...

对适配器模式的理解

目录 一、适配器模式是什么&#xff1f;二、示例【[来源](https://refactoringguru.cn/design-patterns/adapter)】1 第三方依赖 &#xff08;接口A 数据A&#xff09;2 客户端3 方钉转圆钉的适配器&#xff08;数据B&#xff09; 三、适配器&#xff08;xxxAdapter&#xff0…...

纯前端调用本机原生Office实现Web在线编辑Word/Excel/PPT,支持私有化部署

在日常协同办公过程中&#xff0c;一份文件可能需要多次重复修改才能确定&#xff0c;如果你发送给多个人修改后再汇总&#xff0c;这样既效率低又容易出错&#xff0c;这就用到网页版协同办公软件了&#xff0c;不仅方便文件流转还保证不会出错。 但是目前一些在线协同Office…...

双指针的详细教程

双指针算法是一种常用的算法技巧&#xff0c;它通常用于在数组或字符串中进行快速查找、匹配、排序或移动操作。 双指针并非真的用指针实现&#xff0c;一般用两个变量来表示下标&#xff08;在后面都用指针来表示&#xff09; 双指针算法使用两个指针在数据结构上进行迭代&a…...

【Review+预测】测试架构演进的曲折之路

文章目录 前言 一、“原始”阶段 二、“小打小闹”阶段 三、“小米加步枪”阶段 四、“摩托化部队”阶段 五、“骑兵连”阶段 六、“海军陆战队”阶段 七、“社区型组织”阶段 前言 近期公司的测试团队需要重新组织安排&#xff0c;本着谦虚谨慎的态度&#xff0c;我从…...

2015年认证杯SPSSPRO杯数学建模D题(第二阶段)城市公共自行车全过程文档及程序

2015年认证杯SPSSPRO杯数学建模 D题 城市公共自行车 原题再现&#xff1a; 城市交通问题直接影响市民的生活和工作。在地形平坦的城市&#xff0c;公共自行车出行系统是一种很好的辅助手段。一般来说&#xff0c;公共自行车出行系统由数据中心、驻车站点、驻车桩、自行车&…...

视频汇聚平台EasyCVR启用图形验证码之后调用login接口的操作方法

视频综合管理平台EasyCVR视频监控系统支持多协议接入、兼容多类型设备&#xff0c;平台可以将区域内所有部署的监控设备进行统一接入与集中汇聚管理&#xff0c;实现对监控区域的实时高清视频监控、录像与存储、设备管理、云台控制、语音对讲、级联共享等&#xff0c;在监控中心…...

【数据结构】非线性结构——二叉树

文章目录 前言1.树型结构1.1树的概念1.2树的特性1.3树的一些性质1.4树的一些表示形式1.5树的应用2.二叉树 2.1 概念2.2 两种特殊的二叉树2.3 二叉树的性质2.4 二叉树的存储2.5 二叉树的基本操作 前言 前面我们都是学的线性结构的数据结构&#xff0c;接下来我们就需要来学习非…...

数据分析POWER BI之power query

1.导入数据 ctrla全选--数据--获取数据--其他来源--来自表格/区域 导入数据&#xff0c;进入编辑模式 2.整理与清除 清除&#xff1a;删除所选列的非打印字符 转换--格式--清除 修整&#xff1a;删除前面和后面的空格 转换---格式---修整&#xff08;修整后前面后面的空格没有了…...

【c语言】详解操作符(上)

1. 操作符的分类 2. 原码、反码、补码 整数的2进制表示方法有三种&#xff0c;即原码、反码、补码 有符号整数的三种表示方法均有符号位和数值位两部分&#xff0c;2进制序列中&#xff0c;最高位的1位是被当做符号位其余都是数值位。 符号位都是用0表示“正”&#xff0c;用…...

VR全景展示:传统制造业如何保持竞争优势?

在结束不久的两会上&#xff0c;数字化经济和创新技术再度成为了热门话题。我国制造产业链完备&#xff0c;但是目前依旧面临着市场需求不足、成本传导压力加大等因素影响&#xff0c;那么传统制造业该如何保持竞争优势呢&#xff1f; 在制造行业中&#xff0c;VR全景展示的应用…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...