[转]CSS3 使用 calc() 计算高度 vh px
1、px
像素,我们在网页布局中一般都是用px。
2、百分比
百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了。
3、Viewport
viewport:可视窗口,也就是浏览器。
vw Viewport宽度, 1vw 等于viewport宽度的1%
vh Viewport高度, 1vh 等于viewport高的的1%
CSS3使用Calc
calc()使用通用的数学运算规则,但是也提供更智能的功能:
>使用“+”、“-”、“*” 和 “/”四则运算;
>可以使用百分比、px、em、rem等单位;
>可以混合使用各种单位进行计算;
>表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
>表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
例如 :设置div元素的高度为当前窗口高度-100px
div{
height: calc(100vh - 100px);
}
————————————————
版权声明:本文为CSDN博主「图云梦」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_17518593/article/details/52689178
[转]CSS3 使用 calc() 计算高度 vh px的更多相关文章
- CSS3 使用 calc() 计算高度 vh px
Viewport viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于view ...
- CSS的单位及css3的calc()及line-height百分比
锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...
- CSS的单位 及 css3的calc() 及 line-height 百分比
CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...
- CSS3的calc()使用
CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...
- CSS3表达式calc( )
CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...
- css3的calc属性不生效问题
css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...
- css3的 calc属性无效问题解决
css3的 calc:计算属性. 运算符两边需要加空格,才有效. 错误示例:.mystyle{width:calc(100%-25px)}这样是不生效的 运算符"+ - * /"左 ...
随机推荐
- Java开发环境之IntelliJ IDEA
查看更多Java开发环境配置,请点击<Java开发环境配置大全> 贰章:IntelliJ IDEA安装教程 1)去官网下载IDEA安装包 https://www.jetbrains.com ...
- 0x01 Python logging模块
目录 Python logging 模块 前言 logging模块提供的特性 logging模块的设计过程 logger的继承 logger在逻辑上的继承结构 logging.basicConfig( ...
- Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2)-D. Restore Permutation-构造+树状数组
Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2)-D. Restore Permutation-构造+树状数组 [Pro ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- MSSQL行车列规则
行转列,是SQL中经常会遇到的一个问题,并且分为静态转换和动态转换,所谓静态转换即在转换的行数已知或固定:动态转换则为转换的行数不固定. 转换的方法一般采用case when语句或pivot(MSSQ ...
- async-validator:Element表单验证
转载文章:Element表单验证(2) Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到a ...
- python zlib模块缺失报错:RuntimeError: Compression requires the (missing) zlib module
解决方式: # yum install zlib # yum install zlib-devel 下载成功后,进入python2.7的目录,重新执行 #make #make install 此时先前 ...
- OLED液晶屏幕(0)自动获取12ic地址液晶屏幕
. 烧录 串口可以看到输出的地址 #include <Wire.h> void setup(){ Wire.begin(); Serial.begin(9600); Serial.prin ...
- Linear Discriminant Analysis Algorithm
线性判别分析算法. 逻辑回归是一种分类算法,传统上仅限于两类分类问题. 如果有两个以上的类,那么线性判别分析算法是首选的线性分类技术.LDA的表示非常直接.它包括数据的统计属性,为每个类计算.对于单个 ...
- Parametric and Nonparametric Algorithms
即参数化算法和非参数化算法. 参数化机器学习算法 可以大大简化学习过程,也可以限制可以学到的东西,将函数简化为已知形式的算法称为参数化机器学习算法.算法包括两个步骤: 为函数选择一个form. 从训练 ...