基础知识

选择器 #

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

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

布局 #

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

盒子模型(block) #

属性

  • margin
  • border
  • padding
  • content

标准盒模型和替代盒模型

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 标签/
}

@font-face #