关于盒模型

• 背景应用于由content和padding, border组成的区域。

• width 和 height 指的是content的宽度和高度

• padding, margin百分数值是相对于其父元素的 width 计算的

• 外边距合并: 两个垂直外边距直接接触时，形成一个外边距
  -- 高度合并为最大的那个
  

  image.png
  -- 内部嵌套的时候也会合并，除非有padding分割
  image.png
  -- 普通文档流中块框才会发生margin合并。行内框、浮动框或绝对定位之间的外边距不会合并。

• 定位
  -- z-index只能用于定位情况，flex absolute relative
  -- 存在卡住的情况

  
  image.png

• 行内元素、块级元素
  -- 行内元素：
  span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code
  -- 块级元素
  div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl

• clear 清除浮动
  不允许某一侧出现浮动元素

几大布局

flex布局，参阅阮一峰老师的文章

• 子元素的float、clear和vertical-align属性失效
• main-axis 是x轴，cross-axis是y轴
• 容器属性-父组件
  flex-direction：主轴方向，row | row-reverse | column | column-reverse
  flex-wrap：一行排不下怎么换行，nowrap | wrap | wrap-reverse
  （reverse从最后往前）
  flex-flow：缩写上面两个属性 <flex-direction> <flex-wrap>;
  justify-content：项目在主轴上的排列方式，flex-start | flex-end | center | space-between | space-around;
  align-items：cross-aixs上排列方式，flex-start | flex-end | center | baseline | stretch
  align-content：多根轴线的对齐方式，flex-start | flex-end | center | space-between | space-around | stretch;
• 每个item子组件属性
  order：数值越小，排列越靠前，默认为0
  flex-grow：默认为0，即使有剩余空间也不放大。根据比例划分剩余空间
  flex-shrink：默认为1，若没有剩余空间则缩小。 按照比例缩小，当然0的时候不变
  flex-basis：默认auto，分配之前占据的空间，从而计算出上述的剩余空间
  flex：none | <'flex-grow'> <'flex-shrink'> <'flex-basis'>
  align-self：单独指定某个item的在cross-axis上样式，参考上面的align-items;

Grid布局

display:grid | inline-grid

1. 定义在container父容器上面

• grid-template-columns：每一列的列宽，grid-template-rows：每一行的行高

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: repeat(3, 33.33%);   // repeat(n | auto-fill,value)，auto-fill尽可能容纳多的单元格
  grid-template-rows: repeat(3, 33.33%);
  grid-template-columns: 1fr 2fr;  // fr(nfr, nfr)，n根据倍数分布
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);   // minmax(100px，1fr) 宽度范围
  grid-template-columns: 100px auto 100px;   // auto 自己决定
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4, c5];  // 指定网格线的名称，一根可以有多个名字
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

• grid-row-gap ，grid-column-gap ，grid-gap 设置行间距、列间距、合并
• grid-template-areas 一个区域由单个或多个单元格组成

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd . f'
                       'g . i';      //  使用"点"（.）表示不需要用的。a-i命名了区域，每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end
}

• grid-auto-flow 排放顺序
  grid-auto-flow：row | column, dense 默认row按行排列，dense则是尽可能紧密排放
• 对齐：container的每个item

.container {
  justify-items: start | end | center | stretch;   // 水平
  align-items: start | end | center | stretch;   //垂直
  place-items: <align-items> <justify-items>;   // 合并写法
}

• 对齐：当前设置容器的本身

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;   // 水平
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    //垂直
   place-content: <align-content> <justify-content>   // 合并
}

• 不赞同：grid-template 合并、grid合并

2. 定义在每个item上

• 指定每个item靠在哪条网格线上，除了设置数字（第几条），还可以使用名称。
  grid-column-start属性：左边框所在的垂直网格线
  grid-column-end属性：右边框所在的垂直网格线
  grid-row-start属性：上边框所在的水平网格线
  grid-row-end属性：下边框所在的水平网格线

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-column: 1 / 3;   //合并
  grid-row-start: 2;
  grid-row-end: 4;
  grid-row: 2 / 4;   //合并
  grid-column-start: header-start;
  grid-column-end: header-end;
  grid-column-start: span 2; // item-1的左距离右跨越2个网格
  grid-column-end: span 2;  // 等同于上面
}

• grid-area
  指定项目放在哪一个区域，对应grid-template-areas，可以合并grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
• item的对齐
  justify-self：水平，类比justify-items，只作用于单个项目。
  align-self：垂直，类比align-items，只作用于单个项目。
  place-self: <align-self> <justify-self>; 合并