一篇详解CSS样式

^～^前行者～～～

已于 2024-04-15 01:51:02 修改

阅读量442

点赞数 8

文章标签： css 前端

于 2024-04-13 01:04:36 首次发布

本文链接：https://blog.csdn.net/huaz_md/article/details/137671604

版权

华子目录

CSS常见样式
- CSS基本语法
文本样式
- color
- font-style
- font-weight
- line-height
- text-shadow
- box-shadow
- text-transform
- white-space
- direction
列表样式
- list-style-type
- list-style-image
- list-style-position
- list-style
- - 案例：使用简写属性设置所有列表属性
轮廓样式`outline`
- outline-style
- outline
边框样式
- border-image
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
透明度样式
- 使用 `opacity` 属性
- 使用 `rgba` 颜色值
- 使用 `filter` 属性
- 使用 `background-clip` 和伪元素
高度宽度样式
- width
- height
外边距样式
- 案例
内边距样式
- 案例
边线样式
- border
- border-radius
背景样式
- background
- background-color
- background-image
- - background-image与img的区别
- background-position
- background-size
- background-attachment
- background-repeat
overflow内容溢出处理样式
visibility可见样式
display
position
vertical-align
float
clear
filter
z-index
resize
box-sizing
object-fit
属性继承

CSS常见样式

CSS基本语法

选择器{
	属性：值;
	属性：值;
	.......
}

选择器就是上面介绍的，属性和值之间是一个键值对，以英文的冒号作为一对，注意：必须以
英文的;结束。

文本样式

样式名称	样式值	说明
color	#十六进制三原色、颜色单词、rgb函数、rgba函数	文本颜色
background-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	背景颜色
height	px值	高度
width	px值	宽度
font-family	Microsoft YaHei微软雅黑，FangSong仿宋，KaiTi楷体，SimSun宋体，SimHei黑体	文本字体
font-size	px像素，em字符单位，%百分比	文本大小
font-style		规定斜体文本
font-weight		文本的粗细
text-indent	em数值	文字缩进
text-align	left(文本靠左)，right(文本靠右)，center(文本居中)，justify(两端对齐)	文本行间的对齐方式
text-decoration	none(清除a标签的下划线)，underline(下划线)，overline(上划线)，line-through(删除线)	文本装饰
text-transform		设置文本大小写
line-height		行高
text-shadow		文本阴影效果
box-shadow		盒子阴影效果
white-space		处理元素内的空白符
direction		文本书写方式

color

在CSS中，color属性用于设置HTML元素的前景色（通常是文本颜色），包括文本、边框颜色（在border-color属性中）以及某些其他元素的颜色。color属性可以接受多种类型的值，包括颜色名称、十六进制颜色代码、RGB、RGBA、HSL、HSLA值以及预定义的颜色值（如transparent）。

颜色名称

CSS支持许多预定义的颜色名称，例如red、blue、green、black、white等。这些颜色名称可以直接在color属性中使用。

p {
  color: red;
}

十六进制颜色代码

十六进制颜色代码以#开头，后面跟着6个十六进制数字（0-9和A-F）。前两个数字代表红色分量，中间两个代表绿色分量，最后两个代表蓝色分量。

h1 {
  color: #FF0000; /* 红色 */
}

rgb，rgba

RGB代表红绿蓝三个颜色通道，每个通道的值范围从0到255。RGBA是RGB的扩展，包含一个额外的通道用于设置透明度。

div {
  color: rgb(255, 0, 0); /* 红色 */
}

button {
  color: rgba(0, 0, 255, 0.5); /* 半透明的蓝色 */
}

hsl、hsla

hsl代表色相、饱和度和亮度，而HSLA是HSL的扩展，包含alpha通道用于设置透明度。

span {
  color: hsl(0, 100%, 50%); /* 红色 */
}

a {
  color: hsla(240, 100%, 50%, 0.7); /* 半透明的蓝色 */
}

预定义颜色值`transparent`

transparent是一个特殊的颜色值，表示元素是透明的，不会显示任何颜色。

.overlay {
  color: transparent; /* 透明色 */
}

颜色继承

如果一个元素没有指定color属性，那么它将从其父元素继承color属性的值。

body {
  color: black; /* 所有body的子元素默认继承这个颜色 */
}

h1 {
  /* 这里没有指定color，所以h1将继承body的color值 */
}

font-style

font-style 是 CSS 中的一个属性，用于设置文本的字体样式。它主要用于定义斜体或倾斜的字体。

font-style 的属性值主要有以下几种：

normal：表示正常的字体样式，即非斜体。
italic：表示斜体字体。
oblique：表示倾斜字体。

例如，如果你想为某个段落设置斜体样式，可以这样写：

p {
  font-style: italic;
}

上述代码会将所有 <p> 标签内的文本设置为斜体。

font-weight

font-weight 是 CSS 中的一个属性，用于设置文本的粗细程度。它定义了字体的粗细等级，允许你控制文本在页面上的视觉表现。

font-weight 的属性值可以是以下几种类型：

关键字：
- normal：表示正常的字体粗细，相当于数字值 400。
- bold：表示粗体，相当于数字值 700。
- bolder：表示比父元素的字体更粗。
- lighter：表示比父元素的字体更细。
数字值：从 100 到 900 的整百数字，用来指定具体的字体粗细程度。其中，400 等同于 normal，而 700 等同于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。
inherit：表示元素应该继承其父元素的 font-weight 属性值。

示例：

.normal-text {
  font-weight: normal; /* 等同于 font-weight: 400; */
}

.bold-text {
  font-weight: bold; /* 等同于 font-weight: 700; */
}

.bolder-text {
  font-weight: bolder; /* 比父元素字体更粗 */
}

.lighter-text {
  font-weight: lighter; /* 比父元素字体更细 */
}

.custom-weight {
  font-weight: 600; /* 自定义字体粗细 */
}

在 HTML 中应用这些样式：

<p class="normal-text">这是正常字体的文本。</p>
<p class="bold-text">这是粗体文本。</p>
<p class="bolder-text">这是比父元素更粗的文本。</p>
<p class="lighter-text">这是比父元素更细的文本。</p>
<p class="custom-weight">这是自定义粗细的文本。</p>

使用 font-weight 可以让页面上的文本具有不同的视觉层次和重点，从而增强用户的阅读体验。在设计网页时，根据内容的重要性和设计需求，合理地选择文本的粗细程度是非常重要的。

line-height

在CSS中，line-height属性用于设置文本行之间的垂直间距，也就是行高。它影响着一行文本的高度，以及文本行与行之间的间距。

line-height的值可以是以下几种类型：

固定值：如px、pt等绝对单位，或者em、rem等相对单位。当使用固定值时，行高将是一个固定的距离，不随字体大小的改变而改变。

p {
  line-height: 20px;
}

百分比值：相对于当前字体大小的百分比。

p {
  line-height: 150%;
}

无单位值：这是一个相对于当前字体大小的倍数。例如，line-height: 1.5;意味着行高是字体大小的1.5倍。

p {
  line-height: 1.5;
}

normal：这是line-height的默认值，浏览器会根据元素的字体大小计算出一个合适的行高。

p {
  line-height: normal;
}

在实际应用中，经常将line-height设置为与字体大小相同的无单位值，例如line-height: 1.5;，这样行高就会随着字体大小的改变而自动调整，保持合适的比例。

text-shadow

text-shadow 是一个 CSS 属性，用于在文本上添加阴影效果。你可以指定阴影的偏移量、模糊程度和颜色，甚至可以应用多个阴影效果到同一文本上。

text-shadow 的基本语法如下：

text-shadow: h-offset v-offset blur-radius color;

