前端知识

Calc()介绍

calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度。比如说:你可以用calc()给元素margin、padding、border、font-size和width等属性设置动态值。为什么说是动态值呢?因为我们是使用来表示得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

Calc()的用处

calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50%+2em)”,这样我们就不用考虑元素DIV的宽度值到底是多少,而把这个任务交由浏览器去计算。

Calc()语法

calc()语法很简单,使用数学表达式来表示就可以了,就像我们以前学习的加(+)、减(-)、乘(*)、除(/)一样,如下:

.elm {

     width: calc(expression);

}

其中”expression”是一个表达式,用来计算长度的表达式。

Calc()的运算规则

DIV+CSS自适应布局

1、高度自适应布局

  原理:把每个模块设置为绝对定位,然后设置中间自适应的模块的top和bottom属性的值分别为头部和底部模块的高,然后中间模块的高度就自适应。

html代码如下:

<body>
<div class="top">
120px
</div>
<div class="main">
自适应
</div>
<div class="bottom">
120px
</div>
</body>

 css代码如下:

 

.top{
width: 100%;
height: 120px;
position: absolute;
background-color: greenyellow; }
.main{
position: absolute;
width: 100%;
top: 120px;
bottom: 120px;
background-color: azure;
height: auto;
}
.bottom{
position: absolute;
bottom: 0;//别漏了
width: 100%;
height: 120px;
background-color:greenyellow ;
}

2、宽度自适应

宽度自适应有三种方法:分别是绝对定位;利用margin,中间模块先渲染;自身浮动。

1)、用绝对定位来设置宽度自适应布局,原理为:针对自适应模块使用绝对定位,再把left和right设置为左右两列的宽,其实原理和高度自适应的原理是一样的,另外左右两列分别左右浮动。

html代码:

<body>
<div class="left">
200px
</div>
<div class="main">
自适应
</div>
<div class="right">
200px
</div>
</body>

css代码:

html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
} .left,
.right {
width: 200px;
display: inline;
height: 100%;
background-color: greenyellow;
} .left {
float: left;
} .right {
float: right;
} .main {
position: absolute;
left: 200px;
right: 200px;
height: 100%;
background-color: azure;
display: inline;
}

2)、中间一列优先渲染的自适应三列布局,优先渲染(加载)的关键:内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div,left和right模块都向左浮动,然后对自适应的div(就是父div里的子div)设置margin:0  200px,然后对left的margin-left的属性值设置为100%的负数,就是margin-left:-100%;对right的margin-left的属性值设置为自身宽度的负数,就是margin-left:-200px。

注:自适应的div必须放在left和right前面且包含一个父div里。

html代码:

<body>
<div class="main"> <!--看清楚,这里用一个父div包住-->
<div class="content">
自适应
</div>
</div>
<div class="left">
200px
</div>
<div class="right">
200px
</div>
</body>

css代码:

html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
} .main {
width: 100%;
height: 100%;
float: left;
} .main .content {
margin: 0 200px;
background-color: azure;
height: 100%;
} .left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
} .left {
margin-left: -100%; //important
} .right {
margin-left: -200px; //important
}

3)、自身浮动,原理:中间列设置margin属性,就是把左右列分别左右浮动。

注:使用这个方法布局自适应的话,必须把自适应的那一列在html中放在left和right后面。

html代码:

<body>
<div class="left">
200px
</div>
<div class="right">
200px
</div>
<div class="main">
自适应
</div>
</body>

css代码:

html,
body {
margin:;
height: 100%;
padding:;
font-size: 30px;
font-weight:;
text-align: center;
}
.main {
margin: 0 200px;
height: 100%;
background-color: azure;
}
.left,
.right {
width: 200px;
height: 100%;
background-color: greenyellow;
}
.left {
float: left;
}
.right {
float: right;
}

css3 calc()属性介绍以及自适应布局使用方法的更多相关文章

  1. 处理移动端自适应布局的方法- calc()与vw

    在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...

  2. 关于使用rem单位,calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

  3. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  5. 使用css3中calc()进行自适应布局

    calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...

  6. css3 calc()方法详解

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  7. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  8. 再谈布局,栅栏式自适应布局的学习和实现(calc自适应布局)

    布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...

  9. css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

随机推荐

  1. June Challenge 2017

    A Good Set 分析:水题,选奇数即可 #include "iostream" #include "cstdio" #include "cstr ...

  2. [USACO2006 DEC] Wormholes

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1715 [算法] 用SPFA判定负环是否存在即可 时间复杂度 : O(N ^ 2) [ ...

  3. 【hdu 2222】Keywords Search

    [题目链接] 点击打开链接 [算法] 此题是AC自动机模板题 AC自动机是很神奇的算法,简单点来说,就是在一棵字典树上进行KMP,它的应用范围很广,非常实用 这篇博客写得很好,推荐阅读 : http: ...

  4. Oracle 11G for redhat 自启动脚本

    在$ORACLE_HOME/bin中,有dbstart和dbshut这两个脚本,可以使用这两个oracle自带的脚本实现oracle的开机自启动.这个脚本中包含oraclelistener.insta ...

  5. .NETFramework:Stopwatch

    ylbtech-.NETFramework:Stopwatch 1.返回顶部 1. #region 程序集 System, Version=4.0.0.0, Culture=neutral, Publ ...

  6. Java 8的Lambda学习

    参考资料:https://www.dotnetperls.com/lambda-java Lambdas用于创建函数对象.通过它们,我们可以在其它方法内部指定方法,甚至可以把方法做为参数传递给其它方法 ...

  7. float以后设置的小细节

    先看看下面这段css代码,是不是很完美?没错? #pageBodyMain .articleList a: after { content: ""; clear: both; di ...

  8. ACM中java的使用

    ACM中java的使用 转载自http://www.cnblogs.com/XBWer/archive/2012/06/24/2560532.html 这里指的java速成,只限于java语法,包括输 ...

  9. Redis生成主键ID

    使用Redis來生成主鍵ID策略,這裡主要使用 RedisAtomicLong 類來實現主鍵生成策略.具體代碼如下: /** * @Description: 获取自增长值 * @param key k ...

  10. 力荐!35 个最好用的 Vue 开源库!

    无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠咖啡度日也会成为家常便饭.所幸的是,随着 Vue.js 和 ...