CSS基础布局

左右布局（高度自适应）

1.左边定宽，右边自适应，或者右边定宽，左边自适应，（高度自适应）

使用 float 完成

效果图

image.png

div
核心代码

  margin-bottom:-30000px; 
  padding-bottom:30000px; 

div代码

    
aaaaaaaaaa
aaaaaa
    
aaaaaaaaaaa
aaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa

  

css代码

.wrapper{
   overflow:hidden; /*核心代码 使父元素形成BFC空间，从而清除浮动，并且让溢出部分不可见*/
  
}
.left{
  width:30%;
  float:left;  /*使元素浮动起来*/
  background:#fba;
  margin-bottom:-30000px;  /*核心代码 值为负数，数值可变，*/
  padding-bottom:30000px;/*核心代码 值为正数，数值可变，*/
}
.right{
  width:70%;
  float:left; /*使元素浮动起来*/
  background:#8ca;
   margin-bottom:-30000px;  /*核心代码 值为负数，数值可变，*/
  padding-bottom:30000px; /*核心代码 值为正数，数值可变，*/
}

---

左中右布局（高度自适应）

效果图

image.png

同样采用

margin-bottom:-30000px;
padding-bottom:30000px;

div

    
aaaaaaaaaa
aaaaaa
    
aaaaaaaaaaa
aaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa
     
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
  

css

.wrapper{
   overflow:hidden; /*核心代码 使父元素形成BFC空间，从而清除浮动，并且让溢出部分不可见*/
}
.left{
  width:300px;
  float:left;
  background:#fba;
  margin-bottom:-30000px; /*核心代码 值为负数，数值可变，*/
  padding-bottom:30000px;;/*核心代码 值为正数，数值可变，*/
}
.right{
  width:400px;
  float:right;
  background:#8ca;
   margin-bottom:-30000px; /*核心代码 值为负数，数值可变，*/
  padding-bottom:30000px;;/*核心代码 值为正数，数值可变，*/
}
.middle {
 margin:0 400px 0 300px; background:#ffe6b8; height:100px /*此处的高度控制整体的高度*/
}

左中右宽度自适应（见张鑫旭老师博客）：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/

---

水平居中

行内元素
其父元素：text-align:center;

块级元素
1.知道这个元素宽度，直接：margin：0 auto；
2.不知道这个元素宽度：
父元素：

text-align：center；

居中元素：

display：inline-block；

---

垂直居中

行内元素
其包裹的父元素: vertical-align:middle;

块级元素
1.知道这个元素的高度和宽度
父元素

position：relative

垂直居中元素

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

2.不知道这个元素的高度和宽度：
垂直居中元素：display：inline-black；
给父元素一个高度，然后再line-height等于给的高度

附一张偷来的图：帮助记忆

image.png