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