5.6 KiB
| title | date | draft | toc | images | tags | categories |
|---|---|---|---|---|---|---|
| CSS学习笔记 | 2019-08-13T15:16:33+08:00 | false | true | <nil> | [css] | web |
流、元素与基本尺寸
HTML元素分为两类：块级元素、内联元素。
CSS盒尺寸
盒子模型，一共有四种盒子：content-box, padding-box, border-box, margin-box，给定元素的width, height是作用在content-box上的。对于块状元素，如果width:auto，则元素会如水流般充满整个容器，而一旦设定了width具体数值，则元素的流动性就会被阻断，可以参考这个实例。
CSS流体布局下的宽度分离原则
所谓“宽度分离元则”，就是CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存，而应该进行分离，width独立占用一层标签，padding、border、margin利用流动性在内部自适应呈现。
box-sizing会改变尺寸作用规则，理论上有下面这些写法:
.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* Firefox曾经支持 */
.box3 { box-sizing: border-box; } /* 全线支持 */
.box4 { box-sizing: margin-box; } /* 从未支持 */
替换元素的特性之一就是尺寸由内部元素决定，且无论其display属性值是inline还是block；对于非替换元素，如果其display属性值为block，则会具有流动性，宽度由外部尺寸决定。
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。
绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内，但是，非绝对定位元素则是相对于content box计算的。
内联元素
“内联元素”的“内联”特指“外在盒子”，和“display为inline的元素”不是一个概念。“内联元素”的典型特征就是可以和文字在一行显示。
内联盒子模型：
- 内容区域（content area）
- 内联盒子（inline box）
- 行框盒子（line box）
- 包含盒子（containing box）
在HTML5中存在“幽灵空白结点”，叫做strut
Each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "struct".
盒尺寸四大家族
盒尺寸中的4个盒子content box, padding box, border box和margin box分别对应CSS世界中的content, padding, border和margin属性。
根据“外在盒子”是内联还是块级我们可以把元素分为内联元素和块级元素，而根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素。
替换元素特性
- 内容的外观不受页面上的CSS的影响
- 有自己的尺寸
- 在很多CSS属性上有自己的一套表现规则
替换元素的尺寸计算规则
- 固有尺寸指的是替换内容原本的尺寸
- HTML尺寸介于固有尺寸和CSS尺寸之间，只能通过原生HTML属性改变
- CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置尺寸，对应盒尺寸中的content box
可以使用下面的方式实现透明图片占位：
<img>
img {
visibility: hidden;
display: inline-block;
}
img[src] {
visibility: visible;
}
没有src属性的<img>是非替换元素。
我们无法改变替换元素内容的固有尺寸。
<img>元素中的width和height之所以会改变图片大小，是因为图片中的content替换内容默认的适配方式是填充（fill），在CSS3中，<img>和其他一些替换元素的替换内容的适配方式可以通过object-fit属性修改。
在CSS中，我们把content属性生成的对象称为“匿名替换元素”。
深入理解content
-
content与替换元素
-
content内容生成技术
内联元素与流
块级元素负责结构，内联元素接管内容。
字母x的下边缘（线）就是我们的基线，内联元素默认是基线对齐的。
ex是CSS中的一个相对单位，指的是小写字母x的高度，即x-height。
仅包含文字的<div>高度是由line-height属性决定的。
对于非替换元素的纯内联元素，其可视高度完全由line-height决定。
深入line-height的各类属性值
line-height的默认值是normal，还支持数值、百分比值以及长度值。
- 数值，比如
line-height: 1.5，其最终的计算值是和当前font-size相乘后的值。 - 百分比值，比如
line-height: 150%，其最终的计算值是和当前font-size相乘后的值。 - 长度值，也就是带单位的值，如
line-height: 1.5em，此处em是一个相对于font-size的相对单位，因此，最终的计算值也是和当前font-size相乘后的值。
如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为属性值，那么所有的子元素继承的是最终计算的值。
line-height的大值特性。
vertical-align
属性值分为4类：
-
线类，如baseline、top、middle、bottom；
-
文本类，如text-top、text-bottom；
-
上标下标类，如sub、super；
-
数值百分比类，如20px、2em、20%等。
vertical-align只能应用于内联元素以及display值为table-cell的元素。