CSS 世界 学习笔记

CSS 世界 学习笔记

流、元素与基本尺寸

html 元素 分为 块状元素 和 内联元素

块状元素

块状元素指的是在水平流上面一行展示的元素，常用的有 div, li 和 table

内联元素

内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行，常见的有 span，label

盒模型

盒模型 分为 border-box, margin-box, padding-box, content-box

默认 width，height 作用在 content-box

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

* {
  box-sizing: border-box;
}

内联元素盒模型

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

幽灵空白节点

名叫 strut 存在每一个 行框盒子 前面，同时具有该元素的字体和行高属性的 0 宽度的内联盒

内联元素与流

字母 x

文字的 baseline 基线对应的就是字体 x 的下边缘

line-height

文字的行高是 line-height 数字控制的，line-height 设置为 1.5 等数值，表示 1.5* font-size 的高度

每行文字之间，为了便于美观，会存在 半行距的 概念，即 (line-height - font-size)/2

vertical-align

表示文字的对齐方式

baseline，middle 是正对 字体 x 的 下边缘或者中部 对其
top，bottom 正对当前 行框盒子 的 顶部或者底部 对其

流的破坏和保护

1. div 设置宽度和 float 会 打破流模型，建议不要使用

position

当为设置 定位的时候 元素都是在当前位置显示

包含快

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

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

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 属性会创建

文本处理能力

@font face

@font-face {
  font-family: icon;
  src: url("iocn.woff");
}

元素的显示与隐藏

1. scripts
2. display
3. visibility
4. clip
5. z-index
6. opacity