h-offset：水平阴影的位置。正值将阴影向右移动，负值将阴影向左移动。
v-offset：垂直阴影的位置。正值将阴影向下移动，负值将阴影向上移动。
blur-radius：阴影的模糊距离。值越大，阴影的边缘就越模糊。
color：阴影的颜色。

你也可以一次性定义多个阴影效果，只需用逗号分隔每个阴影定义即可：

text-shadow: h-offset1 v-offset1 blur-radius1 color1, h-offset2 v-offset2 blur-radius2 color2, ...;

下面是一个具体的例子：

h1 {
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

<h1>这是带有阴影效果的标题</h1>

在这个例子中，<h1> 元素的文本将有一个向右和向下偏移各 2 像素的阴影，模糊半径为 4 像素，颜色为半透明的黑色（通过 rgba 值定义）。

使用 rgba 而不是纯黑色 #000000 允许你控制阴影的透明度，这样可以让文本下方的背景稍微透过阴影显现出来，创建出更丰富的视觉效果。

你还可以应用多个阴影效果，比如同时给一个文本添加内阴影和外阴影：

h1 {
  color: white;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.5), /* 内阴影 */
    2px 2px 4px rgba(0, 0, 0, 0.3); /* 外阴影 */
}

在这个例子中，<h1> 元素的文本首先有一个紧贴文本边缘的内阴影（偏移为 -1px），然后是一个稍微偏移和模糊的外阴影。

box-shadow

在CSS中，box-shadow是一个用于为元素添加边框阴影的属性。它允许你设置一个或多个阴影效果，为元素添加视觉上的深度和立体感。box-shadow的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中各个参数的含义如下：

h-shadow：水平阴影的位置。正值将阴影向右移动，负值将阴影向左移动。
v-shadow：垂直阴影的位置。正值将阴影向下移动，负值将阴影向上移动。
blur：阴影的模糊半径。值越大，阴影的边缘就越模糊。
spread：阴影的扩展半径。正值表示阴影扩展，负值表示阴影收缩。
color：阴影的颜色。
inset（可选）：如果存在这个值，则表示是内阴影，否则为外阴影。

你可以使用box-shadow为元素添加单个阴影，也可以添加多个阴影，只需用逗号分隔每个阴影定义即可。

下面是一个简单的示例代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  box-shadow: 5px 5px 10px #888888;
}

在这个例子中，我们创建了一个200px x 200px的盒子，并为其添加了一个5px水平偏移量、5px垂直偏移量、10px模糊程度和颜色为#888888的阴影效果。

text-transform

CSS中的text-transform属性用于改变元素内文本的大小写状态，或者指示用户代理保持原文本的大小写不变。它有几个可能的值：

capitalize：元素文本中的每个单词的首字母都应该大写。需要注意的是，这个属性并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。
uppercase：元素文本中的所有字符都应该为大写字母。
lowercase：元素文本中的所有字符都应该为小写字母。
none：元素文本的大小写形式不应该改变。这是该属性的默认值。

以下是一个简单的使用示例：

h1 {
  text-transform: uppercase;
}

h2 {
  text-transform: capitalize;
}

p {
  text-transform: lowercase;
}

在这个例子中，所有的<h1>标签内的文本都会转换为大写，<h2>标签内的文本每个单词的首字母都会大写，而<p>标签内的文本则会转换为小写。

white-space

CSS中的white-space属性用于设置如何处理元素内的空白符。这个属性主要有以下几个可选值：

normal：默认值。空白符会被浏览器忽略，多个相邻的空白符会被合并成一个，换行符会被当作空白符来处理，并根据容器的大小进行自动换行。
nowrap：文本不会换行，直到遇到<br>标签为止。连续的空白符会被合并。
pre：空白符会被浏览器保留，其行为方式类似HTML中的<pre>标签。文本不会自动换行，会溢出显示，并保留多个空白符，遇到换行符和<br>标签会换行。
pre-wrap：保留空白符序列，但是正常地进行换行。
pre-line：合并空白符序列，但是保留换行符，并在遇到换行符或者<br>标签时进行换行。

这个属性在控制文本显示和布局时非常有用，特别是在需要保留源代码格式或实现特定排版效果时。

需要注意的是，pre-wrap和pre-line是CSS 2.1中新增的值。另外，任何版本的Internet Explorer（包括IE8）都不支持inherit属性值。

direction

在CSS中，direction属性用于指定文本、表格列以及其他内容块在其容器中的书写方向。这个属性主要影响块级元素中文本的书写方向，对于处理多语言网站或者排版方向不同的情况非常有用。

direction属性接受以下几个值：

ltr：表示文本流从左到右书写。这是大多数语言的默认书写方向，包括英文和中文等。
rtl：表示文本流从右到左书写。这个值适用于从右向左阅读的语言，如阿拉伯语和希伯来语等。

此外，direction属性还有两个其他可选值：

initial：使用默认值，即ltr。
inherit：继承父元素的书写方向。

需要注意的是，direction属性不会影响拉丁文的字母数字字符，这些字符总是从左到右书写，但它会影响拉丁文的标点符号。另外，不支持双向文本的浏览器可以选择忽略这个属性。

例如，如果你想要一个元素内的文本从右到左显示，你可以这样设置CSS：

.element {
  direction: rtl;
}

这样，.element类下的所有元素内的文本都将从右到左显示，适用于需要展示从右向左书写语言的内容。

列表样式

样式名称	样式的值	说明
list-style-type		列表样式
list-style-image		设置列表标记
list-style-position		何处放置列表项标记
list-style		列表样式简写方式

list-style-type

在CSS中，list-style-type属性用于设置列表项标记的类型。这个属性通常用于有序列表（<ol>）和无序列表（<ul>），它决定了列表项前面的标记的外观。

list-style-type属性接受多种类型的值，包括但不限于：

disc：默认值，实心圆点。
circle：空心圆点。
square：实心方块。
decimal：数字（1, 2, 3, …）。
decimal-leading-zero：带前导零的数字（01, 02, 03, …）。
lower-roman：小写罗马数字（i, ii, iii, …）。
upper-roman：大写罗马数字（I, II, III, …）。
lower-alpha：小写英文字母（a, b, c, …）。
upper-alpha：大写英文字母（A, B, C, …）。
none：无标记。

此外，CSS3还引入了一些新的值，例如lower-greek（小写希腊字母）和armenian（亚美尼亚数字）等。

你可以这样使用list-style-type属性：

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

在这个例子中，无序列表（<ul>）的列表项标记将显示为实心方块，而有序列表（<ol>）的列表项标记将显示为大写罗马数字。

如果你想要完全去除列表项标记，可以使用none值：

ul {
  list-style-type: none;
}

这将移除无序列表的所有列表项标记。

list-style-image

list-style-image是CSS（层叠样式表）中的一个属性，它允许你使用图像来替换列表项（如有序列表<ol>和无序列表<ul>）的标记。这个属性为列表项提供了一个自定义的外观，使其不再局限于默认的标记类型（如圆点、方块或数字）。

使用list-style-image属性时，你需要提供一个图像的URL。浏览器将加载并显示这个图像，作为列表项的标记。例如：

ul {
  list-style-image: url("marker.png");
}

在这个例子中，无序列表（<ul>）的列表项标记将被替换为名为marker.png的图像。

请注意，如果指定的图像不可用或加载失败，list-style-type属性将作为备选方案生效。为了确保在所有情况下都有合适的列表项标记，你可以同时设置list-style-image和list-style-type属性：

ul {
  list-style-image: url("marker.png");
  list-style-type: square;
}

在这个例子中，如果marker.png图像加载成功，它将作为列表项的标记；如果图像加载失败，列表项将使用默认的方块标记。

此外，list-style-image属性还可以与list-style-position属性一起使用，以控制图像相对于列表项内容的放置位置。

list-style-position

CSS中的list-style-position属性用于定义列表项标记（如圆点、数字或自定义图像）相对于列表项内容的位置。它有两个可能的取值：inside和outside。

