HDUHELP FE第二次例会大纲

Emmet 语法

html

• div -> <div></div>
• div+p -> <div></div><p></p>
• div.app -> <div class="app"></div>
• div#app -> <div id="app></div>
• img[src="./images/drop.jpg"] -> <img src="./images/drop.jpg" alt="">
• div*8 ->生成 8 个 div
• div*8{文字} -> 生成 8 个内容为'文字'的 div
• div*8{} -> 生成8个div，内容依次从1到8(``是自增符号)
• div>li -> <div><li></li></div>

css

• bgc -> background-color:
• ti -> text-indent:
• w100p -> width:100%
• w100p+h100p -> width:100%;height:100%;
• jcc -> justify-content: center;
• aic -> align-items: center;
• df -> display: flex;
• poa -> position: absolute;

标签语义化

• https://www.jianshu.com/p/8ffb01ce77e4 代码结构清晰，方便阅读，有利于团队合作开发；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

css 选择器

常见选择器

• class 选择器 由于 class 可以同时为多个元素命名，因此常用于设置重复样式

htmlCopy
<style>
  .demo {
    /* css */
  }
</style>
<div class="demo"></div>

• id 选择器

htmlCopy
id仅能为一个元素命名。可以使用id来特殊标识某个模块，然后定位其后代元素来为其后代设置特别的样式
<style>
  #demo div {
    /* css */
  }
</style>
<div id="demo">
  <div></div>
</div>

• 通配符选择器* 通配符选择器用于选中所有元素，为之设置初始样式 因为不同浏览器对元素的默认样式设置有差别，所以会用*来重置元素的默认样式

htmlCopy
<style>
  * {
    /* css */
  }
</style>
<div class="demo"></div>

• 子元素选择器> 仅作用于最近一层的后代元素

htmlCopy
<style>
  .demo > div {
    color: black;
  }
</style>
<div class="demo">
  <div>
    color会作用在这一层
    <div>样式不会在这层生效</div>
  </div>
</div>

• 后代元素选择器 选中所有内层嵌套的元素

htmlCopy
<style>
  .demo div {
    color: black;
  }
</style>
<div class="demo">
  <div>
    color会作用在这一层
    <div>样式在这层也生效</div>
  </div>
</div>

伪类

锚伪类

1. a:link 未访问的链接样式选择器
2. a:visited 已访问的连接样式选择器
3. a:hover 鼠标移动到链接时的样式选择器
4. a:active 选定的链接的样式选择器

focus

cssCopy
input:focus {
  background-color: yellow;
}

结构伪类

• 常见结构伪类 | 选择符 | | | ---------------- | --------------------------------------- | | E:first-child | 若父元素中第一个子元素为类型 E，则匹配 | | E:last-child | 若父元素中最后一个子元素为类型 E，则匹配 | | E:nth-child(n) | 若父元素中第 n 个子元素为类型 E，则匹配 | | E:first-of-type | 匹配父元素第一个类型为 E 的元素 | | E:last-of-type | 匹配父元素最后一个类型为 E 的元素 | | E:nth-of-type(n) | 匹配父元素第 n 个类型为 E 的元素 |

• nth-of-type(n)和 nth-child(n)的区别 nth-of-type(n)是将所有符合指定元素类别的子元素选出来，并选中其中的第 n 个 nth-child(n)是将所有子元素选出来并选中其中第 n 个子元素。若此子元素与指定元素类别不同，则不会选中该元素

htmlCopy
<style>
  #app div:nth-of-type(1) {
    /* 会作用在第一个子代div上 */
    color: red;
  }
  #app div:nth-child(1) {
    /* 由于#app第一个子元素是p，所以该样式不生效 */
    color: blue;
  }
</style>
<div id="app">
  <p>1</p>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

伪元素(::before/::after)

htmlCopy
<style>
  div::before {
    content: 'before';
  }
  div::after {
    content: 'after';
  }
</style>
<div>main</div>
<!-- 显示效果等同于<div>before main after</div> -->

css 三大特性

层叠性

htmlCopy
<style>
  .app {
    background-color: #fff;
  }
  .app {
    /* 优先显示该样式 */
    background-color: red;
  }
</style>
<div class="app"></div>

继承性

htmlCopy
<style>
  .app {
    font-size: 1.5rem;
  }
</style>
<div class="app">
  <!-- demo会继承1.5rem的字号 -->
  <div class="demo"></div>
