入门:CSS布局

1. 左右布局

• 浮动法float:子元素加float,父元素加clearfix
• 定位法:子绝父相

2. 左中右布局

• 浮动+定位

3. 居中

1.水平居中:

• 内联元素:text-align=center
• 块级: 1. margin:0 auto;
  2. 绝对定位

2. 垂直居中:

• 行高法:line-height=height
• 块级:
  1. margin:auto 0;

2. 绝对定位:

.parent{
  position: relative;
}
son{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3.水平&垂直居中
1. 绝对定位

postition:absolute
top:50% 
left:50% 
transform:translate(-50%,-50%);

2.margin

.parent{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
 }
.son{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  width:50%;
  height:50%;
  margin:auto;
 }

4. 等其他小技巧

• flex布局:

parent{
  display:flex;
  align-items:center;
};

• box-sizing: border-box;父盒子内内容自适应
• Grid布局
• H5标签,增强语义
• 伪元素
• 清除浮动,父盒子clearfix

.clearfix::after {
    content: '';
    display: block;
    clear: both;
  }

• 脱离文档流标准流:浮动;绝对定位;固定定位
• 层级 z-index