左右布局（高度自適應(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)，并且讓溢出部分不可見*/
  
}
.left{
  width:30%;
  float:left;  /*使元素浮動(dòng)起來*/
  background:#fba;
  margin-bottom:-30000px;  /*核心代碼 值為負(fù)數(shù)，數(shù)值可變，*/
  padding-bottom:30000px;/*核心代碼 值為正數(shù)，數(shù)值可變，*/
}
.right{
  width:70%;
  float:left; /*使元素浮動(dòng)起來*/
  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)，并且讓溢出部分不可見*/
}
.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)（見張鑫旭老師博客）：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;

塊級元素
1.知道這個(gè)元素寬度，直接：margin：0 auto；
2.不知道這個(gè)元素寬度：
父元素：

text-align：center；

居中元素：

display：inline-block；

垂直居中

行內(nèi)元素
其包裹的父元素: vertical-align:middle;

塊級元素
1.知道這個(gè)元素的高度和寬度
父元素

position：relative

垂直居中元素

position：absolute；
top:50%;
left:50%;
margin-left: -(垂直居中元素寬度)/2;
margin-top: -(垂直居中元素高度)/2

2.不知道這個(gè)元素的高度和寬度：
垂直居中元素：display：inline-black；
給父元素一個(gè)高度，然后再line-height等于給的高度

附一張偷來的圖：幫助記憶

image.png