内容溢出

什么是内容溢出

在css中万物都是盒子，简单来说就是往盒子里装东西，但是如果盒子的大小不够，那么就会发生内容溢出的情况。

内容溢出的情况有很多种，比如文字溢出、图片溢出、视频溢出等。

文字溢出

文字溢出的情况比较简单，就是文字超出了盒子的范围，导致文字被截断。

文字溢出的处理方式有很多种，比如省略号、换行等。

图片溢出

图片溢出的情况比较简单，就是图片超出了盒子的范围，导致图片被截断。

图片溢出的处理方式有很多种，比如缩放、裁剪等。

视频溢出

视频溢出的情况比较简单，就是视频超出了盒子的范围，导致视频被截断。

视频溢出的处理方式有很多种，比如缩放、裁剪等。

overflow 属性

overflow 属性是解决元素内容溢出的一种方式，但是它会把溢出的内容裁切掉或者说是隐藏，这样肯定是不合理的。

所以我们需要使用 overflow 属性来解决元素内容溢出的问题。

overflow: scroll

当元素的内容溢出时，会在元素的外部显示滚动条，用户可以通过滚动条来查看溢出的内容。

但是这个属性会一直显示滚动条，即使内容没有溢出。

overflow-y 垂直方向的滚动条

overflow-x 水平方向的滚动条

overflow: auto 当元素的内容溢出时，会在元素的外部显示滚动条，用户可以通过滚动条来查看溢出的内容。

但是这个属性只有在内容溢出时才会显示滚动条。

可替换元素

什么是可替换元素

可替换元素是指其内容由外部资源确定的元素，而不是由文档内容直接确定的元素。

可替换元素的内容是外部资源，而不是文档内容。

可替换元素的内容可以是图片、视频、音频、插件等。

form 元素

什么是 form 元素

form 元素是用于创建表单的元素，表单是用于收集用户信息的元素。

继承和表单元素

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

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

form 元素与 box-sizing

什么是 box-sizing

box-sizing 是一个 CSS 属性，用于设置元素的盒模型。

盒模型是指元素的宽度和高度的计算方式。

盒模型有两种：

content-box 内容盒模型
border-box 边框盒模型

什么是 form 元素与 box-sizing

form 元素与 box-sizing 是一个 CSS 属性，用于设置表单元素的盒模型。

字体样式、字体粗细、文本转换和文本装饰

字体样式（font-style）

控制文本是否为斜体显示。主要有以下值：

normal: 正常字体显示
italic: 使用字体的斜体版本
oblique: 将正常文本倾斜显示（当字体没有斜体版本时的替代方案）

字体粗细（font-weight）

设置文本的粗细程度。常用值包括：

normal/400: 正常粗细
bold/700: 粗体
lighter: 比父元素更细
bolder: 比父元素更粗
100-900: 精确控制字体粗细的数值（100的倍数）

文本转换（text-transform）

改变文本的大小写显示方式：

none: 保持原始文本格式
uppercase: 全部大写
lowercase: 全部小写
capitalize: 单词首字母大写
full-width: 全角显示（适用于中日韩文字与拉丁字母对齐）

文本装饰（text-decoration）

为文本添加装饰线条：

none: 无装饰
underline: 下划线
overline: 上划线
line-through: 删除线

提示：text-decoration: none 常用于移除链接的默认下划线样式。