前端知識
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: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; 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; }