CSS食用之匙 ｜ 青训营

方生1
86 阅读3分钟

CSS食用之匙 ｜ 青训营

文章简介

css可以为xml类的文档提供样式，前端编程中通常使用CSS来为页面编辑样式，适当的编写css 可以使得枯燥的web拥有炫酷吸引眼球的效果，极大的增加web可读性与信息阅读感受 ，编写CSS需要一定美学基础也需要一定代码基础

CSS引入方式

  • 外链
    • 使用 HTML的< link > 标签 引入css
  • 嵌入
    • 使用 HTML的< style > 标签 引入css
  • 内联
    • 使用 HTML标签属性引入css

CSS渲染机制

浏览器(客户端容器)从本地或云端将HTML加载，完成编译成DOM树，在加载DOM树前将CSS进行编译求值，在加载DOM后将样式添加到相应节点，随后渲染文档

CSS 选择器

  • 标签名，类名，id
    • 根据HTML 标签名 类，id选择器进行选择
  • 属性
  • DOM树中的位置
  • 伪类
    • 状态性伪类
      • link hover active foucs
    • 结构性伪类
      • first || last-child

CSS 组合

  1. 直接组合
  • AB
    • 同时满足
  1. 后代组合
  • A B
    • if b extern a than selected
  1. 亲子组合
  • section > p
    • 选中B如果是A的子元素
  1. 兄弟组合
  • h2~p
    • if 在A后且同级 则选中
  1. 相邻选择器
  • A +B
    • 选中B 如果紧跟在A后

CSS 颜色

  • RGB
  • HSL

CSS font-family

  • 字体族
  • font-size
    • 字体大小
  • font-weight
    • 字体字重
  • line-height
    • 字体行高
  • line-space
    • 文字边距

CSS计算优先级

  • 特异度
    • 特异度越高优先级越高，高特异覆盖低特异
  • 继承
    • 子标签继承父级标签样式

CSS 求值过程

加载DOM树 根据选择器匹配，属性有效，筛选节点属性 对声明属性进行层叠，无则继承或初始值，然后将相对的计算值转换为绝对的计算值，随后将小数的计算值，转换为整数的使用值

CSS布局

  • 常规流
    • 盒模型
      • width:长度，百分数，auto ，容器有高度百分数才有效果
      • padding 内容距边框的距离
      • border 颜色 粗细 四个方向
      • margin 外边距 距父组件的距离 四个方向调节
      • overflow 管理超出的内容
    • 块级
      • display:block
      • Block Formatting Context
        • 根元素
        • 浮动，绝对定位，inline-block
        • Flex子项和Grid子项
        • overflow 值
      • 盒子从上到下摆放
      • 垂直margin合并
      • BFC 内盒子的margin不会与外面的合并
      • BFC不会和浮动元素重叠
    • 行级
      • 盒模型宽高不受用
      • display：inline
      • Inline Formatting Context
        • 盒子在一行内水平排放
        • 一行放不下，换行显示
        • text-aligin 决定一行内盒子的水平对齐
        • vertical-align 决定一个盒子在行内的垂直对齐
        • 避开浮动（float）元素
    • FlexBox
      • 摆放的流向
      • 盒子顺序
      • 盒子宽度和高度
      • 水平和垂直方向的对齐
      • 是否允许折行
    • justify-content 主轴对齐（右）
    • align-item
    • flex-grew 按比例分配长宽
    • Grid布局
      • 二维的网格
  • 浮动
    • 实现环绕效果
  • 定位
    • relative
avatar
文章
阅读
粉丝