inside：此值表示列表项标记会出现在列表项内容的内部，就像它是插入在列表项内容最前面的行内元素一样。这意味着文本会围绕标记进行排列，而标记本身不会出现在文本内容之外。
outside：此值表示列表项标记会出现在列表项内容的外部，并放置在离列表项边框边界一定距离处（这个距离在CSS中并未定义）。这是list-style-position属性的默认值，意味着列表项标记将位于文本以外，并且文本不会根据标记进行对齐。

此外，list-style-position属性还有一个inherit值，它表示元素应该继承其父元素的list-style-position属性值。

例如，以下CSS代码片段展示了如何使用list-style-position属性：

.inside-list {
  list-style-position: inside;
}

.outside-list {
  list-style-position: outside;
}

然后，你可以在HTML中使用这些类来应用样式：

<ul class="inside-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

<ul class="outside-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

在这个例子中，第一个无序列表的列表项标记将位于文本内部，而第二个无序列表的列表项标记将位于文本外部。

list-style

CSS中的list-style属性是一个简写属性，用于在一个声明中设置所有的列表属性。这个属性可以应用于任何元素，并由list-item元素继承，但在普通的HTML和XHTML中，它通常只用于<li>元素，因为这些元素默认的display值为list-item。

list-style属性可以按顺序设置以下属性：

list-style-type：设置列表项标记的类型，如圆点、数字、字母等。
list-style-position：设置在何处放置列表项标记，可选值为inside（标记位于文本内部）和outside（标记位于文本外部）。
list-style-image：使用图像来替换列表项的标记。

你可以不设置其中的某个值，未设置的属性会使用其默认值。例如，list-style: circle inside; 是允许的，这将设置列表项标记的类型为圆圈，并将标记位置设置为文本内部，而list-style-image则使用默认值。

此外，list-style属性也接受inherit值，表示元素应该继承其父元素的list-style属性值。

案例：使用简写属性设置所有列表属性

ul.custom-list {
  list-style: square inside url('custom-bullet.png');
}

<ul class="custom-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

在这个案例中，我们使用list-style简写属性一次性设置了所有列表属性。这里我们尝试将列表项标记设置为方块，并指定标记应位于文本内部。此外，我们还提供了一个图像URL作为备选标记，如果图像加载失败，将使用方块作为标记。
请注意，当使用list-style-image时，如果图像不可用，浏览器将回退到使用list-style-type指定的值。因此，在上面的例子中，如果custom-bullet.png无法加载，浏览器将使用方块作为列表项标记。

轮廓样式`outline`

样式名称	样式的值	说明
outline		简写方式
outline-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	轮廓颜色
outline-style		轮廓样式
outline-width	thin（细）、medium（默认）、thick（粗）、px，em数值	设置轮廓宽度

outline-style

outline-style是CSS中的一个属性，主要用于设置元素的整个轮廓的样式。这个属性不能设置为none，否则轮廓将不会出现。

outline-style属性的值包括以下几种：

dotted：定义点状的轮廓。
dashed：定义虚线轮廓。
solid：定义实线轮廓。
double：定义双线轮廓。双线的宽度等同于outline-width的值。
groove：定义3D凸槽轮廓。
ridge：定义3D凸边轮廓。
inset：定义3D凹边轮廓。
outset：定义3D凸边轮廓。
hidden：定义隐藏的轮廓。
none：常用于消除input标签的聚焦

请注意，outline-style属性需要始终在outline-color属性之前声明，因为元素只有在获得轮廓之后才能改变其轮廓的颜色。
此外，outline-style属性是outline属性的一个子属性，outline是一个简写属性，用于同时设置outline-color、outline-style和outline-width。例如，outline: 2px solid blue;会设置一个宽度为2像素、样式为实线、颜色为蓝色的轮廓。

outline

outline 是 CSS 中的一个简写属性，用于在一个元素周围绘制轮廓线。轮廓线不会占据元素的空间，也不会影响元素的布局，它位于元素的边框之外。outline 属性是 outline-color、outline-style 和 outline-width 这三个属性的简写形式。

`outline` 的值

outline 的值按照以下顺序设置：

outline-color：轮廓的颜色。
outline-style：轮廓的样式（如 dotted、dashed、solid、double、groove、ridge、inset、outset 或 hidden）。
outline-width：轮廓的宽度。

示例

div {
  outline: 2px solid red;
}

在这个示例中，<div> 元素将有一个红色的、2像素宽的实线轮廓。

细节

如果 outline-style 的值为 none 或未指定，则 outline 不会显示，即使指定了其他两个属性的值。
outline 不会影响元素的尺寸或布局。
outline 总是绘制在元素的边框之外，即使边框是透明的。
outline 不会引发滚动条的出现，即使它超出了元素的可见区域。

边框样式

样式名称	样式的值	说明
border-image		使用简写方式用图片来创建边框
border-image-source		图像的路径（通常使用URL）
border-image-slice		控制边框图像的切片区域
border-image-width		定义边框图像的宽度
border-image-outset		定义边框图像超出边框盒的量
border-image-repeat		规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）

border-image

border-image是一个CSS属性，用于给元素的边框添加背景图片。通过这个属性，你可以为元素的边框指定一个图片，并根据需要进行剪裁、缩放和重复。

border-image是一个简写属性，实际上是由以下属性集合而成：

border-image-source：用于指定要用于绘制边框的图像的位置。可以是一个URL，指向一个图片文件，也可以是一个CSS gradient。
border-image-slice：定义图像边界向内偏移的量，即如何切割图片以用作边框的各个部分。
border-image-width：定义图像边框的宽度。可以指定一个或多个值，表示边框的各个部分的宽度。
border-image-outset：用于指定在边框外部绘制border-image-area的量。
border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

当使用border-image时，它会替换掉border-style属性所设置的边框样式。需要注意的是，Internet Explorer 10及更早的版本不支持border-image属性，而Safari 5支持替代的-webkit-border-image属性。

下面是一个使用border-image的示例代码：

div {
  border: 10px solid transparent; /* 设置一个透明的实线边框 */
  border-image: url('border.png') 30 30 30 30 round round; /* 定义边框图片和显示方式 */
}

在这个示例中，首先设置了一个10px的透明实线边框，然后通过border-image来定义边框的外观，使用了border.png这个图片，并指定了图片切割的尺寸以及边框图片如何填充和重复。

border-image-source

border-image-source是CSS中border-image属性的一部分，它用于指定要用作元素边框的图像。通过此属性，你可以定义一个图像的路径（通常使用URL），这个图像将替代传统的边框样式，并围绕元素的外围。

其语法结构如下：

border-image-source: none | image;

其中：

none：表示不使用图像作为边框。
image：指定用作边框的图像的路径，通常使用url()函数来包含图像的路径。

如果border-image-source的值为none，或者指定的图像无法加载或显示，那么将不会应用图像边框，而是会使用border-style属性中设置的边框样式。

通常，border-image-source会与其他border-image相关的属性一起使用，如border-image-slice、border-image-width、border-image-outset和border-image-repeat，以创建一个完整的边框图像效果。

下面是一个简单的示例，展示了如何使用border-image-source：

div {
  /* 创建一个透明的边框以容纳图像边框 */
  border: 10px solid transparent;
  /* 指定边框图像的路径 */
  border-image-source: url('border.png');
  /* 定义图像如何被切片 */
  border-image-slice: 30;
  /* 定义边框图像的宽度 */
  border-image-width: 10px;
  /* 定义边框图像的平铺方式 */
  border-image-repeat: repeat;
}

在这个例子中，<div>元素将有一个使用border.png图像作为其边框的样式。图像会被切片，并根据border-image-repeat的值重复以填充边框。

border-image-slice

