记一则css3计算

 .Head{
        background-image: url("../../Img/PersonalCenter/banner.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: calc(41vw + 25px);
        background-color:white;
        text-align:center;
   }

  

描述 背景图片高313px 宽750px,高宽占比约为41%

元素为了能够让背景宽度100% 高度自适应且高度为完全显示背景图片后多余25像素显示其他内容。特地设置Head的高度为 calc(41vw + 25px) 41vw 为屏幕像素宽度的41%

 

效果:

时间: 2024-12-24 02:55:23

记一则css3计算的相关文章

css3计算属性(calc)

如果有固定头部高度和底部高度,内容的高度或者宽度想要根据浏览器屏幕自适应的话,可以用到css3的计算属性,即calc. 用法如下: 内容区域高/宽 = calc(100% - 头部高宽 - 底部高宽) //这样就可以自适应高度或宽度了. 浏览器高度: document.documentElement.clientHeight

【Foreign】开锁 [概率DP]

开锁 Time Limit: 10 Sec  Memory Limit: 256 MB Description Input Output Sample Input 4 5 1 2 5 4 3 1 5 2 2 5 4 3 1 5 3 2 5 4 3 1 5 4 2 5 4 3 1 Sample Output 0.000000000 0.600000000 0.900000000 1.000000000 HINT Main idea 一个宝箱内有一个可以开启别的宝箱的钥匙,可以选择k个宝箱,询问能开

【体系结构】动态调度算法:记分牌算法和tomasulo算法

记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(IF)流水级允许按顺序取多条指令进入单口暂存器(single-entry latch)或队列(queue), 指令然后从latch或queue取出,进入ID节拍. (2)能检查并消除hazards----将ID流水级分为独立的两级:Issue级和Read operand级: Issue级功能 ----

[No00000F] Excel快捷键大全 Excel2013/2010/2007/2003常用快捷键大全

一个软件最大的用处是提高工作效率,衡量一个软件的好坏,除了是否出名之外,最主就是能否让一个新手更快的学会这个软件和提高工作速度.就拿Excel表格来说吧,平常办公中我们经常会用它来制作表格,统计数据或其他重要工作,有了它,我们的工作变得更加简单.快速.当然,前提是我们必须熟练掌握这款软件,下面小编就为大家献上精心收集的Excel常用快捷键大全,适用于Excel2003.Excel2007.Excel2010.Excel2013等各个版本,有了这些Excel快捷键,保证日后的工作会事半功倍. Ex

Oracle优化器的基础知识(二)

一. 表连接 顾名思义,表连接就是指多个表之间用连接条件连接在一起,使用表连接的目标SQL的目的就是从多个表获取存储在这些表中的不同维度的数据.体现在SQL语句上,含表连接的目标SQL的from部分会出现多个表,而这些SQL的where条件部分则会定义具体的表连接条件. 当优化器解析含表连接的目标SQL时,它除了会根据目标SQL的SQL文本的写法来决定表连接的类型之外,还必须决定如下三件事情才能得到最终的执行计划. 1.表连接顺序 不管目标SQL中有多少个表做表连接,Oracle在实际执行该SQ

Oracle 哈希连接原理

<基于Oracle的sql优化>里关于哈希连接的原理介绍如下: 哈希连接(HASH JOIN)是一种两个表在做表连接时主要依靠哈希运算来得到连接结果集的表连接方法. 在Oracle 7.3之前,Oracle数据库中的常用表连接方法就只有排序合并连接和嵌套循环连接这两种,但这两种表连接方法都有其明显缺陷.对于排序合并连接,如果两个表在施加了目标SQL中指定的谓词条件(如果有的话)后得到的结果集很大且需要排序的话,则这种情况下的排序合并连接的执行效率一定是很差的:而对于嵌套循环连接,如果驱动表所对

Excel 2013快捷键

Excel 中的键盘快捷方式 1. 通过键盘访问功能区 如果您不熟悉功能区,本节中的信息可以帮助您了解功能区的快捷键模型.功能区附带新的快捷方式,称为"按键提示".若要显示"按键提示",请按 Alt. 你阅读的博文来自大郭讲堂 若要在功能区上显示某个选项卡,请按对应于该选项卡的按键,例如,对于"插入"选项卡,按字母 N,或者对于"公式"选项卡,按字母 M.这将显示对应于该选项卡按钮的所有按键提示徽章.接下来,按所需按钮对应的按

web前端面试题记录

记录了2017年5月下旬刚毕业时面试的经典面试题 布局方面 1. 响应式布局,左侧栏目固定,右侧内容随着屏幕宽度变化而变化(高频) flex布局 position布局 css3计算宽度 float布局 flex布局 // html <div class="box"> <div class="left"></div> <div class="right"></div> </div&g

小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下p