认识与深入CSS ｜ 青训营笔记

日暮里的猫
177 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天，老师带我们认识与深入了CSS知识体系，作为前端开发的三大基石之一，它的作用是毋庸置疑的。

一、认识CSS

image-20220725101028323.png

1 使用方式

  • 外链
  • 嵌入
  • 内联：不推荐

2 CSS工作原理⭐

image-20220725101432106.png

3 CSS选择器

  1. 通配选择器*
  2. 标签选择器h1
  3. id选择器
    • 唯一性
    • #id
  4. 类选择器
    • .done
  5. 属性选择器
    • input[type="password"]:指定对type属性值为password的input输入框做样式修改
    • a[href^="#"]: 指定对以#开头的a链接做样式修改
    • a[href$=".jpg"]: 指定对以$结尾的a链接做样式修改
    • image-20220725102010871.png
  6. 伪类选择器
    • a:link a:visted a:hover a:active
    • :focus
    • li:first-child li:last-child li:nth-child(2)
  7. 伪元素选择器
    • ::
    • 和伪类选择器的区别
      • 伪类选择器可以有多个，而伪元素选择器只能有一个
      • 伪类选择器是基于DOM的选择器，不会创建新的元素；而伪元素选择器会创建新的元素
  8. 选择器组合方式
    • 开发中常用组合选择器修改样式 image-20220725102725857.png

4 颜色设置

  • rgb(r, g, b)：取值从0-255，都为255就是白色，都为0就是黑色
  • #fff：使用16进制表示，例如左侧就是设置三原色的值都为16
  • HSL
    • image-20220725103756227.png
    • image-20220725103908961.png
  • alpha
    • rgba(255, 0, 0, 0.3)：同rgb，增加了不透明度alpha，为1时不透明，为0时透明
    • hsla(0, 100%, 50%, 0.3)：同hsl
  • 单词颜色image-20220725103956078.png

5 字体设置

  1. 字体样式font-family

    • 通用字体族image-20220725104510261.png
    • Web Fontsimage-20220725104655045.png

  2. 字体大小font-size

    • 关键字
      • small
      • medium
      • large
    • 长度
      • px
      • em
    • 百分数
      • 相对于父元素字体大小

  3. font-style

    • italic斜体
    • normal默认非斜体

  4. font-weight

    • 取值100到900，默认是400
    • 取值normal或者bold

  5. line-height

    • 定义：两行文字的基准线之间的距离
    • 设置为数字：表示字体大小的多少倍

  6. letter-spacing

  7. word-spacing

  8. white-space

    1. normal：默认，多个空格只保留一个
    2. nowrap：强制不换行
    3. pre：有几个空格，就保留几个空格
    4. pre-line：合并空格，保留换行

如何简洁地设置字体？

image-20220725110030721.png

二、深入CSS

1 选择器特异度

  • id>（伪）类 >标签
  • 多条规则作用于相同的元素，涉及到选择器优先级问题

2 继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

一般来说，CSS里和文字相关的属性都是可以继承的，和盒模型相关的属性都是不可以继承的

CSS中，每个属性都有一个初始值

  • background-color的初始值为transparent
  • margin-left的初始值为0
  • 可以使用initial关键字将属性值显示的重置为初始值

3 CSS求值过程⭐

  1. filtering
  2. cascading
  3. defaulting
  4. resolving
  5. formatting
  6. constraining image-20220725143922371-16587311627761.png

image-20220725144545952.png

4 布局（Layout）