border-image-slice 是 CSS3 中的一个属性，它用于控制边框图像的切片区域。具体来说，这个属性定义了如何将边框图像切割成不同的部分，并应用到元素的各个边框上。

border-image-slice 属性的语法如下：

border-image-slice: number|%|fill;

这里的值可以是：

number：代表图像中像素的数量（如果是光栅图像）或矢量坐标（如果是矢量图像）。
%：相对于图像尺寸的百分比值，图像的宽度影响水平偏移，高度影响垂直偏移。
fill：保留边框图像的中间部分，否则中间部分会被丢弃。

border-image-slice 属性将边框图像切割成9个区域：4个角、4条边以及一个中间区域。如果省略了某个值，它会采用之前的值作为默认值。例如，如果省略了第四个值，它将采用第三个值；如果省略了第三个值，它将采用第二个值；如果省略了第二个值，它将采用第一个值。

使用 border-image-slice 时，通常还会配合其他 border-image 相关的属性，如 border-image-source（定义边框图像的路径）、border-image-width（定义边框图像的厚度或宽度）、border-image-outset（定义边框图像的外延尺寸）以及 border-image-repeat（定义边框图像的平铺方式）。

例如：

div {
  border: 10px solid transparent; /* 创建一个透明的边框 */
  border-image-source: url('border.png'); /* 指定边框图像的路径 */
  border-image-slice: 30; /* 定义图像如何被切片 */
  border-image-width: 10px; /* 定义边框图像的宽度 */
  border-image-repeat: repeat; /* 定义边框图像的平铺方式 */
}

在这个例子中，<div> 元素将使用 border.png 图像作为其边框，图像被切割成9个区域，并根据 border-image-repeat 的值重复以填充边框。

border-image-width

border-image-width 是 CSS3 中的一个属性，它用于定义边框图像的宽度。这个属性指定了边框图像应用到元素边框的各个边时的尺寸。

border-image-width 的语法如下：

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4};

这里的值可以是：

<length>：一个固定的长度值，如 px、em 等。
<percentage>：相对于边框区域大小的百分比。
<number>：一个数字，它将被视为与 border-width 相同单位的值。
auto：让浏览器自动计算宽度，这通常基于 border-image-slice 的值。

border-image-width 可以接受一到四个值，分别对应于上、右、下、左四个边。如果只提供一个值，它将应用于所有四个边；如果提供两个值，第一个应用于上下边，第二个应用于左右边；如果提供三个值，第一个应用于上边，第二个应用于左右边，第三个应用于下边；如果提供四个值，则分别应用于上、右、下、左四个边。

在使用 border-image-width 时，通常会先定义一个透明的边框来作为图像边框的容器，然后使用 border-image-source 指定图像，border-image-slice 定义如何切割图像，最后使用 border-image-width 来定义图像的宽度。

例如：

div {
  border: 10px solid transparent; /* 创建一个透明的边框作为容器 */
  border-image-source: url('border.png'); /* 指定边框图像的路径 */
  border-image-slice: 30; /* 定义图像如何被切片 */
  border-image-width: 10px; /* 定义边框图像的宽度 */
  border-image-repeat: repeat; /* 定义边框图像的平铺方式 */
}

在这个例子中，<div> 元素的边框将由 border.png 图像填充，图像被切片，并且宽度设置为 10px。border-image-repeat 属性定义了图像的平铺方式。

border-image-outset

border-image-outset是CSS3的一个属性，用于指定边框图像在边框外部绘制的量，即边框图像超过边框盒的量。这个属性是border-image简写属性的一部分，允许你控制边框图像如何超出元素的边框盒。

语法上，border-image-outset接受长度（length）或数字（number）作为值。长度值直接指定边框图像与边框的距离，而数字值则代表边框宽度（border-width）的倍数。

当使用长度值时，它定义了边框图像从边框边缘向外扩展的具体距离。默认值为0，意味着边框图像不会超出边框盒。
当使用数字值时，它定义了边框图像超出边框盒的量是边框宽度的多少倍。

此属性可以接受一到四个值，分别对应上、右、下、左四个方向。如果省略某个值，它将采用之前的值作为默认值。例如，如果省略了第四个值，它将与第二个值相同；如果省略了第三个值，它将与第一个值相同；如果省略了第二个值，它将与第一个值相同。

重要的是要注意，border-image-outset属性仅对设置了border-image-source的元素生效，即那些具有边框图像的元素。此外，这个属性不允许使用负值。

以下是一个使用border-image-outset的示例：

div {
  border: 10px solid transparent; /* 创建一个透明的边框作为容器 */
  border-image-source: url('border.png'); /* 指定边框图像的路径 */
  border-image-slice: 30; /* 定义图像如何被切片 */
  border-image-width: 10px; /* 定义边框图像的宽度 */
  border-image-outset: 5px; /* 定义边框图像超出边框盒的量 */
  border-image-repeat: repeat; /* 定义边框图像的平铺方式 */
}

在这个例子中，<div>元素的边框图像将超出其边框盒5像素。

border-image-repeat

border-image-repeat 是 CSS3 中的一个属性，用于规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。它定义了边框图像如何在其边框盒内延展和铺排。

border-image-repeat 的语法如下：

border-image-repeat: stretch | repeat | round | space;

其中，各个值的含义如下：

stretch：拉伸图像来填充区域。图像会被拉伸以适应边框的尺寸。
repeat：平铺（重复）图像来填充区域。图像会重复出现以填满边框区域。
round：类似 repeat 值，但如果无法完整平铺所有图像，则对图像进行缩放以适应区域。这意味着图像可能会被缩小或放大以适应边框的尺寸，同时保持图像的完整性。
space：类似 repeat 值，但如果无法完整平铺所有图像，扩展空间会分布在图像周围。这会在图像之间添加间隔，以填满边框区域。

此外，border-image-repeat 可以接受两个值，分别用于水平和垂直方向的平铺方式。如果省略第二个值，则采取与第一个值相同的值。

例如：

div {
  border: 10px solid transparent; /* 创建一个透明的边框作为容器 */
  border-image-source: url('border.png'); /* 指定边框图像的路径 */
  border-image-slice: 30; /* 定义图像如何被切片 */
  border-image-width: 10px; /* 定义边框图像的宽度 */
  border-image-repeat: repeat; /* 定义边框图像的平铺方式 */
}

在这个例子中，<div> 元素的边框将使用 border.png 图像填充，并且图像会重复出现以填满边框区域。

透明度样式

在CSS中，有多种方式可以设置元素的透明度。以下是几种常用的方法：

使用 `opacity` 属性

opacity 属性用于设置整个元素的透明度。其值范围从0（完全透明）到1（完全不透明）。

.element {
    opacity: 0.5; /* 半透明 */
}

请注意，使用 opacity 会影响元素及其所有子元素的透明度。

使用 `rgba` 颜色值

rgba 颜色值允许你指定红色、绿色、蓝色和alpha（透明度）通道的值。Alpha通道的值范围也是从0（完全透明）到1（完全不透明）。

.element {
    background-color: rgba(255, 0, 0, 0.5); /* 半透明的红色背景 */
}

注：这种方法仅影响元素的背景色或边框色，而不会影响元素的内容或子元素。

使用 `filter` 属性

filter 属性允许你对元素应用各种视觉效果，包括透明度。使用 filter: opacity(value) 可以设置元素的透明度，其中 value 是介于0到1之间的数值。

.element {
    filter: opacity(0.5); /* 半透明 */
}

这种方法与 opacity 属性类似，但它提供了更多的控制选项，并且不会影响元素的布局。然而，与 opacity 不同的是，filter 不会触发浏览器的硬件加速，因此可能在某些情况下性能较差。

使用 `background-clip` 和伪元素

