深入css | 青训营笔记

42 阅读4分钟

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

maiami.jpg 学习CSS进阶部分,进行查漏补缺

选择器权重

  • 内联 - 1000
  • id - 100
  • class - 10, 伪类 - 10,属性 - 10
  • 标签 - 1, 伪元素 - 1
  • 相邻兄弟选择器 - 0,子选择器 - 0,后代选择器 - 0,通配选择器 - 0

选择器特异度

特异度判定标准(按选择器权重理解)

#(id) -------- .(类、伪类) -------- E(元素、伪元素)

  1. #nav .list li a:link
  2. .hd ul .links a 1 2 如上述例子

(1)中 => id选择器数量为1,(伪)类选择器数量为2(.link, :link),(伪)元素选择器数量为2(li, a) ===> 特异度为 122

(2)中 => id选择器数量为0,(伪)类选择器数量为2(.hd, .links),(伪)元素选择器数量为2(ul, a) ===> 特异度为 22

END: 所以(1)的优先级高于(2)

CSS中可继承与不可继承属性

一、无继承性的属性

display:规定元素应该生成的框的类型
文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
盒子模型的属性:width、height、margin、border、padding
背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性:content、counter-reset、counter-increment
轮廓样式属性:outline-style、outline-width、outline-color、outline
页面样式属性:size、page-break-before、page-break-after
声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

字体系列属性
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
font-style:字体的风格
文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:单词之间的间距
letter-spacing:中文或者字母之间的间距
text-transform:控制文本大小写(就是uppercase、lowercase、capitalize这三个)
color:文本颜色
元素可见性
visibility:控制元素显示隐藏
列表布局属性
list-style:列表风格,包括list-style-type、list-style-image等
光标属性
cursor:光标显示为何种形态
对于不可继承的属性可以通过加入inherit进行显式继承

布局相关技术

布局分为:① 常规流 ② 浮动 ③ 绝对定位

常规流:行级、块级、表格布局、FlexBox、GridBox

一些场景: ① 默认情况下盒子为content-box(即width和height只代表content的高度),通常我们会设置成border-box ② margin使用auto值得时候,浏览器会对剩余部分进行平分 ③ margin collapse 会出现边距合并问题(高度塌陷)

IFC - Inline Formatting Context

只包含行级盒子的容器会创建一个IFC 盒子在一行内水平摆放 一行放不下时,会进行换行显示 text-align会决定一个盒子在行内的垂直对齐 避开浮动元素

BFC - Block Formatting Context

会创建BFC的情况:1. 根元素 2. 浮动、绝对定位、inline-block 3. Flex子项和Grid子项 4. overflow值不是visible的块盒 5. display: flow-root; 盒子从上到下摆放 垂直的margin会被合并 BFC内盒子不会与外面的合并 BFC不会与浮动元素重叠

Flex Box

一种新的排版上下文 可以控制子级盒子的:1. 摆放方向 2. 摆放顺序 3. 盒子宽度高度 4. 水平和垂直方向的对齐 5. 是否运行折行 常见的flex布局场景有:

  • 方向:flex-direction: row | row-reverse | column | column-reverse;
  • 主轴:justify-content: flex-start | flex-end | center | space-between | space-arount | space-evenly;
  • 交叉轴:align-items: flex-start | flex-end | center | stretch(默认就是填充满) | baseline;
  • 单个项目:align-self: auto | flex-start | flex-end | center | baseline | stretch;
  • 顺序:order: number;(越大越靠后)
  • Flexibility:flex-grow:有剩余空间时的伸展能力, flex-shrink:容器空间不足时收缩的能力, flex-basis:没有伸展或收缩时的基础长度;

Grid Box

display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列

float布局

应用场景逐渐变少

position属性

  • static 默认值,非定位元素
  • relative 相对于原本位置偏移,不脱离文档流
  • absolute 绝对定位,相对非static祖先元素定位,脱离常规流
  • fixed 相对于视口绝对定位
  • sticky 粘性定位,在视口内时为相对定位,超出视口则为fixed定位