css详解

CSS 学习

层叠与继承

层叠

当应用两条同级别的规则到一个元素的时候，写在后面的规则会全部生效，也会替换掉前面定义过的属性
优先级

浏览器会根据优先级来选择使用那个规则。例如：元素选择器不够具体，优先级就会低于类选择器
- 计算规则
  - 直接声明在 style 属性，得分为千
  - ID 选择器，得分为百
  - 类选择器，属性选择器或者伪类，得分为十
  - 元素选择器或者伪元素选择器，得分为一
  - * + > ~ :not 不会影响优先级
继承

有些属性是可以继承的，有些则不能。例如，color 和 font-family 会被子元素继承，但是 width,margin,padding 和 border 不会被继承
控制继承
- inherit
- initial
- unset
重置属性值

使用 all 属性可以重置几乎所有属性，值可以是 inherit, initial,
unset, or revert
优先级更改

使用!import 将会修改属性的优先级

CSS 选择器
- 选择器列表
  
  通过，隔开
- 选择器种类
  - 类型、类和 ID 选择器
  - 标签属性选择器
    
    a[title]{ }
    
    a[href=”https://example.com"\]{ }
  - 伪类与伪元素
  - 运算符
  - 全局选择器 *
- 属性选择器
  - 值选择器
    
    a[title]
    
    匹配带有名为 title 属性的元素
    
    a[herf=’https://example.com'\]
    
    匹配带有名为 href 属性的元素，其值为https://example.com
    
    p[class~=’special’]
    
    匹配带有名为 class 属性的元素，其值至少有一个和 special 匹配
    
    div[lang|=’zh’]
    
    匹配带有名为 lang 属性的元素，其值可以为 zh，或者以 zh 开头
  - 子字符串匹配选择器
    
    li[class^=’box-‘]
    
    匹配以 box-开头的属性元素
    
    li[class$=’-box’]
    
    匹配以-box 结尾的属性元素
    
    li[class*=’box’]
    
    匹配任意包含 box 的属性元素
  - 大小写敏感通过 i 关键字
    
    li[class^=’a’ i]
伪类和伪元素

常用列表见
链接
- 简单伪类
  - :first-child
  - :last-child
  - :only-child
  - :invalid / :valid
- 用户行为伪类
  - :hover
  - :focus
  - :visited
  - :link
- 伪元素
  - ::first-line
  - ::before
    
    通常配合 content 属性使用，用以插入内容
  - ::after
关系选择器
- 后代选择器
  
  使用空格分隔，例如 body article p
- 子代关系选择器
  
  使用>分隔，例如 ul > li{}，只会选中 ul 的直接子代中的 li 元素
- 邻接兄弟选择器
  
  使用+分隔，例如 a + b，只会选中某个前一个兄弟节点是 a 的 b 元素
- 通用兄弟选择器
  
  使用~分隔，例如 p ~ img，选中所有 p 元素之后的 img 元素
盒模型
- 块盒子(Block box)
  
  例如：常见的 h1, p 标签
  - 会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，绝大多数下会和父容器一样宽
  - 每个块盒子都会换行
  - width 和 height 属性可以发挥作用
  - 内边距（padding）, 外边距（margin）和边框（border）
    会将其他元素从当前盒子周围“推开”
- 内联盒子(Inline box)
  
  例如：常见的 a,span,em,strong 标签
  - 内联盒子不会产生换行
  - width 和 height 属性没有作用
  - 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
    inline 状态的盒子推开
  - 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline
    状态的盒子推开
- 盒模型的组成
  - Content box
  - Padding box
  - Border box
  - Margin box
- 外边距折叠
  
  如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小
- 显示类型
  - display:block
  - display:inline
  - display:flex
  - display:inline-flex
  - display:inline-block
弹性盒子
- 方向
  - flex-direction: column
  - flex-direction:row
  - flex-direction:row-reverse
  - flex-direction:column-reverse
- 换行
  - flex-wrap:wrap
  - flex: 200px
    
    意味每个子元素宽度至少是 200px
- flex-flow: row wrap
  
  方向和换行的缩写
- 动态尺寸
  
  flex: 1, flex: 2 表示子元素的空间占比
- 水平和垂直对齐
  
  div{ display: flex; align-item: center; justify-content:
  space-around}
  - align-item
    
    控制子项在交叉轴上的位置
  - justify-content
    
    控制子项在主轴上的位置，space-around 可以设置子项沿主轴均匀分布，space-between 也是均匀分布，但是不会在两端留下空间
- 排序
  
  通过设置 order 来调整顺序，order 值越大，显示更靠后
处理不同方向的文本

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions
溢出
- overflow 属性
  - hidden
  - scorll
  - overflow-y:scorll
  - overlow-x
  - auto
- 尽量在开发阶段就识别到溢出问题
值与单位
- 数值
  - integer
  - number
  - dimension
  - percentage
- 长度
  - 绝对长度
    
    cm
    
    mm
    
    Q
    
    四分之一毫米
    
    in
    
    pc
    
    pt
    
    点
    
    px
    
    像素
  - 相对长度
    
    em
    
    在 font-size 中使用的是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
    
    ex
    
    字符”x”的高度
    
    ch
    
    字符 0 的宽度
    
    rem
    
    根元素的字体大小
    
    lh
    
    元素的 line-height
    
    vw
    
    视窗宽度的 1%
    
    vh
    
    视窗高度的 1%
    
    vmin
    
    视窗较小尺寸的 1%
    
    vmax
    
    视窗较大尺寸的 1%
- 颜色
  - 十六进制 RGB
    
    #02798b
  - RGB 和 RGBA
    
    rgb(2, 121, 139), rgba(2, 121, 139,.3)
  - HSL 和 HSLA 的值
- 图片
- 位置
- 字符串和标识符
- 函数