---
title: "CSS学习笔记"
date: 2019-08-13T15:16:33+08:00
draft: false
toc: true
images:
tags: [css]
categories: web
---

## 流、元素与基本尺寸

HTML元素分为两类：**块级元素**、**内联元素**。

### CSS盒尺寸

![CSS盒尺寸](CSS盒尺寸.png)

盒子模型，一共有四种盒子：content-box, padding-box, border-box, margin-box，给定元素的width, height是作用在content-box上的。对于块状元素，如果`width:auto`，则元素会如水流般充满整个容器，而一旦设定了width具体数值，则元素的流动性就会被阻断，可以参考这个[实例](https://demo.cssworld.cn/3/2-3.php)。

### CSS流体布局下的宽度分离原则

所谓“宽度分离元则”，就是CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存，而应该进行分离，width独立占用一层标签，padding、border、margin利用流动性在内部自适应呈现。

box-sizing会改变尺寸作用规则，理论上有下面这些写法:

```css
.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

![替换元素尺寸计算规则](替换元素尺寸计算规则.png)

可以使用下面的方式实现透明图片占位：

```html
<img>
```

```css
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`的元素。