理解CSS | 青训营笔记

s8x
73 阅读3分钟

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

CSS基础

CSS概念与作用

  • 层叠样式表(Cascading Style Sheets)
  • 作用 --- 定义页面元素的样式
    • 设置字体和颜色
    • 设置位置与大小
    • 添加动画效果

基础代码

h1{
	color: white;
    font-size: 14px;
}

其中

h1是选择器

color、font-size是属性

white、14px是属性值

属性和属性值在一起称作声明

CSS的使用方法

  • 外联（推荐）

    <link rel="stylesheet" href="/assets/syle.css">

  • 嵌入（放在head中）

    <style>
	li { margin: 0; list-style: none; }
	p { margin: lem 0; }
</style>

  • 内联（不太推荐）

<p style="margin:lem 0">Example Content</p>

CSS如何工作

image.png

选择器

  • 找出页面中的元素
  • 选择器组
    • 多个标签用逗号隔开
  • 选择元素方法
    • 标签名
    • 类名
    • id
    • 属性
    • DOM树中位置
  • 通配选择器
    • 用 *
    • 可以匹配所有标签
  • 标签选择器
  • id选择器
    • 在id前加#
    • id值唯一
  • 类选择器
    • 在class前加.
    • 可多出现
  • 属性选择器
    • 很多样
    • []

伪类

  • 不基于标签和属性定位元素
  • 种类
    • 状态伪类
    • 结构性伪类
  • 状态伪类
    • 特定状态
      • 用户交互状态
      • 是否访问
      • 是否被聚焦
      • 是否活跃
  • 结构性伪类
    • DOM结点在DOM树中出现位置

组合

image.png

颜色

  • 表示方法
    • rgb(1, 1, 1)
    • #8fac87 十六进制
  • 三特征
    • 色相
    • 饱和度（鲜艳）
    • 亮度
  • 不透明度
    • 1不透明
    • 0透明

字体

  • 属性
    • font-family
  • 可以指定多个字体，防止浏览器无某种字体
  • 通用字体组
    • image.png
  • 英文字体放在中文字体前
  • 可以用web font从指定网站下载字体使用
  • 大小
    • font-size
  • 效果
    • 斜体 font-style
    • 子重 font-weight
    • 行高 line-height

调试CSS

  • 在DOM选择元素，就可以看到样式

CSS深入

CSS 选择器的特异度

  • 特殊程度
  • 计算方法
    • id > 类 > 标签
  • 可以用来覆盖默认样式

继承

  • 某些元素会自动继承其父元素的计算值，除非显式指定一个值
  • 有些元素不可继承，可以指定为inherit即可。
  • 初始值
    • 可以用initial将属性设为初始值

CSS求值过程

image.png

image.png

image.png

布局

  • 确定内容大小和位置的算法

  • 依据元素、容器、兄弟节点和内容

  • 相关技术

    • 常规流
      • 行级
      • 块级
      • 表格布局
      • FlexBox
      • Grid
    • 浮动
    • 绝对定位

  • 盒子

image.png

  • 长
  • 宽
  • 内边距
  • 边框
  • 外边距
  • box-sizing: border-box 包含边框
  • 溢出内容用overflow

CSS盒模型

行级

  • 特点
    • 可以和其他行级盒子一起放在一行或拆开成多行
    • 盒模型中width、weight不适用
  • 行级元素
    • 生成行级盒子
    • 内容分散在多个行盒中
    • span、em、strong、cite、code等
    • display：inline
  • 排版上下文
    • Inline Formatting Context(IFC)
    • 只包含行级盒子的容器会创建一个IFC
    • 排版规则
      • 盒子在一行内水平摆放
      • 一行放不下时，换行显示
      • text-align 决定一行内盒子的水平对齐
      • vertical-align 决定一个盒子在行内的垂直对齐
      • 避开浮动元素

块级

  • 特点
    • 不和其他盒子并列摆放
    • 适用于所有盒模型属性
  • 块级元素
    • 生成块级盒子
    • body、article、div、main、section、h1-6、p、ul、li等
    • display：block
  • 排版上下文
    • Block Formatting Context(BFC)
    • 某些容器会创建一个BFC
      • 根元素
      • 浮动、绝对定位、inline-block
      • Flex子项和Grid子项
      • overflow值不是visible的块盒
      • display：flow-root；
    • 排版规则
      • 盒子从上到下摆放
      • 垂直margin合并
      • BFC内盒子的margin不会与外面的合并
      • BFC不会和浮动元素重叠

Flex Box

  • 一种新的排版上下文
  • 控制子级盒子的
    • 摆放流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

Grid

  • 二维划分网格去排版
avatar
文章
阅读
粉丝