div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
生活随笔
收集整理的這篇文章主要介紹了
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1垂直兩欄右邊固定左邊自適應的四種寫法
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.outer {height: 100px;margin-bottom: 10px;}.left {background: tomato;height: 100px;}.right {background: gold;height: 100px;}/* 浮動 */.outer1 .left {width: 200px;float: left;}.outer1 .right {width: auto;margin-left: 200px;}/* flex */.outer2 {display: flex;}.outer2 .left {flex-grow: 0;flex-shrink: 0;flex-basis: 200px;}.outer2 .right {flex: auto;/* 1 1 auto */}/* position */.outer3 {position: relative;}.outer3 .left {position: absolute;width: 200px;}.outer3 .right {margin-left: 200px;}/* position again */.outer4 {position: relative;}.outer4 .left {width: 200px;}.outer4 .right {position: absolute;top: 0;left: 200px;right: 0;}</style> </head> <!-- 左右兩欄，左邊固定，右邊自適應 --><body><!-- 第一種寫法的原理:浮動布局left 浮動脫離文檔流，right 用margin撐開left 的寬度，right不限制寬度width:auto;可省略--><div class="outer outer1"><div class="left">1-left</div><div class="right">1-right</div></div><!-- 第二種寫法原理:flex布局1給父元素display: flex;變成彈性布局,讓它排列一行2.給left 三個屬性flex-grow: 0; 默認值為0 ,即使存在剩余空間，也不放大如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。flex-shrink: 0; 定義此屬性為0,表示不縮小如果所有flex-shrink的值為1事等比列縮小flex-basis: 200px; 此屬性定義在定義在分配多余空間之前項目占據主軸空間。瀏覽器根據這個屬性,計算主軸是否有多余空間。他的默認值為auto,即項目本來大小它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。獲取有的說在這里獲取width:200,是一樣的那就大錯特錯了,只能說不了解flex布局--><div class="outer outer2"><div class="left">2-left</div><div class="right">2-right</div></div><!-- 第三種方法定位布局：1 父元素position: relative;2 left position: absolute;width: 200px;脫離文檔里固定寬度3 margin-left: 200px; 用margin撐開200px;--><div class="outer outer3"><div class="left">3-left</div><div class="right">3-right</div></div><!-- 第四種方法仍然是定位1 父元素position: relative;2 定位right position: absolute;top: 0;left: 200px;right: 0;脫離文檔流--><div class="outer outer4"><div class="left">4-left</div><div class="right">4-right</div></div> </body></html>2三欄布局中間自適應，左右寬度固定
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.outer,.left,.middle,.right {height: 100px;margin-bottom: 5px;}.left {background: tomato;}.middle {background: lightgreen;}.right {background: gold;}/* 左右分別設置絕對定位 中間設置外邊距 */.outer1 {position: relative;}.outer1 .left {position: absolute;width: 100px;}.outer1 .middle {margin: 0 200px 0 100px;}.outer1 .right {position: absolute;width: 200px;top: 0;right: 0;}/* flex 布局 */.outer2 {display: flex;}.outer2 .left {flex: 0 0 100px;}.outer2 .middle {flex: auto;}.outer2 .right {flex: 0 0 200px;}/* 浮動布局 但是 html 中 middle要放到最后 */.outer3 .left {float: left;width: 100px;}.outer3 .right {float: right;width: 200px;}.outer3 .middle {margin: 0 200px 0 100px;}</style> </head> <!-- 三欄布局 左右固定 中間自適應 --><body><!-- 第一種方式原理:左右分別絕對定位中間設置外邊距--><div class="outer outer1"><div class="left">1-left</div><div class="middle">1-middle</div><div class="right">1-right</div></div><!-- 第二種方式原理 flex在這里再說一次flex 簡寫的三個屬性1 flex-shrink:flex-shrink:屬性定義項目的縮小比列，默認為1，即如果空間不足改項目縮小。當值為0時不縮放2 flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。3 flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。--><div class="outer outer2"><div class="left">2-left</div><div class="middle">2-middle</div><div class="right">2-right</div></div><!-- 第三中方法原理:左右浮動中間加外邊距--><div class="outer outer3"><div class="left">3-left</div><div class="right">3-right</div><div class="middle">3-middle</div></div> </body></html>3.圣杯布局和雙飛翼布局和三欄布局要求相同只不過，中間列要寫在在前面保證優先渲染！
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.outer,.left,.middle,.right {height: 100px;margin-bottom: 5px;}.left {background: tomato;}.middle {background: lightgreen;}.right {background: gold;}/* 圣杯布局 通過浮動和負邊距實現 */.outer1 {padding: 0 200px 0 100px;}.outer1 .middle {width: 100%;float: left;}.outer1 .left {width: 100px;float: left;margin-left: -100%;position: relative;left: -100px;}.outer1 .right {width: 200px;float: left;margin-left: -200px;position: relative;left: 200px;}/* 雙飛翼布局 */.outer2 .middle-wrapper {width: 100%;float: left;}.outer2 .middle {margin: 0 200px 0 100px;}.outer2 .left {width: 100px;float: left;margin-left: -100%;}.outer2 .right {width: 200px;float: left;margin-left: -200px;}</style> </head> <!-- 三欄布局 左右固定 中間自適應 --><body><!-- 圣杯布局 middle 最先 --><!--父元素通過內邊距占據中間 ！middle脫離文檔流left通過定位 和margin占據左邊！right通過定位 和margin占據左邊！--><div class="outer outer1"><div class="middle">圣杯-middle</div><div class="left">圣杯-left</div><div class="right">圣杯-right</div></div><!-- 雙飛翼布局 middle 最先 多一層 div --><div class="outer outer2"><div class="middle-wrapper"><div class="middle">雙飛翼布局-middle</div></div><div class="left">雙飛翼布局-left</div><div class="right">雙飛翼布局-right</div></div> </body></html>今天就到這里把！有時間繼續
總結
以上是生活随笔為你收集整理的div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： appium 驱动 对应9.0 系统_以
- 下一篇： tableau地图城市数据_优阅达“优分