山药泥拌饭
山药泥拌饭

前端学习记录~2023.7.3~CSS杂记 Day4

  • 前言
  • 一、溢出
    • 1. 默认情况
    • 2. overflow属性
    • 3. BFC
  • 二、CSS 的值与单位
    • 1. 长度
      • （1）绝对长度单位
      • （2）相对长度单位
    • 2、百分比
    • 3、数字
    • 4、颜色
      • （1）颜色关键字
      • （2）十六进制 RGB 值
      • （3）RGB 和 RGBA 的值
      • （4）HSL 和 HSLA 的值
    • 5、图片
    • 6、位置
    • 7、字符串和标识符
    • 8、函数
  • 三、在 CSS 中调整大小
    • 1、原始尺寸 / 固有尺寸
    • 2、设置具体的尺寸
      • （1）使用百分数
      • （2）把百分数作为内外边距
      • （3）min- 和 max- 尺寸
    • 3、视口单位
  • 四、图像、媒体和表单元素
    • 1、替换元素
    • 2、调整图像大小
      • （1）min- 和 max- 尺寸
      • （2）object-fit 属性
    • 3、form元素
      • （1）样式化文本输入元素
      • （2）继承和表单元素
      • （3）form 元素与 box-sizing
      • （4）其他有用的设置
      • （5）将一切都放在一起“重置”
  • 总结

前言

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

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

一、溢出

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
前端学习记录~2023.7.3~CSS杂记 Day4_第1张图片

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默认图片原始大小，

默认没有尺寸

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）样式化文本输入元素

允许文本输入的元素有很多，例如 ，及其指定特定类型的元素，如 以及