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;
}
内联元素盒模型
- 内容区域 指一种围绕文字看不见的盒子
- 内联盒子 指的是元素的“外在盒子”
- 行框盒子 每一行就是一个行框盒子
- 包含盒子 由一行一行的盒子组成
幽灵空白节点
名叫 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 正对当前 行框盒子 的 顶部或者底部 对其
流的破坏和保护
- div 设置宽度和 float 会 打破流模型,建议不要使用
position
当为设置 定位的时候 元素都是在当前位置显示
包含快
包含块是元素用来计算和定位的一个框,明确定义如下
- 根元素(很多场景可以认为 html)被成为"初始包含块",其尺寸等同于浏览器可视窗口的大小
- 对于其他元素,如果该元素的 position 是 relative 或者 static,则 包含块 由其最近的块容器的祖先盒的 content-box 边界决定
- 如果元素 position:fixed, 则 包含块 是 初始包含块
- 如果元素 position:absolute,则 包含快 由最近的 position 不是 static 的祖先元素建立,如果改 包含块 是 存 inline 元素,1. 如果内联元素被跨行分割,则属于未定义行为,由浏览器实现,2. 否则,则是相当于在内联盒子两侧各有一个宽度为 0 的盒子,该两个盒子 padding-box 的外包围盒就是内联元素的包含块,否则 包含快 由该祖先的 padding-box 边界形成
z-index
由内而外分别为
- 层叠上下文 backgroud/border
- 负 z-index
- block 块状水平盒子
- float 浮动盒子
- inline 水平盒子
- z-index:auto 或者 z-index:0
- 正 z-index
准则
- 谁大谁上
- 后来居上
层叠上下文的创建
- 天生派: 根元素 自有层叠上下文
- 正统派: z-index 设置数值的元素,建立新的层叠上下文
- 扩招派: 其他 css3 属性会创建
文本处理能力
@font face
@font-face {
font-family: icon;
src: url("iocn.woff");
}
元素的显示与隐藏
- scripts
- display
- visibility
- clip
- z-index
- opacity