整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天學會html+css，第九天固定定位。
Redmi手機電視筆記本。
今天的學習目標是右側懸浮工具欄用固定定位實現，它是相對于瀏覽器窗口的定位方式。
·盒子里的內容用a標簽，一個圖片加一行文字，此時它的位置在最底部。
·然后給它寫上固定定位樣式，右側距離0，下面距離70像素，加上背景顏色，看下效果。
·開始給a標簽寫樣式，固定寬高，text-renderin默認下劃線去掉，里面內容居中，看下效果。
·圖片寫樣式之前也要加上這行代碼，然后讓它的尺寸變小一點，并且左右居中，看下效果。
·文字的顏色、大小也調整一下。
·最后給a標簽加上邊框、內邊距，讓里面內容往下挪一挪。
到此，今天的學習完成。
為教程，還是先科（啰）普（嗦）一下，然后再進入正題。
CSS3 的 calc() 函數允許我們在屬性值中執行數學計算操作，它支持"+", "-", "*", "/" 運算，遵循標準的數學運算優先級規則。例如，我們可以使用 calc() 指定一個元素的寬度總是比它的父元素寬度小 50px。
.foo {
width: calc(100% - 50px);
}這意味著瀏覽器中的值可以更加靈活，能夠響應視口的改變，用在流體布局上簡直就是如虎添翼。calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能。
特別需要注意的是：運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
可以說，calc函數已經得到了瀏覽器廠商的普遍支持，如下圖所示。
clac() 已經得到普遍支持
對于不支持 calc() 的瀏覽器，整個屬性值表達式將被忽略。不過我們可以對那些不支持 calc()函數的瀏覽器，使用一個固定值作為回退。
.foo {
width: 90%; /* Fallback for older browsers */
width: calc(100% - 50px);
}需求：比如，我們經常需要固定一個操作面板在頁面底部，其它區域占滿屏幕剩余區域并隨視口變化而自適應變化，且可以上下滾動。
分析：我們能夠給要固定的元素設定一個高度，其值為視口的高度減去一個絕對值。那么我們可以做一個上下結構的布局，上部為主區域，下部為底部區域。
HTML代碼：
<div id="main">主區域</div>
<div id="bottom">底部區域</div>CSS代碼：
body {
margin: 0;
color: white;
text-align: center;
}
#main {
height: calc(100vh - 50px); /*視口高度 - 50px*/
overflow-y: auto;
background-color: blueviolet;
}
#bottom {
height: 50px;
background-color: black;
}效果如下：無論窗口多大，底部始終保持50px高度，其余部分會隨著窗口變化而自適應變化，當主區域內容很多時，該區域會出現滾動條。
【本文結束】
學習過程記錄，有需要的朋友可以參考。歡迎一鍵三連（點贊、關注、評論）。
絡發展到了今天，很多朋友對于網站已經不陌生了，但是當我們看網頁時你注意到網站的底部了嗎？雖然很少人會注意到他，但是如果不在底部的話，會很難看，今天小猿圈web前端講師就為你介紹網站頁面底部固定的方法。
方法一：footer高度固定+絕對定位
html
<div class="dui-container">
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>
css
.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}
方法二：在主體content上的下邊距增加一個負值等于底部高度
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
方法三：將頁腳的margin-top設為負數
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}
方法四： 通過設置flex，將footer的margin-top設置為auto
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}
方法五： 通過函數calc()計算內容的高度
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
main{
min-height: calc(100vh - 200px); /* 這個200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}
方法六： 通過設置flexbox，將主體main設置為flex
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}
小猿圈提醒大家合理利用自己每一分每一秒的時間來學習提升自己，不要再用"沒有時間“來掩飾自己思想上的懶惰！趁年輕，使勁拼，給未來的自己一個交代！想學習IT編程類知識的可以到小猿圈網站去自學，里面有最新最全的視頻以及專業的解答。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