这种方法比较复杂，但可以实现更精细的透明度控制，例如仅对背景图像应用透明度而不影响文本。这通常涉及使用伪元素（如 ::before 或 ::after）和 background-clip 属性。

.element {
    position: relative;
    z-index: 1;
}

.element::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('image.jpg') no-repeat center center / cover;
    opacity: 0.5;
    z-index: -1;
}

在这个例子中，我们创建了一个伪元素并将其放置在主元素下方。然后，我们给伪元素设置了背景图像和透明度，而主元素的内容则保持不透明。

每种方法都有其优点和局限性，因此选择哪种方法取决于你的具体需求和目标。

高度宽度样式

样式名称	样式的值	说明
height	px数值	元素的高度
width	px数值	元素的宽度
max-height	px数值	最大高度
max-width	px数值	最大宽度
min-height	px数值	最小高度
min-width	px数值	最小高度

width

在CSS中，width是一个属性，用于设置元素的宽度。该属性接受各种类型的值，这些值定义了元素内容区域的宽度，而不包括其边框、内边距或外边距。以下是关于CSS中width属性的一些详细信息和用法：

值类型

固定值：你可以使用像素（px）、厘米（cm）、毫米（mm）、英寸（in）、点（pt）、em、rem、vw、vh等固定单位来设置元素的宽度。例如：width: 300px;
百分比值：你可以使用相对于其包含块（通常是父元素）宽度的百分比来设置元素的宽度。例如：width: 50%;
auto：当设置为auto时，浏览器会自动计算元素的宽度。这是元素的默认值，通常用于块级元素，它们会尽可能占据其父元素的全部宽度。
fit-content：这个值允许元素根据其内容来设置宽度，但不超过其最大内容宽度。
max-content 和 min-content：这两个值分别根据元素的最大和最小内容宽度来设置元素的宽度。
calc()：你可以使用calc()函数来计算宽度。例如，你可以设置宽度为width: calc(50% - 20px);

应用场景

块级元素：对于块级元素（如<div>、<p>、<h1>等），width属性通常用于限制或扩展其水平尺寸。默认情况下，块级元素会占据其父元素的全部宽度。
内联元素和行内块元素：虽然内联元素（如<span>）的宽度由其内容决定，但行内块元素（如设置display: inline-block;的元素）可以使用width属性来调整其宽度。
响应式设计：使用百分比或视窗单位（vw）设置width可以使元素在不同屏幕尺寸下保持相对大小，实现响应式设计。

注意事项

设置width时，如果元素有内边距（padding）和边框（border），这些也会占用空间。如果需要考虑内边距和边框，可以使用box-sizing: border-box;来确保width和height属性包含内容、内边距和边框。
对于绝对定位（position: absolute; 或 position: fixed;）的元素，width将定义元素的宽度，不考虑其位置如何影响文档流中的其他元素。

height

在CSS中，height属性用于设置HTML元素的高度。这个属性决定了元素内容区域的高度，不包括边框、内边距和外边距。和width属性类似，height属性也接受多种类型的值，允许你以不同的方式控制元素的高度。

值类型

固定值：你可以使用像素（px）、厘米（cm）、毫米（mm）、英寸（in）、点（pt）、em、rem、vh等固定单位来设置元素的高度。例如：height: 200px;
百分比值：你可以使用相对于其包含块（通常是父元素）高度的百分比来设置元素的高度。例如：height: 75%;
auto：当设置为auto时，浏览器会自动计算元素的高度。这是元素的默认值，通常用于块级元素，它们会根据内容的高度自动调整其高度。
fit-content：这个值允许元素根据其内容来设置高度，但不超过其最大内容高度。
max-content 和 min-content：这两个值分别根据元素的最大和最小内容高度来设置元素的高度。
calc()：你可以使用calc()函数来计算高度。例如，你可以设置高度为height: calc(50vh + 20px);

应用场景

块级元素：块级元素（如<div>、<p>、<h1>等）默认会尽可能占据其父元素的全部高度，但通过设置height属性，你可以限制或扩展其垂直尺寸。
绝对定位和固定定位元素：对于绝对定位（position: absolute;）或固定定位（position: fixed;）的元素，height属性将定义元素的高度，而不考虑其位置如何影响文档流中的其他元素。
Flexbox 和 Grid 布局：在Flexbox（弹性盒模型）和Grid（网格）布局中，height属性通常与这些布局系统提供的对齐和尺寸调整功能一起使用，以实现更复杂的布局效果。

注意事项

当设置height时，如果元素有内边距（padding）和边框（border），这些也会占用空间。如果你希望height属性包含内容、内边距和边框，可以使用box-sizing: border-box;。
对于行内元素（如<span>），height属性通常不起作用，因为行内元素的高度由其内容决定。但是，如果你将行内元素设置为display: inline-block;，那么height属性将起作用。

外边距样式

样式名称	样式的值	说明
margin	px数值	标签外边距简写
margin-left	px数值	标签左外边距
margin-right	px数值	标签右外边距
margin-top	px数值	标签上外边距
margin-bottom	px数值	标签下外边距

案例

以下是一个使用CSS margin 属性的简单案例。假设我们有一个网页，其中包含一个标题（h1）和一个段落（p）。我们希望为这些元素设置一些外边距，以便它们在页面上更好地呈现。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

CSS代码 (styles.css)：

/* 为body元素设置一些基本样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0; /* 移除body的默认外边距 */
  padding: 0; /* 移除body的默认内边距 */
  background-color: #f4f4f4;
}

/* 为h1元素设置样式和上边距 */
h1 {
  color: #333;
  text-align: center;
  margin-bottom: 20px; /* 设置h1元素的下边距为20像素 */
}

/* 为p元素设置样式和上下边距 */
p {
  color: #666;
  text-align: justify;
  margin-top: 10px; /* 设置p元素的上边距为10像素 */
  margin-bottom: 30px; /* 设置p元素的下边距为30像素 */
}

在这个例子中，我们为body元素设置了基本的字体和背景颜色，并移除了默认的边距（因为浏览器可能会为body元素设置默认的外边距）。接着，我们为h1元素设置了文本颜色、对齐方式和下外边距（margin-bottom）。最后，我们为p元素设置了文本颜色、对齐方式、上外边距（margin-top）和下外边距（margin-bottom）。

内边距样式

样式名称	样式的值	说明
padding	px数值	标签内边距简写
padding-xx		同margin-xx一致

案例

下面是一个使用CSS padding 属性的案例。在这个例子中，我们将为一个<div>元素设置内边距，并观察其对元素外观和布局的影响。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="padded-box">
    <p>这是一个带有内边距的盒子。</p>
  </div>
</body>
</html>

CSS代码 (styles.css)：

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.padded-box {
  width: 200px;
  height: 100px;
  background-color: #333;
  color: #fff;
  padding: 20px; /* 设置内边距为20像素 */
  box-sizing: border-box; /* 使得padding和border包含在width和height内 */
}

.padded-box p {
  margin: 0; /* 移除段落默认的边距 */
}

在这个案例中，我们创建了一个名为.padded-box的CSS类，它应用于<div>元素。.padded-box设置了元素的宽度、高度、背景色和字体色，并使用padding属性为元素添加了20像素的内边距。box-sizing: border-box;确保了padding和border的值被包含在元素的width和height中，而不是增加其总尺寸。

此外，我们移除了段落<p>元素的默认外边距margin，以确保段落不会与.padded-box的内边距重叠。

边线样式

样式名称	样式的值	说明
border		边线简写
border-width	px数值	边线粗细
border-style	实线（`solid`）、虚线（`dashed`）、点线（`dotted`）和双线（`double`）	边线样式
border-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	边线颜色
border-radius	px数值，百分比	边线弧度

border

在CSS中，border是一个简写属性，用于在一个声明中设置所有的边框属性。这些属性包括边框的宽度（border-width）、边框的样式（border-style）和边框的颜色（border-color）。

