基础知识

选择器 #

标签选择器、类选择器、id选择器

tag {
  标签选择器
}
.class {
  类选择器
}
#id {
  ID 选择器
}

布局 #

盒子模型（block） #

属性

  • margin
  • border
  • padding
  • content

display: block; inline; inline-flex; flex;

标准盒模型和替代盒模型

box-sizing: content-box; border-box;

弹性盒子布局（flexbox） # 

#parent {
  	display: flex;
    flex-flow: column wrap; /*(direction+wrap)*/
    flex-wrap: nowrap; /* wrap; wrap-reverse; */
    flex-direction: row; /* column; row-reverse; column-reverse; */
    align-items: flex-start；
    align-content: flex-start；
    justify-content: flex-start；
    justify-items: flex-start；
}

#child {
    order: 1; /* 默认为 0 */
    align-self: flex-start; /* flex-end;center; */
}

练习游戏

  1. http://www.flexboxdefense.com/
  2. https://flexboxfroggy.com/

文档：MDN文档

属性：

  1. justify-content（“横向”，取决于flex-direction）
    1. flex-start
    2. flex-end
    3. center
    4. space-between
    5. space-around
  2. align-items（“纵向”）
    1. flex-start
    2. flex-end
    3. center
  3. flex-direction
    1. row（默认）
    2. row-reverse
    3. column
    4. column-reverse
  4. align-self（子元素）
    1. flex-start
    2. flex-end
    3. center
  5. order（子元素）
    1. 可选 0，1，2，3 etc
  6. align-content
    1. 只适用多行的flex容器，也就是说子项不止一行时该属性才有效果
  7. flex-wrap
    1. 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
    2. nowrap（默认）
    3. wrap
    4. wrap-reverse

网格布局（grid） #

练习游戏：

  1. https://cssgridgarden.com/

属性：

  1. grid-template-columns
  2. grid-template-rows
  3. grid-column-start（子元素）
  4. grid-column-end（子元素）
  5. grid-column（等价于 3+4）
  6. grid-row-start（子元素）
  7. grid-row-end（子元素）
  8. grid-row（6+7）
  9. grid-area（等价于 row-start/column-start/row-end/column-end）
  10. order（元素间的排序）
  11. grid-template（1+2），中间要有斜线。

举例：

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  grid-template-columns: repeat(1, 12.5%);
  grid-template-columns: 1fr 5fr; /*(fractional 分数)*/
  grid-template: 60% 40% / 200px;
}

#watch {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-column: 1/2;
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-area: 1 / 4 / 6 / 5;
}

大于号、加号、取代符号 #

大于符号(>) #

大于符号就是选择底下的直接元素

例如：

<div class="box">
    <p>001</p>
    <div>
        <p>002</p>
        <p>003</p>
    </div>
    <p>004</p>
</div>

.box p{ 
   /** 表示 class 为 box 的 div 下所有的 p 标签即内容为 001、002、003、004的p标签/ 
}

.box > p {
    /** 表示 class 为 box 的div 下的直接的子元素 p 即内容为 001、004 的p标签/
}

加号(+) #

加号表示后方同层级的第一个元素

例如：

<div>
    <p>001</p>
    <div class="box">
        <p>002</p>
    </div>
    <p>003</p>
    <p>004</p>
</div>

.box + p{
    /** 表示 class 为 box 的 div 后方同层级的第一个 p 元素即内容为 003 的 p 标签/
}

取代符号(~) #

表示后方同层级的全部元素

例如：

<div>
    <p>001</p>
    <div class="box">
        <p>002</p>
    </div>
    <p>003</p>
    <p>004</p>
</div>

.box ~ p{
    /** 表示 class 为 box 的 div 后方同层级的所有 p 元素即内容为 003、004 的 p 标签/
}