4-1 布局基础

  • 布局的定义：确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算
  • 分类
    • image-20220725145546323.png
    • 常规流：基于块级元素和行级元素
      • image-20220725152434140.png
      • 块级block level box：不和其他盒子并列摆放，适用于所有的盒模型属性
      • 行级inline level box：和其他行级盒子放在一起或者拆开成为多行，盒模型中的width、height不适用
      • display属性
        • block：块级盒子，可以设置宽高、作为一个整体不会被拆散为多行
        • inline：行级盒子，可以和其他行级元素并排摆放
        • inline-block：本身是行级，可以和其他行级元素并排摆放；但同时也具有块级元素的特点，例如可以设置宽高、作为一个整体不会被拆散为多行
        • none：排版时被忽略
    • 浮动流
    • 绝对定位：覆盖在常规流的上面，而不会影响常规流
  • 盒模型（content-box）
    • image-20220725150245194.png
    • width
      • 指定content box 宽度
      • 取值为长度、百分数、auto
      • auto由浏览器根据其他属性确定
      • 百分数相对于容器的content box宽度
    • height
      • 指定content box 高度
      • 取值为长度、百分数、auto
      • auto取值由内容计算得来
      • 百分数相对于容器的content box高度
      • 容器父级有指定的高度时，百分数才生效
    • padding
      • 指定元素四个方向的内边距
      • 百分数相对于容器宽度
    • margin
      • 指定元素四个方向的外边距
      • 百分数相对于容器宽度
      • 设置margin-left: auto; margin-right: auto相当于水平居中的效果
      • margin collapse
        • margin在垂直方向会出现边距合并的现象
    • border
      • border-width
      • border-style
      • border-color
  • 盒模型（border-box）
    • image-20220725151822667.png
    • overflow
      • visible：不会触发BFC
      • hidden
      • scroll

4-2 排版方式⭐

1. IFC（Inline Formatting Context）

  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动元素（float）

2. BFC（Block Formatting Context）

  1. 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root
  2. BFC内的排版规则
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
      • 案例：阻止垂直margin合并的方法，将两个盒子分别置于不同的BFC容器中
    • BFC不会和浮动元素重叠
  3. BFC的作用
    1. 解决外边距折叠问题
    2. 制作两栏布局
    3. 清除元素内部的浮动
  4. BFC的问题
    1. 一个产生了BFC的盒子，内部元素浮动的话不就违背了BFC内部从上向下依次摆放的原则吗

3. Flex Box

  • 一种新的排版上下文display:flex
  • 可以控制子级盒子的
    • 摆放流向
    • 摆放顺序
    • 盒子的宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行
  • 引入主轴和侧轴的概念
    1. 主轴
      • justify-content
        • image-20220725162726915.png
        • 该属性用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
        • flex-start
        • flex-end
        • space-between
        • space-around
        • space-evenly
        • center
    2. 侧轴
      • align-items
        • image-20220725162708384.png
        • 该属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
        • flex-start
        • flex-end
        • stretch
        • baseline
        • center
      • align-self
        • image-20220725164621153.png
        • 可以单独为flex容器内部的指定元素设置align-self属性，使指定元素拥有不同的排版方式
    3. Flexibility
      • 可以设置子项的弹性：当容器有剩余空间时，会伸展；空间不足时，会收缩
      • flex-grow有剩余空间时的伸展能力，value是number类型
      • flex-shrink容器空间不足时收缩的能力
      • flex-basis没有伸缩或收缩时的基础长度
    4. flex-direction
      • row-reverse
      • column
      • column-reverse
    5. 缩写
      • image-20220725163601275.png

4. Grid

image-20220725164138530.png

  • display:grid使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网络
    • grid-template-columns: 30% 30% auto
    • grid-template-rows: 100px auto
  • 设置每一个子项占哪些行/列
  • grid-area: 1/1/3/3
  • image-20220725230344337.png

5. Float (less use)

文字环绕效果

image-20220725230718063.png

6. position属性

  1. static : 默认值，非定位元素
  2. relative：相对定位，相对自身原本位置偏移，不脱离文档流
    • 在常规流内布局
    • 相对于自己本应该在的位置进行偏移
    • 使用top/left/bottom/right设置偏移长度
    • 流内其他元素当它没有偏移时一样布局
  3. absolute：绝对定位，相对非static祖先元素定位（子绝父相）
    • 脱离常规流
    • 相对于最近的非static祖先定位
    • 不会对流内元素布局造成影响
  4. fixed：相对于视口绝对定位

5 学习建议

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习CSS的新特性
avatar
文章
阅读
粉丝