边框宽度（border-width）：指定边框的宽度。你可以使用像素（px）、点（pt）、em等单位来定义。例如，border-width: 1px; 将边框宽度设置为1像素。
边框样式（border-style）：定义边框的样式。常见的样式包括实线（solid）、虚线（dashed）、点线（dotted）和双线（double）等。例如，border-style: solid; 将边框样式设置为实线。
边框颜色（border-color）：设置边框的颜色。你可以使用颜色名称、十六进制颜色代码、RGB或RGBA值来定义。例如，border-color: red; 将边框颜色设置为红色。

此外，border属性也可以同时设置这三个值，例如 border: 1px solid red; 将边框宽度设置为1像素，样式为实线，颜色为红色。

除了上述三个主要属性，你还可以使用border-top、border-right、border-bottom和border-left属性来分别设置上、右、下、左四个边框的样式、宽度和颜色。

这里是一个简单的CSS边框样式的例子：

div {
  border: 2px solid black; /* 设置div元素边框宽度为2像素，样式为实线，颜色为黑色 */
  padding: 10px; /* 设置内边距为10像素 */
}

在这个例子中，<div>元素的边框被设置为2像素宽、实线样式和黑色。同时，元素的内容与边框之间还有10像素的内边距。

记住，边框不会占用额外的空间，它是添加在元素的总尺寸上的。如果你希望边框包含在元素的宽度和高度内，可以使用box-sizing: border-box;属性。

border-radius

以下是几个使用border-radius属性的CSS案例，展示了如何应用这个属性来创建不同的圆角效果：

案例 1：基本圆角

假设我们有一个简单的<div>元素，我们希望给它的四个角都添加相同的圆角。

<div class="basic-rounded"></div>

.basic-rounded {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 15px; /* 所有角都是15px的圆角 */
}

案例 2：不同角的圆角

如果我们想要每个角的圆角都不同，我们可以提供四个值给border-radius属性。

<div class="different-rounded"></div>

.different-rounded {
  width: 200px;
  height: 100px;
  background-color: #2196F3;
  border-radius: 20px 30px 40px 50px; /* 左上角20px, 右上角30px, 右下角40px, 左下角50px */
}

案例 3：半圆形效果

我们可以使用border-radius来创建一个半圆形的效果，比如一个侧边栏的展开/收缩按钮。

<div class="half-circle"></div>

.half-circle {
  width: 100px;
  height: 50px;
  background-color: #f44336;
  border-radius: 50px 50px 0 0; /* 上半部分为半圆，下半部分扁平 */
}

案例 4：椭圆形效果

使用不同的水平半径和垂直半径，可以创建出椭圆形的效果。

<div class="ellipse"></div>

.ellipse {
  width: 200px;
  height: 100px;
  background-color: #e91e63;
  border-radius: 100px / 50px; /* 水平半径为100px, 垂直半径为50px */
}

案例 5：百分比单位

使用百分比单位可以使得圆角的大小相对于元素的尺寸自动调整。

<div class="percentage-rounded"></div>

.percentage-rounded {
  width: 200px;
  height: 100px;
  background-color: #9C27B0;
  border-radius: 50%; /* 所有角都是元素宽度/高度一半的圆角，形成圆形 */
}

背景样式

样式名称	样式的值	说明
background		背景样式简写
background-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	背景颜色
background-position		背景位置
background-size		设置背景大小
background-repeat		设置背景图片是否重复
background-image		背景图片
background-attachment		设置背景图片是否随滚轮滚动（需要和overflow:auto一起使用）

background

background是CSS（层叠样式表）中的一个简写属性，用于在一个声明中设置所有背景属性。这些属性包括背景颜色（background-color）、背景图像（background-image）、背景位置（background-position）、背景尺寸（background-size）、背景重复（background-repeat）、背景原点（background-origin）、背景裁剪（background-clip）以及背景附着（background-attachment）。

例如，如果你想为一个元素设置背景颜色为红色，并指定一个背景图像，你可以这样写：

element {
  background: red url('image.jpg');
}

在这个例子中，element的背景颜色将是红色，并且背景图像将是image.jpg。需要注意的是，如果背景图像不能完全覆盖元素的背景区域，那么剩余的部分将显示为背景颜色。

此外，你还可以使用background-position来指定背景图像在元素内的位置，比如：

element {
  background: red url('image.jpg') center top;
}

在这个例子中，背景图像将位于元素的顶部中央，而背景颜色则填充图像未覆盖的剩余部分。

你还可以使用background-size来控制背景图像的尺寸，例如：

element {
  background: red url('image.jpg') center top / 50% auto;
}

在这个例子中，背景图像的宽度将被设置为元素宽度的50%，高度则自动调整以保持图像的原始纵横比。

background-repeat属性则用来定义背景图像是否以及如何重复。例如，background-repeat: no-repeat; 表示背景图像不重复。

background-origin和background-clip属性则分别用来定义背景的定位区域和绘制区域。

background-attachment属性则用来定义背景图像是否固定或者随着页面的其余部分滚动。例如，background-attachment: fixed; 表示背景图像是固定的，不会随着页面的滚动而移动。

使用background简写属性可以简化样式表的编写，因为它允许你在一个声明中设置多个背景属性。但是，要注意如果不设置某个属性，它将使用默认值。

需要注意的是，虽然background属性是一个简写属性，但在某些情况下，使用单独的属性（如background-color、background-image等）可能更为清晰和易于维护。此外，不是所有的浏览器都支持background属性的所有值，因此在编写CSS时需要考虑浏览器的兼容性。

background-color

background-color   设置背景颜色，如果存在background-image，则设置background-color就没有意义

background-image

background-image:url(图片路径)

background-image与img的区别

img标签在div盒子里面不重复，而background-image属性在大div盒子里面重复
总结：img不重复，background-image图片重复

background-position

background-position:x y;设置图片位

		x轴   left  center  right  或者百分比
		y轴   top  center  bottom  或者百分比
如果给一个值center，那么第二个值默认为center（50%）

background-size

background-size:x y;设置背景大小（常用background-image联用，不与img标签联用）
		background-size:cover;等比例缩放（盒子有多大，图片就有多大）
		background-size:contain;等比例缩放到铺满x/y轴其中的一个

background-size 是 CSS 中的一个属性，用于设置背景图像的大小。通过这个属性，你可以控制背景图像如何填充其元素的背景区域。

background-size 的常见值包括：

auto：默认值。背景图像将保持其原始尺寸。
cover：背景图像将被缩放以完全覆盖背景区域，但可能会裁剪图像以保持其宽高比。
contain：背景图像将被缩放以完全适应背景区域，可能会在背景区域中留下空白，以确保图像的宽高比不被破坏。
<length>：使用具体的长度值（如 px, em, rem 等）来设置背景图像的宽度和高度。你可以指定两个值（例如 200px 100px），第一个值用于宽度，第二个值用于高度。如果只指定一个值，则第二个值将被设置为 auto。
<percentage>：使用百分比来设置背景图像的宽度和高度。百分比是相对于背景区域的大小来计算的。同样，你可以指定两个值（例如 50% 100%），或者只指定一个值。

示例：

