[前端笔记——CSS] 13.溢出+CSS值和单位

1.溢出

1.1 溢出的内容

CSS 中万物皆盒，因此我们可以通过给width和height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在往盒子里面塞太多东西的时候发生的。

<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

<p>This content is outside of the box.</p>

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
}

上面这个盒子在块方向上受到height的限制，我们添加了过多的内容，以至于盒子里面没有空间容纳。

<div class="word">Overflow</div>

.word {
  border: 1px solid #333333;
  width: 100px;
  font-size: 250%;
}

上面这个盒子在内联方向收到限制。

1.2 overflow属性

overflow属性是控制一个元素溢出的方式，它告诉浏览器想怎样处理溢出。overflow的默认值为visible，这就是我们的内容溢出的时候，看到盒子很乱的原因。

如果想在内容溢出的时候把它裁剪掉，可以在盒子上设置overflow: hidden。这就会像它表面上所显示的那样作用——隐藏掉溢出。

可以用overflow: scroll在有内容溢出的时候加个滚动条，这时浏览器总会显示滚动条，即使没有足够多引起溢出的内容。

可以使用overflow-y属性，设置overflow-y: scroll来仅在y轴方向滚动，也可以用overflow-x，以在 x 轴方向上滚动。

可以用overflow属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对overflow-x生效而第二个对overflow-y生效。否则，overflow-x和overflow-y将会被设置成同样的值。例如，overflow: scroll hidden会把overflow-x设置成scroll，而overflow-y则为hidden。

如果只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用overflow: auto。

CSS 中有所谓块级排版上下文（Block Formatting Context，BFC）的概念。在使用诸如scroll或者auto的时候，就建立了一个块级排版上下文。

2.CSS的值和单位

CSS规范上一些被尖括号包围的值，如<color>或<length>，也可以称为数据类型。
在下面的例子中，我们使用关键字设置标题的颜色，使用rgb()函数设置背景：

h1 {
  color: black;
  background-color: rgb(197,93,161);
}

CSS 中的值类型是一种定义了一些可使用的值的集合的方式。常见的值和单位类型有数字、长度和百分比等等。

2.1 数字、长度和百分比

数值数据类型：

长度：
最常见的数字类型是<length>，例如 10px(像素) 或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。
绝对长度单位：
以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。唯一一个经常使用的值，估计就是 px(像素)。
相对长度单位：
相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。

百分比：
在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
数字：
有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度 (它的透明程度)。此属性接受 0(完全透明) 和 1(完全不透明) 之间的数字。当在 CSS 中使用数字作为值时，它不应该用引号括起来。

2.2 颜色

现代计算机的标准颜色系统是 24 位的，它允许通过不同的红、绿、蓝通道的组合显示大约 1670 万种不同的颜色，每个通道有 256 个不同的值 (256 x 256 x 256 = 16,777,216)。

颜色关键字可以指定颜色，可在页面上查看<color>值的完整列表。

2.2.1 十六进制RGB值

每个十六进制值由一个散列/磅符号 (#) 和六个十六进制数字组成，每个十六进制数字都可以取 0 到 f(代表 15) 之间的 16 个值中的一个——所以是 0123456789abcdef。每对值表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定 256 个可用值中的任意一个 (16 x 16 = 256)。

2.2.2 RGB和RGBA的值

RGB 值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB 的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于 0 到 255 之间的十进制数字表示的。

还可以使用 RGBA 颜色——它们的工作方式与 RGB 颜色完全相同，但是有第四个值表示颜色的 alpha 通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明，而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。

2.2.3 HSL和HSLA的值

hsl() 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分 1670 万种颜色：

• 色调：颜色的底色。这个值在 0 和 360 之间，表示色轮周围的角度。
• 饱和度：颜色有多饱和？它的值为 0 - 100%，其中 0 为无颜色 (它将显示为灰色阴影)，100% 为全色饱和度。
• 亮度：颜色有多亮？它从 0 - 100% 中获取一个值，其中 0 表示没有光 (它将完全显示为黑色)，100% 表示完全亮 (它将完全显示为白色)。

HSL 也有 HSLA 等效物，它也能够指定 alpha 通道值。

2.3 图片

<image> 数据类型用于图像为有效值的任何地方。它可以是一个通过 url()函数指向的实际图像文件，也可以是一个渐变。

<div class="box image"></div>
<div class="box gradient"></div>  

.image {
  background-image: url(star.png);
}

.gradient {
  background-image: linear-gradient(90deg, rgba(119,0,255,1) 39%, rgba(0,212,255,1) 100%);
} 

2.4 位置

<position> 数据类型表示一组 2D 坐标，用于定位一个元素，如背景图像 (通过 background-position)。它可以使用关键字 (如 top, left, bottom, right, 以及center ) 将元素与 2D 框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。

<div class="box"></div> 

.box {
  height: 300px;
  width: 400px;
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: right 40px;
}

2.5 函数

在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与 JavaScript、Python 或 c++等语言相关联，但它们也以属性值的形式存在于 CSS 中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。

行为更类似于传统编程语言的值是calc()函数。这个函数能够在 CSS 中进行简单的计算。