我的前端之路——CSS ｜ 青训营笔记

憨憨睡不醒啊
135 阅读5分钟

前端开发.png

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

CSS学习笔记

  • CSS是用来做什么的
  • CSS是如何参与页面构建的
  • CSS基本格式与使用方法
  • CSS中的选择器和选择器组
  • CSS中设置字体、颜色
  • CSS的继承
  • CSS的求值过程
  • CSS中的布局

CSS是用来做什么的

CSS作为前端三件套之一，主要负责定义页面元素的样式，e.g.设置字体和颜色、设置位置和大小、添加动画效果。CSS全称Cascading Style Sheets。

CSS是如何参与页面构建的

在讨论CSS在参与页面构建的构建，就不可避免的谈到解析，一个简简单单的DOM树来解释一下这个问题

截屏2023-01-18 18.26.10.png

CSS基本格式与使用方法

  • 基本格式
    • 选择器 Selector
      1. 找出页面中的元素，以便给他们设置样式
      2. 使用多种方式选择元素
        • 按照标签名、类名或id
        • 按照属性
        • 按照DOM树中的位置
    • 选择器 Prooerty
      1. 属性值 Value
      2. 声明 Declaration
  • 使用方法
    1. 外链
    2. 嵌入
    3. 内链

CSS中的选择器和选择器组

  • 选择器
    • 通配选择器
    • 标签选择器
    • ID选择器
      //一般ID值唯一
    • 类选择器
    • 属性选择器
  • 选择器组
组合
直接组合AB满足A同时满足Binput:focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A>B选中B，如果它是A的字元素section>p
  • 选择器特异度 Specificity

CSS中设置字体、颜色

  • 字体
  1. 通用字体族
通用字体族e.g.
Serif 衬线体Georgia、宋体
Sans-Serif 无衬线体Arial、Helvetica、黑体、微软雅黑
Cursive 手写体Caflisch Script、楷体
FantasyComic Sans MS、Papyrus
Monospace 等宽字体Consolas、Courier、中文字体
  1. Web Fonts
    1. 字体大小 font-size
      • 关键字 small、medium、large
      • 长度 px、em
      • 百分数 相对于父元素字体大小
    2. 字体样式
      • font-style
      • normal
      • italic
    3. 字重 font-weigh
      • 100
      • 200
      • 300
      • 400-normal
      • 500
      • 600
      • 700-bold
      • 800
      • 900
    4. 行高 line-height
    5. 空白符 white-space
      • normal 默认
      • nowrap 强制不换行
      • pre 保留所有
      • pre-wtap 保留空格
      • pre-line 合并空格，保留换行
  • 颜色
    1. RGB
    2. HSL
      • 色相 Hue
      • 饱和度 Saturation
      • 亮度 Lightness
    3. alpha 透明度

CSS中的继承

  1. 某些属性会自动继承其父元素的计算值，除非显式制定一个值
  2. 显示继承
    • 通过一个元素可以改变元素内所有的值
  3. 初始值
    • CSS中，每个属性都有一个初始值
      e.g.background-color的初始值为transparent； margin-left的初始值为0
    • 可以使用initial关键字显式重置为初始值
      e.g.background- color：initial

CSS中的求值过程

image.png

CSS中的布局

  1. 功能：确定内容的大小和位置的算法

  2. 计算方式：依据元素、容器、兄弟节点和内容等信息来计算

  3. 种类

    1. 常规流 Normal Flow

      • 范围
      1. 根元素、浮动和绝对定位的元素会脱离常规流
      2. 其他元素都在常规流之内（in-flow）
      3. 常规流中的盒子，在命中排版上下文中参与布局
      • 行级排版上下文
        1. Inline Formatting Context（IFC）
        2. 只包含行级盒子的容器会创建一个IFC
        3. IFC内的排版规则
          • 盒子在一行内水平放置
          • 一行放不下时，换行显示
          • text- align决定一行内盒子的水平对齐
          • vertical-align决定一个盒子在行内的垂直对齐
          • 避开浮动（float）元素
      • 块级排版上下文
        1. Block Formatting Context（BFC）
        2. 某些容器会创建一个BFC
          • 根源素
          • 浮动、绝对定位、哦吗；inline-block
          • Fiex子项和Grid子项
          • overflow值不是visible的块盒
          • display:flow-rool
        3. BFC内的排版规则
          • 盒子从上到下摆放
          • 垂直margin合并
          • BFC内盒子的margin不会与外面的合并
          • BFC不会和浮动元素重叠
      • Table排版上下文
      • Fiex排版上下文
      • Grid排版上下文

    2. float 浮动

    3. 绝对定位

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

  4. 盒模型

    • width

      1. 指定content box宽度
      2. 取值为长度、百分数、auto
      3. auto由浏览器根据其他属性确定
      4. 百分数相对于容器的content box宽度

    • height

      1. 指定content box高度、
      2. 取值为长度、百分数、auto
      3. auto取值由内容计算得来
      4. 百分数相对于容器的content box宽度
      5. 容器有指定的高度时，百分数才生效

    • padding

      1. 盒模型内边距
        image.png

      2. 指定元素四个方向的内边距

      3. 百分数相对于容器宽度

    • border

      1. 制定容器边框样式、粗细和颜色
      2. 三种属性
      • border- width
      • border-style
      • border-color
      1. 四个方向
      • border-top
      • border-right
      • border-bottom
      • border-left

    • margin

      1. 指定元素四个方向的外边距
      2. 取值可以是长度、百分数、auto
      3. 百分数相对于容器宽度
      4. 使用margin:auto水平居中
        • margin collapse 取两者中最大值

    • overflow

      1. visible
      • 展示
      1. hidden
      • 隐藏
      1. scroll
      • 滚动

好啦，以上就是憨憨的前端之旅的第二站————CSS，内容十分庞大的一个站点，当然学好CSS必然离不开充分利用MDN和W3C CSS规范；保持好奇心，善用浏览器的开发者工具；持续学习，因为CSS新特性还在不断出现。

avatar
文章
阅读
粉丝