前端学习记录~2023.7.3~CSS杂记 Day4 溢出 & CSS的值与单位 & 调整大小 & 图像、媒体和表单元素

---

前言

由于有很多知识非常符合直觉或者和其他语言有通用性，因此个人觉得不需要全部记下来，本篇只记录一些个人觉得需要注意或单独记忆的知识点。

同时为了提高效率和减少对不重要内容的时间投入，会考虑更加精简。

本篇主要涉及溢出、CSS的值与单位、调整大小、图像、媒体和表单元素

---

一、溢出

1. 默认情况

CSS会尽量减少数据损失，因此会从盒子溢出内容超出范围，而不是为了满足盒子的尺寸而忽略掉内容

2. overflow属性

overflow属性告诉浏览器处理溢出的方式。

• visible：是默认值。这也是溢出时能看到内容的原因
• hidden：隐藏掉溢出
• scroll：添加滚动条。如果内容没有溢出，滚动条仍然会存在
• auto：只有溢出时才会添加滚动条

可通过overflow-x和overflow-y分别控制两个方向溢出的设置。

如果overflow有两个值，如overflow：scroll hidden，那么前一个会对overflow-x生效，后一个对overflow-y生效。否则会同时作用于两者

3. BFC

块级排版上下文（Block Formatting Context，BFC）
后面再详细记录

---

二、CSS 的值与单位

1. 长度

（1）绝对长度单位

这些值中的大多数在用于打印时比用于屏幕输出时更有用。

经常使用的可能就是 px（像素）

（2）相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应

最常用的应该是em和rem

2、百分比

总是相对于其他值设置的

3、数字

一些属性接受没有任何单位的纯数字

比如opacity不透明度属性，此属性接受0（完全透明）到 1（完全不透明）之间的数字

4、颜色

（1）颜色关键字

例如red

（2）十六进制 RGB 值

1个#和6个十六进制数字组成，每对值表示一个通道——红色、绿色和蓝色——并允许我们为每个通道指定 256 个可用值中的任意一个（16 x 16 = 256）
例如 #02798b

（3）RGB 和 RGBA 的值

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

也可以添加第4个参数成为rgba()，代表颜色的 alpha 通道，控制不透明度，值的范围为 0 到 1。例如rgba(2, 121, 139, .3)

（4）HSL 和 HSLA 的值

hsl()函数接受色相、饱和度和亮度值。例如hsl(188, 97%, 28%)

• 色调：颜色的底色。值在 0 - 360
• 饱和度：值为 0 - 100%。0 为无颜色（将表示为灰色阴影），100% 为全色饱和度
• 亮度：值为 0 - 100%。0 为没有光（将完全显示为黑色），100%表示完全亮（将完全显示为白色）

和rgb()一样可以传递一个 alpha 参数表示透明度。例如hsl(174 77% 31% / .9)

在新版本的 CSS 中现在不需要像rgba()一样使用hsla()了，不过仍旧被支持

5、图片

例如一个渐变

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

6、位置

用于定位一个元素

例如background-position: right 40px;第一个值是水平位置，第二个值是竖直位置

7、字符串和标识符

诸如red之类的字符串关键字在某些时候可以被准确描述为标识符，是一个CSS能理解的特殊值

8、函数

包括上面的rgb() hsl()，很多函数都可以被认为是属性值，比如url()和calc()

例如

.box {
  width: calc(20% + 100px);
}

---

三、在 CSS 中调整大小

1、原始尺寸 / 固有尺寸

html元素在没受到css设置之前有原始尺寸。比如img默认图片原始大小，<div>默认没有尺寸

2、设置具体的尺寸

当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸

（1）使用百分数

当使用百分数时，指的是相对于父容器的百分比

（2）把百分数作为内外边距

如果把 margins 和 padding 设置为百分数的话，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。

（3）min- 和 max- 尺寸

比如希望一个元素至少有多高，那么可以使用min-height。这样就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

max-width 的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。如果你使用了 max-width: 100%，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的 100%

这个技术用来让图片可响应

3、视口单位

通过视口宽度vw和视口高度vh可以让元素随用户视口而改变大小。

1vh 等于视口高度的 1%，1vw 则为视口宽度的 1%

视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。

一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。

---

四、图像、媒体和表单元素

1、替换元素

比如图像和视频被描述为替换元素。这意味着 CSS 不能影响它们的内部布局，只能影响他们在页面上相对其他元素的位置。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

某些替换元素（例如图像和视频）也具有宽高比。这意味着它在水平（x）和垂直（y）方向上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示

2、调整图像大小

（1）min- 和 max- 尺寸

使用上一部分提到的例如max-width属性来控制

（2）object-fit 属性

当使用object-fit属性时，替换元素可以以多种方式被调整到合乎盒子的大小。

三个取值：

• cover：维持图像原始比例来充满盒子。但是由于比例不变，因此图像多余的部分会被盒子裁切掉
• contain：图像被缩放到足以完整放到盒子里的大小。如果图像比例和盒子不同，可能会出现空白
• fill：让图像充满盒子，但是比例可能会发生变化

3、form元素

（1）样式化文本输入元素

允许文本输入的元素有很多，例如 <input type="text">，及其指定特定类型的元素，如 <input type="email"> 以及 <textarea> 元素，这些都是相当容易样式化的，它们和页面上其他盒子的表现相同。只不过在不同的操作系统和浏览器上访问时这些元素默认的样式化方式可能不同。

input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover, input[type="submit"]:focus {
  background-color: #333;
}  

<form>
  <div><label for="name">Name</label>
  <input type="text" id="name"></div>
  <div><label for="email">Email</label>
  <input type="email" id="email"></div>

  <div class="buttons"><input type="submit" value="Submit"></div>
</form>

效果如下

（2）继承和表单元素

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用 body 中或者一个父元素中定义的字体，你需要向你的 CSS 中加入这条规则

button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}

（3）form 元素与 box-sizing

跨浏览器的 form 元素对于不同的挂件使用不同的盒子约束规则。在样式化表单时候，可以使用box-sizing，确保在给 form 元素设定宽度和高度时可以有统一的体验

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

（4）其他有用的设置

除了上面提到的规则以外，你也应该在 <textarea> 上设置 overflow: auto 以避免 IE 在不需要滚动条的时候显示滚动条：

textarea {
	overflow: auto;
}

（5）将一切都放在一起“重置”

作为最后一步，我们可以将上面讨论过的各式属性包起来，成为以下的“表单重置”，以提供一个统一的在其上继续进行工作的地基，这包含了前几节提到的所有东西：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}

textarea {
  overflow: auto;
}

---

总结

只记录了 CSS 的部分内容