左右布局（高度自適應(yīng)）
1.左邊定寬，右邊自適應(yīng)侣滩，或者右邊定寬摊册，左邊自適應(yīng)，（高度自適應(yīng)）
使用 float 完成
效果圖
image.png
div
核心代碼
margin-bottom:-30000px;
padding-bottom:30000px;
div代碼
<div class="wrapper">
<div class="left">aaaaaaaaaa<br>aaaaaa</div>
<div class="right">aaaaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaa<div>
</div>
css代碼
.wrapper{
overflow:hidden; /*核心代碼 使父元素形成BFC空間篙贸，從而清除浮動(dòng)投队，并且讓溢出部分不可見(jiàn)*/
}
.left{
width:30%;
float:left; /*使元素浮動(dòng)起來(lái)*/
background:#fba;
margin-bottom:-30000px; /*核心代碼 值為負(fù)數(shù)，數(shù)值可變爵川，*/
padding-bottom:30000px;/*核心代碼 值為正數(shù)敷鸦，數(shù)值可變，*/
}
.right{
width:70%;
float:left; /*使元素浮動(dòng)起來(lái)*/
background:#8ca;
margin-bottom:-30000px; /*核心代碼 值為負(fù)數(shù)寝贡，數(shù)值可變扒披，*/
padding-bottom:30000px; /*核心代碼 值為正數(shù)，數(shù)值可變圃泡，*/
}
左中右布局（高度自適應(yīng)）
效果圖
image.png
同樣采用
margin-bottom:-30000px;
padding-bottom:30000px;
div
<div class="wrapper">
<div class="left">aaaaaaaaaa<br>aaaaaa</div>
<div class="right">aaaaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaa</div>
<div class="middle">vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div>
</div>
css
.wrapper{
overflow:hidden; /*核心代碼 使父元素形成BFC空間谎碍，從而清除浮動(dòng)，并且讓溢出部分不可見(jiàn)*/
}
.left{
width:300px;
float:left;
background:#fba;
margin-bottom:-30000px; /*核心代碼 值為負(fù)數(shù)洞焙，數(shù)值可變蟆淀，*/
padding-bottom:30000px;;/*核心代碼 值為正數(shù)拯啦，數(shù)值可變，*/
}
.right{
width:400px;
float:right;
background:#8ca;
margin-bottom:-30000px; /*核心代碼 值為負(fù)數(shù)熔任，數(shù)值可變褒链，*/
padding-bottom:30000px;;/*核心代碼 值為正數(shù)，數(shù)值可變疑苔，*/
}
.middle {
margin:0 400px 0 300px; background:#ffe6b8; height:100px /*此處的高度控制整體的高度*/
}
左中右寬度自適應(yīng)（見(jiàn)張?chǎng)涡窭蠋煵┛停?a target="_blank" rel="nofollow">https://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/
水平居中
行內(nèi)元素
其父元素：text-align:center;
塊級(jí)元素
1.知道這個(gè)元素寬度甫匹，直接：margin：0 auto；
2.不知道這個(gè)元素寬度：
父元素：
text-align：center惦费；
居中元素：
display：inline-block兵迅；
垂直居中
行內(nèi)元素
其包裹的父元素: vertical-align:middle;
塊級(jí)元素
1.知道這個(gè)元素的高度和寬度
父元素
position：relative
垂直居中元素
position：absolute；
top:50%;
left:50%;
margin-left: -(垂直居中元素寬度)/2;
margin-top: -(垂直居中元素高度)/2
2.不知道這個(gè)元素的高度和寬度：
垂直居中元素：display：inline-black薪贫；
給父元素一個(gè)高度恍箭，然后再line-height等于給的高度
附一張偷來(lái)的圖：幫助記憶
image.png
