css 学习笔记

CSS 入门学习

目录

• CSS 简介
• CSS 内容
• CSS 编写
• CSS 应用

CSS 简介

1. 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2. CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 层叠次序

浏览器缺省设置 << 外部样式表 << 内部样式表（位于 head 标签内部）<< 内联样式（在 HTML 元素内部）

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

CSS 选择器

1. id选择器(#myid)
2. 类选择器(.myclassName)
3. 标签选择器(div,h1,p)
4. 子代选择器(ul>li)
5. 后代选择器(li a)
6. 通配符选择器(*)
7. 属性选择器(a[rel="external"])
8. 伪类选择器(a:hover,li:nth-child)

---

可继承的样式： font-size font-family color
不可继承的样式： border padding margin height width

---

优先级

• 同权重： 内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)
• !important >id >class >tag
• !important 比内联优先级高

CSS 盒子模型

盒模型 分为 border-box, margin-box, padding-box, content-box
默认 width，height 作用在 content-box

box-sizing 属性可以改变 width，height 作用的盒模型

CSS 块级格式上下文

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

---

一个块格式化上下文由以下之一创建:

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素，
• display: flow-root, flex, inline-flex
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
• 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

---

2、排列规则：在BFC区域，块级元素在垂直方向由顶部从上至下依次堆叠，上下外边距折叠;在水平方向尽量向左边缘排列(对于从左往右的格式化)，即使存在浮动也是如此。
3、BFC在页面上一个隔离的独立容器区域，容器里面的子元素不会影响到外面的元素，反之亦然。
4、BFC不会与外部float box重叠。
5、BFC计算高度时包含浮动元素。

CSS 行内格式上下文

w3c规范

如果一个line box里没有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow内容（比如图片、inline-block或inline-table元素），且不以保留的换行符结束的话，就会被视作高度为0的line box。

内联元素盒模型

1. 内容区域 指一种围绕文字看不见的盒子
2. 内联盒子 指的是元素的“外在盒子”
3. 行框盒子 每一行就是一个行框盒子
4. 包含盒子 由一行一行的盒子组成

font-size

font-size 相同，font-family 不同，得到的 span 元素的高度也不同：

EM_Square： 字模的高度被称为“em”，起源于大写的字符“M”的宽度；这个字母的比例被做成了方形（因此有了“EM Square”的称呼）

子元素的字体大小单位若为em，则是相对于父元素的字体大小来计算的。
元素除了字体大小以外的其他属性用到了em单位，则是相对于自身字体大小计算的

line-height

每行内容由多个内联元素组成（内联标签或者是包含文本的匿名内联元素），每一行都叫做一个 line-box。line-box 的高度是由它所有子元素的高度计算得出的。浏览器会计算这一行里每个子元素的高度，再得出 line-box 的高度（具体来说就是从子元素的最高点到最低点的高度），所以默认情况下，一个 line-box 总是有足够的高度来容纳它的子元素。

每个 HTML 元素实际上都是由多个 line-box 的容器，如果你知道每个 line-box 的高度，那么你就知道了整个元素的高度。

line-box 计算的一些细节：

对于内联元素，padding 和 border 会增大 background 区域，但是不会增大 content-area（不是 line-box 的高度）。一般来说你无法再屏幕上看到 content-area。margin-top 和 margin-bottom 对两者都没有影响。
对于可替换内联元素（replaced inline elements）、inline-block 元素和 blockified 内联元素，padding、margin 和 border 会增大 height（译者注：注意 margin），因此会影响 content-area 和 line-box 的高度

vertical-align

vertical-align：baseline，表示与字体中 x的下边缘 对齐
vertical-align：middle，表示与字体中 x的下边缘+ x高度的一半 对齐
vertical-align: top / bottom，表示与 line-box 的顶部或底部对齐
vertical-align: text-top / text-bottom，表示与 content-area 的顶部或底部对齐

幽灵空白节点 strut

​“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的0宽度的内联盒。

​这里有一个前提，文档声明必须是HTML5文档声明，如果还是很多年前的老声明，则不存在“幽灵空白节点”

CSS 包含快

包含块是元素用来计算和定位的一个框，明确定义如下

1. 根元素(很多场景可以认为 html)被成为"初始包含块"，其尺寸等同于浏览器可视窗口的大小
2. 对于其他元素，如果该元素的 position 是 relative 或者 static，则 包含块 由其最近的块容器的祖先盒的 content-box 边界决定
3. 如果元素 position:fixed, 则 包含块 是 初始包含块
4. 如果元素 position:absolute，则 包含快 由最近的 position 不是 static 的祖先元素建立，如果改 包含块 是 存 inline 元素，1. 如果内联元素被跨行分割，则属于未定义行为，由浏览器实现，2. 否则，则是相当于在内联盒子两侧各有一个宽度为 0 的盒子，该两个盒子 padding-box 的外包围盒就是内联元素的包含块，否则 包含快 由该祖先的 padding-box 边界形成

CSS z-index

由内而外分别为

1. 层叠上下文 backgroud/border
2. 负 z-index
3. block 块状水平盒子
4. float 浮动盒子
5. inline 水平盒子
6. z-index:auto 或者 z-index:0
7. 正 z-index

---

准则

1. 谁大谁上
2. 后来居上

---

层叠上下文的创建

1. 天生派： 根元素 自有层叠上下文
2. 正统派： z-index 设置数值的元素，建立新的层叠上下文
3. 扩招派： 其他 css3 属性会创建

CSS 编写

1. 引入 Normalize.css 解决兼容性问题
2. 规范参考 BEM
3. 采用 SCSS 来书写样式
4. 采用 postcss 对 scss 编译成 css
5. 采用 autoprefixer 对 css 做兼容性处理

CSS 应用

1. 引入基本样式库来作为起手，例如 bootstrap，bulma，material-design，ant-design
2. 引入 tailwind.css 作为 帮助类库
3. 引入 animate.css 作为 动画帮助类库