CSS 选择器

传统布局属性

1. display

2. flex

3. positon

Flex&Grid

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Flex

www.ruanyifeng.com/blog/2015/0…

• flex-direction

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap

  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方

• flex-flow

  属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

  flex-flow: <flex-direction> || <flex-wrap>;
  

• justify-content

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• align-items

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

• align-content

  ​ 对于只有一行的 flex 元素，align-content 是没有效果的

  • flex-start：与交叉轴的起点对齐。

  • flex-end：与交叉轴的终点对齐。

  • center：与交叉轴的中点对齐。

  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  • stretch（默认值）：轴线占满整个交叉轴。

    align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

项目的属性

• order

  顺序

• flex-grow

  属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  如果所有项目的flex-grow属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink

  缩小比例，默认为 1，即如果空间不足，该项目将缩小。

  如果一个项目的flex-shrink属性为 0，其他项目都为 1，则空间不足时，前者不缩小。(不缩放，不会换行)

• flex-basis 分配剩余空间之前，项目的占据的大小

  • flex-basis: <length> | auto;
    

• flex

  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  flex 不同取值对应的情况：

  1. flex 取值为 none，则计算值为 0 0 auto；
  2. flex 取值为 auto，则计算值为 1 1 auto。
  3. flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%。
  4. flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1。
  5. flex 取值为两个非负 数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%。
  6. flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1。

• align-self

  • 该属性可能取 6 个值，除了 auto，其他都与 align-items 属性完全一致。

  •   auto | flex-start | flex-end | center | baseline | stretch;
    

CSS3 响应式布局： @media (min/max-width:***) @font-face

块级元素

1.行内元素：不独占一行，不能设置宽高 2.块级元素：独占一行，能设置宽高 3.行内块元素：不独占一行，但可以设置宽高

box-sizing

• content-box 是默认值。如果你设置一个元素的宽为 100px，不包括 padding，border，margin。
• border-box 宽带包括 padding，border，不包括 margin。

box-shadow

/_ x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 _/ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

居中

margin:0 auto 是用于 block 的，无法用于 inline-block。

inline-block 要居中就更简单了，只需要父级元素设置 text-align:center;

Grid

grid-template-columns属性定义每一列的列宽

grid-template-rows属性定义每一行的行高

除了使用绝对单位，也可以使用百分比。

repeat(3,33.3%) # 33.3% 33.3% 33.3%
repeat(3,10px 20px) # 10px 20px 10px 20px
repeat(auto-fill,100px) #每列宽度100px，然后自动填充，直到容器不能放置更多的列
fr # 占比
minmax(100px, 1fr) # 最小100px 最大1fr
auto # 浏览器自己决定
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; # 网格线命名

间隔

column-gap
row-gap
gap: <row-gap> <column-gap>

grid-template-areas

grid-template-areas:
  'a b c'
  'd e f'
  'g h i';

grid-auto-flow

grid-auto-flow: column | row | row dense(紧密排列);

justify-items align-items place-items

设置单元格内容的水平位置

place-items: <align-items> <justify-items>;

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

justify-content align-content place-content

是整个 grid 在父容器里面的水平位置

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>;

space-around 和 space-evently 的区别

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

space-evently：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

grid-template 属性 grid 属性

grid-template简写

grid-template-columns

grid-template-rows

grid-template-areas

grid属性简写

grid-template-rows

grid-template-columns

grid-template-areas、

grid-auto-rows

grid-auto-columns

grid-auto-flow

项目属性

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线

.item-1 {
  grid-column-start: header-start; # 指定为网格线的名字。
  grid-column-end:  span 2;;# 表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
}

grid-column grid-row

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

grid-area

.item-1 {
  grid-area: e; # 指定项目放在哪一个区域。
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

justify-self align-self place-self

设置单元格内容的水平位置

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  <align-self> <justify-self>;
}