记一则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%
效果:

记一则css3计算的更多相关文章
- css3计算属性(calc)
如果有固定头部高度和底部高度,内容的高度或者宽度想要根据浏览器屏幕自适应的话,可以用到css3的计算属性,即calc. 用法如下: 内容区域高/宽 = calc(100% - 头部高宽 - 底部高宽) ...
- css3 vw -----解决页面滚动出现跳动的bug
100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度. demo: h1{font-size:8vw;} ...
- css居中div的几种常用方法
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...
- Oracle 哈希连接原理
<基于Oracle的sql优化>里关于哈希连接的原理介绍如下: 哈希连接(HASH JOIN)是一种两个表在做表连接时主要依靠哈希运算来得到连接结果集的表连接方法. 在Oracle 7.3 ...
- 【体系结构】动态调度算法:记分牌算法和tomasulo算法
记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(I ...
- Front End Developer Questions 前端开发人员问题(二)CSS 后续
问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...
- [No00000F]Excel快捷键大全 Excel2013/2010/2007/2003常用快捷键大全
一个软件最大的用处是提高工作效率,衡量一个软件的好坏,除了是否出名之外,最主就是能否让一个新手更快的学会这个软件和提高工作速度.就拿Excel表格来说吧,平常办公中我们经常会用它来制作表格,统计数据或 ...
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...
随机推荐
- python caffe 在师兄的代码上修改成自己风格的代码
首先,感谢师兄的帮助.师兄的代码封装成类,流畅精美,容易调试.我的代码是堆积成的,被师兄嘲笑说写脚本.好吧!我的代码只有我懂,哈哈! 希望以后代码能写得工整点.现在还是让我先懂.这里,我做了一个简单的 ...
- [CSAPP笔记]Binary , Unsigned , Signed 之间的相互装换
LaTex+MarkDown+Pandoc组合套件写博客的处女作,试试效果.各自的分工为:Latex下编辑公式,在Sublime Text 2下使用Markdown排版,最后用Pandoc导出. 摘要 ...
- Python学习-str与byte类型以及编码
Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文本总是Unicode,由str类型表示,二进制数据则由bytes类型表示.Python 3不会以任意隐式的方式混用str和b ...
- C# 汉字转拼音 方法(汉字的发音不过400多种(不算声调))
/* * 2009年8月6日13:19:20 * 调用:this.label1.Text = DXHanZiToPinYin.DXHanZiToPinYin.Convert(this.textBox1 ...
- java 线程池--ExecutorService
一 Java通过Executors提供四种线程池,分别为: newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程. new ...
- php、打印
<!DOCTYPE HTML><html><head><meta http-equiv="content-type" content=&q ...
- centos下svn的主要常用命令(解决商城系统添加的文件无法自动更新至svn服务器)
问题描述: 在商城中通过网页上传的png文件无法自动添加到版本库中. 查找过程: 通过程序分析,增加的主要是数据文件,主要分布在data目录中. svn list /home/ggg --depth= ...
- 老齐python-基础2(字符串)
1.字符串 1.1索引和切片 索引: >>> lang = "study python" >>> lang[0] 's' >>> ...
- sed详解---用法及解释
1.sed -n '2'p filename 打印文件的第二行. 2.sed -n '1,3'p filename 打印文件的1到3行 3. sed -n '/Neave/'p filename 打印 ...
- Unit06: 外部对象概述 、 window 对象 、 document 对象
Unit06: 外部对象概述 . window 对象 . document 对象 小代码演示: <!DOCTYPE html> <html> <head> < ...