#学习笔记#

• 盒子模型
  • 让块级元素水平居中对齐，固定写法: margin 0 auto;
  • 行内元素左右外边距生效，上下外边距无效，padding生效
  • 行内元素设置宽高无效
  • 外边距合并：块级兄弟元素
  • 外边距塌陷：嵌套关系（父子）的块元素，解决方案：
    • 给父盒子添加边框
    • 父盒子添加上内边距
    • 父盒子添加 overflow: hidden;
• 盒子模型背景

background-color: pink;
background-image
background-repeat: 
background-position: 
background-size: 
background-clip: 

• 背景渐变 linear-gradient (线性渐变) radial-gradient（径向渐变）
  • linear-gradient
  • 渐变背景文字：

// 渐变背景文字
.gradient-text {
  background: linear-gradient(90deg, #FF416C 0%, #FF4B2B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

• 弹性布局

• # 弹性布局
  display: flex;
  
  # 定义主轴上的对齐方式(justify-content)
  
    flex-start 左对齐（默认）
    flex-end   右对齐
    center     居中对齐
    space-between 两端对齐
    space-around
    space-evenly  
  
  # 定义交叉轴上的对齐方式 (align-items) ,单行时生效
    flex-start 左对齐（默认）
    flex-end   右对齐
    center     居中对齐
    
  # 定义主轴方向(改变主轴方向) flex-direction
    row (默认值)  横向排列
    column        纵向排列