CSS快速复习2-盒模型、文本与数值

盒模型

浏览器默认使用标准盒模型，即 height 与 width 仅表示 content 范围

而怪异盒模型（IE 盒模型）中 height 和 width 直接包括了 content、padding、border 的范围

可以显性使用 box-sizing 开启怪异盒模型

.box {
  box-sizing: border-box;
}

或者世界修改 html 标签，全局指定怪异盒模型

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

内联盒子

对任意一个内联元素添加 height 与 width 属性都是无效的

但是 margin、padding、border 都可以生效！

/* 譬如对span的元素选择器 */
span {
  margin: 20px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid blue;
}

特别的，还存在一个“行内块元素”，即设置 display: inline-block

此时的元素 height 与 width 均生效，且 margin、padding、border 也会推开其他元素，但是他依然保有行内元素的基本特征

背景与边框

background-repeat 控制图像的平铺行为

1. no-repeat — 不重复。
2. repeat-x —水平重复。
3. repeat-y —垂直重复。
4. repeat — 在两个方向重复。

background-size 调整背景图像的大小
cover 保持宽高比，但是可能会越出盒子范围
contain 尽可能填充图像图像，保持宽高比，不会超出盒子最大范围

background-image 设置背景图片
background-image: url(star.png)

background-attachment 控制背景与文本滚动之间的关系（可以用来实现视差滚动）

1. scroll 使元素的背景在页面滚动时滚动
2. fixed 使元素的背景固定在视图端口上

文本方向

writing-mode 控制文本方向
他不是直接指定到文本上让它变成竖着或者横着的！而是指定给装着文本的盒子，使得该盒子下的所有文本都应用同一种文本方向

1. horizontal-tb: 块流向从上至下。对应的文本方向是横向的。
2. vertical-rl: 块流向从右向左。对应的文本方向是纵向的。
3. vertical-lr: 块流向从左向右。对应的文本方向是纵向的。

溢出

对于设置了固定宽高的 inline 元素，内容如果写的太多的话自然就会溢出来

使用 overflow:hidden 隐藏掉溢出来的内容

单位与值

常用单位

常见单位及换算规定
px 像素
in 英寸，1in=96px=2.54cm

相对单位（都很重要，建议牢记）

em 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的 line-height
vw 视窗宽度的 1%
vh 视窗高度的 1%
vmin 视窗较小尺寸的 1%
vmax 视图大尺寸的 1%

颜色值

rgb() 根据标准 RGB 指定颜色
rgba() 前三个参数为 RGB 颜色值，最后一个为 alpha 通道即透明度

hsl() 接收三个参数，分别为色调、饱和度、亮度
hsla() 多加了一个 alpha 通道

calc() 计算函数
譬如 width: calc(10%+200px) 其中的 10%即自动获取父元素的宽度 10%然后代入计算