/* 使用 cover 值，背景图像将覆盖整个元素，但可能会被裁剪 */
.element {
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

/* 使用具体长度值设置背景图像大小 */
.element {
  background-image: url('path/to/image.jpg');
  background-size: 300px 200px;
}

/* 使用百分比设置背景图像大小 */
.element {
  background-image: url('path/to/image.jpg');
  background-size: 50% 100%;
}

在实际应用中，background-size: cover; 是一个非常常用的值，因为它可以确保背景图像总是完全覆盖元素的背景区域，而不管元素的尺寸如何变化。这在响应式设计中特别有用，因为你可以确保背景图像在不同的屏幕尺寸和分辨率下都能良好地显示。

需要注意的是，background-size 属性不会改变背景图像本身的尺寸，而只是改变了它在元素背景区域中的显示尺寸。如果背景图像被缩放，它可能会变得模糊或像素化，这取决于图像的原始质量和缩放比例。

background-attachment

background-attachment设置背景图片是否随滚轮滚动（需要和overflow:auto一起使用）
		background-attachment:scroll;  默认值，背景图像会随着页面的其余部分一起滚动。
		background-attachment:fixed;  背景不随着滚动而滚动
		background-attachment:local;  背景和内容都滚动

background-repeat

background-repeat:设置背景图片是否重复（不与img标签联用）
		background-repeat:no-repeat;不重复
		background-repeat:repeat;xy轴重复
		background-repeat:repeat-x;x轴平铺
		background-repeat:repeat-y;y轴平铺

overflow内容溢出处理样式

在CSS中，overflow属性用于控制当内容超出其块级容器的大小时的行为。具体来说，overflow: auto; 值表示当内容溢出容器时，应该为容器添加滚动条（如果必要），以便用户能够滚动查看被隐藏的内容。
这个属性通常用于确保页面布局不会因为内容过多而崩溃，同时为用户提供一种查看所有内容的方式。

overflow属性有几个可能的值：

visible：默认值。内容不会被裁剪，会呈现在元素框之外。
hidden：内容会被裁剪，并且其余内容是不可见的。
scroll：内容会被裁剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容超出容器，滚动条将显示；否则，不显示滚动条。（常用）

以下是如何使用overflow属性的一个简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overflow Example</title>
<style>
  .overflow-box {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    /* 尝试使用不同的overflow值，如visible, hidden, scroll, auto */
    overflow: auto;
  }
</style>
</head>
<body>

<div class="overflow-box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>

在这个例子中，.overflow-box 类定义了一个固定宽度和高度的 div 容器，并且设置了不同的 overflow 值来观察内容如何显示。

当 overflow 设置为 visible 时，超出容器的文本将继续显示在容器外部。
当 overflow 设置为 hidden 时，超出容器的文本将被隐藏，不会显示滚动条。
当 overflow 设置为 scroll 时，无论内容是否超出容器，滚动条都会显示。
当 overflow 设置为 auto 时，如果内容超出容器，滚动条将显示；否则，不显示滚动条。

visibility可见样式

在CSS中，visibility属性用于定义一个元素是否可见。这个属性有几个可能的值：

visible：默认值，元素是可见的。
hidden：元素是不可见的，但其占据的空间仍然保留，其他内容不会占据这个空间。（内容在网页上不显示）
collapse：这个值主要用在表格元素上，会删除一行或一列，不会影响表格的布局。如果用在其他元素上，效果与hidden相同。
inherit：元素继承其父元素的visibility属性值。

需要注意的是，即使元素被设置为visibility: hidden，它仍然会占据页面上的空间，只是内容不可见。如果你想让元素不仅内容不可见，而且不占据页面空间，你应该使用display属性，并将其设置为none。

下面是一个简单的示例，展示如何使用visibility属性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Visibility Example</title>
<style>
  .hidden-element {
    visibility: hidden;
  }
</style>
</head>
<body>

<div>这是一个可见的元素。</div>
<div class="hidden-element">这是一个不可见的元素，但它仍然占据空间。</div>
<div>这是另一个可见的元素。</div>

</body>
</html>

在这个例子中，具有hidden-element类的div元素的内容是不可见的，但由于visibility属性设置为hidden，它仍然占据页面上的空间，不会影响到其他元素的布局。

display

在CSS中，display属性用于控制元素（这里的元素指的是标签）的显示类型以及布局方式。这个属性对于调整页面的布局和元素的显示方式非常关键。

display属性的常见取值包括：

block：将元素呈现为块级元素。块级元素会独占一行，并且会在行与行之间创建一个新的换行空间。常见的块级元素有<div>、<p>、<h1>到<h6>等。
inline：将元素呈现为内联元素。内联元素不会独占一行，而是与其他元素并排显示。常见的内联元素有<span>、<a>等。
inline-block：将元素呈现为内联块级元素。这种元素既具有内联元素的并排显示特性，又具有块级元素设置长宽的属性。
none：将元素（标签）隐藏，不仅内容不可见，而且元素本身不会占据页面上的任何空间。

此外，display属性还有一些其他值，比如flex、grid等，用于支持更复杂的布局需求，如弹性布局和网格布局。

例如，如果你想让一个<div>元素表现为内联元素，你可以这样写：

div {
  display: inline;
}

这样，<div>元素就会失去默认的块级特性，不再独占一行，而是与其他元素并排显示。

需要注意的是，display属性只影响元素的显示类型和布局方式，不会改变元素的内容或结构。同时，它也不会影响元素的盒模型属性（如宽度、高度、边距等），这些属性需要通过其他CSS属性进行设置。

position

在CSS中，position属性用于设置元素的定位类型，它决定了元素在文档流中的布局方式以及如何与其他元素进行定位。

position属性有以下几个主要的取值：

static：这是position的默认值。元素按照正常的文档流进行布局，不会受到任何特殊的定位影响。它不会受到top、bottom、left、right这些属性的影响。
relative：相对定位。元素相对于它在正常文档流中的原始位置进行定位。这意味着，你可以使用top、bottom、left、right属性来移动元素，但它原本在文档流中的空间仍然保留，不会影响到其他元素的位置。
absolute：绝对定位。元素相对于最近的已定位祖先元素（即position属性不是static的父元素）进行定位。如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位。绝对定位的元素会脱离正常的文档流，不再占据空间，其他元素会重新排列以填补该元素留下的空间。
fixed：固定定位。元素相对于浏览器窗口进行定位，即使页面滚动，它也会始终停留在相同的位置。固定定位的元素也会脱离文档流。
sticky：粘性定位。这是CSS3新增的一个定位类型。粘性定位的元素在跨越特定滚动阈值之前为相对定位，之后为固定定位。这可以用于实现一些特殊的滚动效果。

除了上述的五种定位方式，position属性还有其他一些可能的值，如inherit（继承父元素的position属性值）等。

需要注意的是，当元素的position属性设置为absolute、relative、fixed或sticky时，你可以使用top、bottom、left、right属性来精确控制元素的位置。这些属性定义了元素相对于其定位参考点的偏移量。

vertical-align

CSS中的vertical-align属性用于设置元素的垂直对齐方式。它主要影响行内元素或行内块元素的垂直对齐，而对块级元素则无效。

vertical-align属性的常见取值包括：

baseline：默认值。将元素的基线与父元素的基线对齐。基线是文本字符正常排列的基准线。
sub：将元素的基线对齐到父元素的首选下标位置。这通常用于数学公式中的下标。
super：将元素的基线对齐到父元素的首选上标位置。这通常用于数学公式中的上标。
top：将元素的顶部与其所在行的顶部对齐。
text-top：将元素的顶部与其父元素最高文字的顶部对齐。
middle：将元素的中部与父元素的基线加上父元素字母x的一半对齐。这通常用于使元素在垂直方向上居中。
bottom：将元素的底部与其所在行的底部对齐。
text-bottom：将元素的底部与其父元素文字的底部对齐。
百分比值：允许指定一个相对于行高的百分比值来定义元素的垂直对齐位置。
length值：允许指定一个固定的长度值来定义元素的垂直对齐位置。可以是正数或负数。

需要注意的是，vertical-align属性仅对行内元素和行内块元素有效，对块级元素无效。块级元素的垂直对齐通常通过其他CSS属性（如margin、padding和position）来控制。

float

在CSS中，float属性用于设置元素（如标签对象）的浮动布局。它主要有以下几个属性值：

left：指定元素向左浮动，将元素放到容器的左侧，其他内容将围绕在其右侧。
right：指定元素向右浮动，将元素放到容器的右侧，其他内容将围绕在其左侧。
none：这是float属性的默认值，表示元素不浮动，将按照文档流的顺序排列，不会影响其他元素的位置。
inherit：元素继承其父元素的浮动方式。

当元素被设置为浮动时，它会脱离正常的文档流，这意味着它不再占据原有位置，并可能影响周围元素的布局和对齐。浮动元素会向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。如果浮动的元素与其他元素重叠，则会根据元素的顺序进行覆盖。此外，浮动元素可能会造成容器塌陷，即容器的高度塌陷为0，这时可以通过清除浮动来解决，如使用clear属性来清除前面的浮动。

clear

在CSS中，clear属性用于控制元素的浮动效果，特别是用于指定一个元素是否要移动到它之前的浮动元素的下面。它主要用来处理浮动元素与非浮动元素之间的布局关系。

clear属性可以定义元素的哪一侧不允许其他浮动元素。它有以下几个可能的取值：

none：默认值，允许浮动元素出现在元素的两侧。
left：在元素的左侧不允许浮动元素。如果当前元素的左侧有浮动元素，那么该元素会强制另起一行。
right：在元素的右侧不允许浮动元素。如果当前元素的右侧有浮动元素，那么该元素会强制另起一行。
both：在元素的左右两侧均不允许浮动元素。
inherit：元素继承其父元素的clear属性值。

当clear属性应用于非浮动元素时，它的垂直外边距会被折叠。而当clear属性应用于浮动元素时，它的垂直外边距不会被折叠。

filter

CSS中的filter属性用于对元素应用图形效果，例如模糊、亮度、对比度、颜色反转等。filter属性可以接受多个滤镜函数，每个函数用空格分隔。

以下是一些常用的滤镜函数：

blur()：用于对元素应用模糊效果。
brightness()：用于调整元素的亮度。
contrast()：用于调整元素的对比度。
drop-shadow()：用于给元素添加阴影效果。
grayscale()：将元素转换为灰度图像。
hue-rotate()：改变元素的色相。
invert()：反转元素的颜色。
opacity()：调整元素的透明度。
saturate()：调整元素的饱和度。
sepia()：将元素转换为深褐色图像。

此外，filter属性还支持url()函数，允许应用SVG滤镜。

此外，filter属性在JavaScript中并不存在，但在JavaScript的数组处理中，有一个filter()方法，它用于创建一个新数组，其包含通过所提供函数实现的测试的所有元素。这与CSS中的filter属性是完全不同的概念。

z-index

在CSS中，z-index属性用于设置元素的堆叠顺序，即当元素重叠时决定哪个元素应该位于顶部。这个属性只对定位元素（即position属性值不是static的元素）有效。
z-index的值可以是一个整数，包括正整数、负整数或零。较大的z-index值意味着元素将显示在较小的z-index值的元素之上。如果两个元素的z-index值相同，那么它们在文档流中的顺序将决定它们的堆叠顺序：后出现的元素会覆盖先出现的元素。
需要注意的是，z-index仅对定位元素（即position属性值为relative、absolute、fixed或sticky的元素）有效。对于static定位的元素，z-index属性将被忽略。
此外，z-index的堆叠上下文（stacking context）也是一个重要的概念。每个堆叠上下文都有其自己的z-index空间，并且一个元素只能与其所在的堆叠上下文中的其他元素比较z-index值。创建新的堆叠上下文的因素包括元素的position属性值为relative或absolute且z-index值不为auto，元素的position属性值为fixed或sticky，以及某些CSS3的动画和转换等。

resize

在CSS中，resize属性用于调整元素的尺寸。它可以有四个值：none、both、horizontal和vertical。

具体来说:

none表示用户无法调整元素的尺寸；
both表示用户可调整元素的高度和宽度；
horizontal表示用户可调整元素的宽度；
vertical表示用户可调整元素的高度。

然而，在使用resize属性时，需要注意以下几点：

首先，单独设置resize属性是无效的，它需要与overflow属性结合使用才有效
并且overflow属性的值需要设置为auto、hidden或scroll；
其次，并不是所有的元素都可以设置resize属性，比如img和table属性就无法使用resize属性。

box-sizing

CSS中的box-sizing属性用于确定元素的总宽度和高度的计算方式，这包括内容、内边距（padding）、边框（border）以及有时甚至是外边距（margin）。这个属性影响元素框的大小计算方式。

box-sizing属性有两个主要的值：

content-box：这是默认值。当使用此值时，元素的宽度和高度仅包括内容区域，不包括填充、边框或外边距。换句话说，指定的宽度和高度值仅适用于内容框。这意味着，如果你设置一个元素的宽度为100px，并且这个元素有内边距和边框，那么实际绘制到屏幕上的元素宽度将会大于100px，因为内边距和边框会额外增加元素的宽度。
border-box：当使用此值时，元素的宽度和高度包括内容区域、填充和边框。这意味着，如果你设置一个元素的宽度为100px，并且这个元素有内边距和边框，那么这100px将包含内容、内边距和边框。内容区的实际宽度将是width减去(border + padding)的值。外边距仍然添加在指定尺寸的外部，不被包含在box-sizing的计算中。

使用border-box可以使得在设置元素的宽度和高度时更为直观和易于控制，因为你不再需要手动计算并减去内边距和边框的宽度。

除了上述两个值外，box-sizing还有一个值inherit，它表示元素应从其父元素继承box-sizing属性的值。

object-fit

在CSS中，object-fit属性用于确定替换元素（如<img>和<video>）的内容如何适应其容器的尺寸。这尤其有用当元素的宽高比与其内容的宽高比不匹配时。object-fit属性提供了几种不同的选项来控制元素的缩放和裁剪行为。

以下是object-fit属性的可能值：

fill：这是默认值。替换元素的内容将被拉伸以填充元素的整个内容框，这可能导致内容的宽高比失真。
contain：替换元素的内容将被缩放以在保持其宽高比的同时适应元素的内容框。这可能会在元素的内容框内留下空白区域。
cover：替换元素的内容将被缩放以完全覆盖元素的内容框，同时保持其宽高比。这可能导致内容的一部分在元素的边界外被裁剪。
none：替换元素的内容将保持其原始的宽高比和尺寸，不会被缩放。如果内容的尺寸大于元素的内容框，则内容会被裁剪。
scale-down：内容的尺寸将根据none或contain的值进行调整，取两者中较小的那个。这确保了内容不会比其原始尺寸大，同时尽可能地填充元素的内容框。

使用object-fit时，通常会与width和height属性一起设置元素的尺寸，以确保内容能够正确地适应容器。例如：

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

在这个例子中，图片将被缩放以覆盖其容器的宽度，同时保持其宽高比。如果图片的原始宽高比与容器的宽高比不匹配，图片的一部分可能会被裁剪掉，以确保整个容器都被图片覆盖。

需要注意的是，object-fit属性只适用于替换元素，如<img>、<video>、<canvas>、<input type="image">、<object>、<embed>和<svg>等。对于其他非替换元素，如<div>或<p>，object-fit属性是无效的。

属性继承

大部分的文本文字属性都会继承，而div盒子本身的宽高边距边框等等属性不会继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
    <style>
        p{
            color: red;
            font-size:30px;
            font-family: FangSong;
        }
    </style>
</head>
<body>
   <p>今天是<span>下雨天</span></p>
</body>
</html>
 span能继承父级p的文字颜色 所以span 显示的文字颜色也是red

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>练习</title>  
    <style>
       .h1{
        width: 300px;
        height: 300px;
        background-color: blue;
       }
    </style>
</head>
<body>
    <div class="h1"><p>哈哈哈</p></div>
</body>
</html>
p标签并不会继承div的颜色属性