一，float布局
float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
屬性值：
float:left 元素向左浮動。
float:reght 元素向右浮動。
float:none 默認(rèn)值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
float:inherit 規(guī)定應(yīng)該從父元素繼承 float 屬性的值。
float案例：
<div style="width:100px; height: 40px; background-color: black;float: right;"> </div> <div style="width:100px; height: 40px; background-color: #FF0000;float: left;"> </div> <div style=" width: 100px; background-color: #0000FF; height: 40px; float: left;"> </div>
效果：（如果不用浮動div塊將會一次垂直往下排列）浮動后的塊元素可以用magin或pading來留白修飾來使其美觀。
二、absolute布局
absolute譯為絕對的，absolute是postion屬性一個屬性值。當(dāng)一個元素使用絕對定位時，這個元素將不受頁面的布局影響
可以根據(jù)自己的需求來改變其位置，來完成一些不規(guī)則的頁面布局：
屬性值：
postion：absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
postion：fixed 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
postion：relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
postion：static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
postion：inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
absolute 中有一個值的注意的地方 相對于 static 定位以外的第一個父元素進(jìn)行定位 在使用絕對定位時要注意他父元素?cái)?shù)的定位，假若對父元素沒有要求
可以給父元素設(shè)置一個相對定位relative。對于新手來說，定位之間的切換，父級和下一級之間的關(guān)系常常擾亂我們（我就是這樣）所以要勤加練習(xí)更好的
掌握 。
absolute 案例：
<style type="text/css">
.div1{
width: 100px;
height: 40px;
background-color: #FF0000;
position: absolute;
top: 20px;
left: 30px;
}
.div2{
width: 100px;
height: 40px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
</body>效果：（使用絕對定位將紅色塊定位到距離上邊框20px左邊框30px）如果想讓藍(lán)色的div塊在上面，可以用在藍(lán)色樣式加絕對定位用z-index:1來設(shè)置
三、flex彈性布局
彈性布局東西太多不寫了直接看別人的博客吧我看著蠻好 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
四、table布局 (鏈接：https://blog.csdn.net/Bessicxie/article/details/78572424)
Table布局的缺點(diǎn)是比其它html標(biāo)記占更多的字節(jié)，會阻擋瀏覽器渲染引擎的渲染順序，會影響其內(nèi)部的某些布局屬性的生效，
優(yōu)點(diǎn)就是用table做表格是完全正確的
語法：display：table；
屬性：常見 display:table相當(dāng)于“table”標(biāo)簽；display:table-row相當(dāng)于“tr”標(biāo)簽；display:table-cell相當(dāng)于“td”標(biāo)簽；
案例：
五、grid布局（鏈接：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html）
內(nèi)容來源 作者：_leonlee
鏈接：https://www.jianshu.com/p/d183265a8dad
來源：簡書
作為小白的我還是第一次來了解grid布局，剛剛百度了一下子看了幾篇博文，了解到這是一個非常nb的東西
聯(lián)系客服
