02.CSS ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天
该笔记为个人对课程的查漏补缺

1.选择器

1.1 标签 + 特定属性

  //对此type属性生效
  input[type="password"] {
    border-color: red;
  }
  //对以xx开头的href属性生效
  a[href^="#"] {
    color: blue
  }
  //以xx结尾的href属性生效
  a[href$=".jpg"] {
    color: blue
  }
<style/>

1.2 伪类选择器

• 状态 a:link(默认)、a:visited(已访问）、a:hover(鼠标移到)、a:active(鼠标点击)、:focus(鼠标选中时）
• 结构 :first-child(第一个子标签)、:last-child(最后一个子标签)

1.3 组合

2.关键属性

2.1 color（颜色）

• rgb、rgba、hsl

2.2 font（字体）

1. font-family: 逗号分隔开的多个值，一层一层匹配以防浏览器没有，最后是sans-serif等通用字体族
2. font-size:
   • 关键字：small、large..
   • 单位：px像素、em元素中文本大小、%父元素百分比
3. font-weight 粗细
4. line-height 行高

以上可放在font中

2.3 文本

1. white-space 处理空格等空白符
2. text-align

3.继承

1. 和盒模型相关的属性一般不可继承，例如width，使用inherit显式继承；文字相关的一般可继承
2. initial显式重置为初始值

4.布局（layout）

确定位置的内容和大小

4.1常规流

盒模型

1. 父级指明数值，子盒子百分比才生效
2. padding内边距；margin外边距；上右下左
3. margin collapse间距取两者大者
4. border、
5. box-sizing:
   • content-box（默认）:宽高指content
   • border-box：宽高包括padding、border
6. overflow 控制溢出
7. 行级VS块级

display：block、inline、inline-block、none、flex

Flex布局：
1.flex-direction

2.justify-content
3.align-items

4.设置弹性：

• flex-grow：数字表示对多余空间分配的比例
• flex-shrink：空间不够时进行收缩
• flex-basis一般不设置，表示不压缩不拉伸时的原始宽度

Grid布局
1.display：grid 2.grid-template-columns、.grid-template-rows划分行列网格 fr剩余空间分配单位

4.2浮动

4.3绝对定位

1.position：absolute