</div>

优先级

Tips

1. 继承的权重是 0。如果该元素没被直接选中，不管父元素选择器作用到父元素的权重多高，子元素继承的样式权重永远是(0, 0, 0, 0）

htmlCopy
<style>
  #father {
    color: red !important;
  }
  p {
    color: blue;
  }
</style>
<div id="father">
  <p>这里的颜色会显示blue而不是red</p>
</div>

2. 复合选择器会有权重叠加，但不会进位

htmlCopy
<style>
  /* 11个class选择器叠加，权重为(0,0,11,0)，不会进位为(0,1,1,0) */
  .a.b.c.d.e.f.g.h.i.j.k {
    color: red;
  }
  /* 1个id选择器，权重为(0,1,0,0) */
  #app {
    color: black;
  }
</style>
<div class="a b c d e f g h i j k" id="app">
  这里是id选择器指定的样式生效，显示的字体颜色为black
</div>

元素的显示模式

块级元素

• 特点

1. 独占一行，宽度默认为父级元素宽度的 100%
2. 可以控制height/width/margin/padding

• 部分块级元素列举 <h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>

行内元素

• 特点

1. 相邻行内/行内块元素排列在一行上，并不会独占一行，默认宽高按元素内容
2. 不可以直接设置height/width，除非将其display属性设置为inline-block或block

• 部分行内元素列举 <a>/<strong>/<b>/<em>/<i>/<del>/<s>/<ins>/<u>/<span>

行内块元素

• 特点

1. 相邻行内/行内块元素排列在一行上，并不会独占一行，默认宽高按元素内容
2. 可以控制height/width/margin/padding

• 部分行内块元素列举 <img/>/<input/>/<td>

盒子模型

content

padding

border

margin

定位

absolute

1. 元素具有top/left/right/bottom属性 该元素会以最近一级设置了定位的父元素为基准，设置其边界与定位父元素边界的距离
2. 元素没有top/left/right/bottom属性 该元素在文档中所处的位置，与原来没有设置absolute属性时的文档位置相同。 此时如果想对元素位置进行偏移，可以利用margin-left和margin-top模拟left和top的偏移量

relative

fixed

布局

float

rem / em / vh / vw / %单位的使用

• rem rem 是相对于根元素字体大小的单位
• em em 是相对于当前对象内文本的字体尺寸
• vh 1vh 指屏幕高度的百分之一
• vw 1vw 指屏幕宽度的百分之一

flex

htmlCopy
<style>
  /* 作用在父元素上的属性 */
  #app {
    /* 声明该容器布局为flex */
    display: flex;
    /* 进行一个布局方向的定义。默认值为row。row为按列正序排布，column为按行正序排布；row-reverse为按列逆序排布 */
    flex-direction: column;
    /* #app子元素整体在水平方向上的排布位置 */
    justify-content: space-between;
    /* #app所有子元素在各自空间范围内竖直方向上的排布方式 */
    align-items: center;
  }
  /* 作用在子元素上的属性 */
  #app > div:first-child {
    /* 单独设置该元素在水平方向上的排布方式 */
    justify-self: center;
    /* 单独设置该元素在竖直方向上的排布方式 */
    align-self: center;
  }
</style>
<div id="app">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

grid

htmlCopy
<style>
  #app {
    /* 声明该容器的布局方式为grid */
    display: grid;
    /* 设置该容器水平方向上的格子数，并且同时设置了每行格子的宽度 */
    grid-template-columns: repeat(3, 100px);
    /* 设置该容器竖直方向上的格子数，并且同时设置了每列格子的高度 */
    grid-template-rows: repeat(2, 200px);
    /* 设置栅格整体的对齐方式，与flex一样 */
    justify-content: center;
    /* 设置栅格所有内部元素在竖直方向上的对齐方式 */
    align-items: center;
  }
  #app > div:first-child {
    /* 设置该小栅格在水平方向上的位置范围，1/span 3是指“栅格从第一条线开始偏移三个格子”为该元素的位置 */
    grid-column: 1 / span 3;
    /* 设置该小栅格在竖直方向上的位置范围。2/3是指“栅格从第二条线到第三条线之间的格子”为该元素的位置 */
    grid-row: 2/3;
    /* 单独设置该元素在水平方向上的排布方式 */
    justify-self: center;
    /* 单独设置该元素在竖直方向上的排布方式 */
    align-self: center;
  }
</style>
<div id="app">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>