zhsh's blog

CSS Crash Course

发布于 2024-06-30 | 标签: Front-end | 16分钟 | 3894字数

尺寸操作

1. width 和 height

设置宽度和高度

width 和 height 属性用于设置元素的宽度和高度。

.element {
  width: 200px;
  height: 100px;
}

百分比值

你可以使用百分比值来设置相对于父元素的宽度和高度。

.element {
  width: 50%; /* 父元素宽度的 50% */
  height: 75%; /* 父元素高度的 75% */
}

2. max-width 和 max-height

最大宽度和高度

max-width 和 max-height 属性用于设置元素的最大宽度和高度，防止元素超出特定尺寸。

.element {
  max-width: 100px;
  max-height: 50px;
}

3. min-width 和 min-height

最小宽度和高度

min-width 和 min-height 属性用于设置元素的最小宽度和高度，确保元素不会小于特定尺寸。

.element {
  min-width: 100px;
  min-height: 50px;
}

4. box-sizing

盒子模型的调整

box-sizing 属性用于控制元素的盒模型计算方式。

/* 默认值，宽度和高度只包括内容，不包括内边距和边框 */
.element {
  box-sizing: content-box;
}

/* 宽度和高度包括内容、内边距和边框 */
.element {
  box-sizing: border-box;
}

border-box 模型通常更容易管理，因为元素的总宽度和高度不会因为添加内边距或边框而改变。

5. padding 和 margin

内边距

padding 属性用于设置元素内容与边框之间的内边距。

.element {
  padding: 10px; /* 所有内边距 */
  padding-top: 20px; /* 上内边距 */
  padding-right: 15px; /* 右内边距 */
  padding-bottom: 10px; /* 下内边距 */
  padding-left: 5px; /* 左内边距 */
}

外边距

margin 属性用于设置元素与其他元素之间的外边距。

.element {
  margin: 10px; /* 所有外边距 */
  margin-top: 20px; /* 上外边距 */
  margin-right: 15px; /* 右外边距 */
  margin-bottom: 10px; /* 下外边距 */
  margin-left: 5px; /* 左外边距 */
}

自动外边距

margin: auto; 可以用于水平居中一个块级元素。

.element {
  width: 50%;
  margin: auto;
}

6. vw、vh、vmin 和 vmax

视口单位

  • vw：视口宽度的 1%。
  • vh：视口高度的 1%。
  • vmin：视口宽度和高度中的最小值的 1%。
  • vmax：视口宽度和高度中的最大值的 1%。
.element {
  width: 50vw; /* 视口宽度的 50% */
  height: 50vh; /* 视口高度的 50% */
}

7. calc()

动态计算

calc() 函数允许你动态计算值。

.element {
  width: calc(100% - 50px); /* 总宽度减去 50px */
}

8. aspect-ratio

设置宽高比

aspect-ratio 属性用来设置元素的宽高比。

.element {
  aspect-ratio: 16/9;
}

这个属性会根据指定的宽高比自动调整元素的宽度或高度。

背景处理

1. background-color

设置背景颜色

background-color 属性用于设置元素的背景颜色。

.element {
  background-color: lightblue;
}

2. background-image

设置背景图像

background-image 属性用于设置元素的背景图像。

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

3. background-repeat

控制背景图像重复

background-repeat 属性用于控制背景图像的重复方式。

.element {
  background-image: url('image.jpg');
  background-repeat: repeat; /* 默认值，图像在水平和垂直方向重复 */
  /* 其他值 */
  /* background-repeat: no-repeat; 不重复 */
  /* background-repeat: repeat-x; 水平方向重复 */
  /* background-repeat: repeat-y; 垂直方向重复 */
}

4. background-position

设置背景图像的位置

background-position 属性用于设置背景图像的起始位置。

.element {
  background-image: url('image.jpg');
  background-position: center; /* 图像在容器中居中 */
  /* 其他值 */
  /* background-position: top left; 左上角 */
  /* background-position: bottom right; 右下角 */
  /* background-position: 50% 50%; 百分比值 */
  /* background-position: 10px 20px; 像素值 */
}

5. background-size

控制背景图像的大小

background-size 属性用于控制背景图像的大小。

.element {
  background-image: url('image.jpg');
  background-size: cover; /* 图像按比例缩放，覆盖整个容器 */
  /* 其他值 */
  /* background-size: contain; 图像按比例缩放，完全显示在容器内 */
  /* background-size: 100px 100px; 固定大小 */
  /* background-size: 50% 50%; 百分比 */
}

6. background-attachment

控制背景图像的滚动行为

background-attachment 属性用于控制背景图像的滚动行为。

.element {
  background-image: url('image.jpg');
  background-attachment: fixed; /* 背景图像固定，不随滚动条滚动 */
  /* 其他值 */
  /* background-attachment: scroll; 默认值，背景图像随滚动条滚动 */
  /* background-attachment: local; 背景图像随元素内容滚动 */
}

7. background-clip

设置背景绘制区域

background-clip 属性用于设置背景图像的绘制区域。

.element {
  background-image: url('image.jpg');
  background-clip: border-box; /* 背景绘制到边框外边缘 */
  /* 其他值 */
  /* background-clip: padding-box; 背景绘制到内边距外边缘 */
  /* background-clip: content-box; 背景绘制到内容外边缘 */
}

8. background-origin

设置背景图像的起始位置区域

background-origin 属性用于设置背景图像的起始位置区域。

.element {
  background-image: url('image.jpg');
  background-origin: padding-box; /* 背景图像从内边距的外边缘开始 */
  /* 其他值 */
  /* background-origin: border-box; 背景图像从边框的外边缘开始 */
  /* background-origin: content-box; 背景图像从内容的外边缘开始 */
}

9. background-blend-mode

设置背景图像的混合模式

background-blend-mode 属性用于设置背景图像与背景颜色或其他背景图像之间的混合模式。

.element {
  background-image: url('image.jpg'), url('pattern.png');
  background-blend-mode: multiply; /* 将背景图像与背景颜色进行乘法混合 */
  /* 其他值 */
  /* background-blend-mode: screen; 滤色混合 */
  /* background-blend-mode: overlay; 叠加混合 */
  /* 还有其他混合模式，如 darken, lighten, color-dodge, color-burn 等 */
}

10. background

简写属性

background 是一个简写属性，允许你在一个声明中设置所有的背景属性。

.element {
  background: [<background-color>] [<background-image>] [<background-position>] / [<background-size>] [<background-repeat>] [<background-attachment>] [<background-origin>] [<background-clip>] [<background-blend-mode>];
}

示例

/* 设置背景颜色和图像 */
.element {
  background: lightblue url('image.jpg');
}

/* 设置背景颜色、图像和位置 */
.element {
  background: lightblue url('image.jpg') no-repeat right top;
}

/* 设置背景颜色、图像、位置和大小 */
.element {
  background: lightblue url('image.jpg') no-repeat center center / cover;
}

/* 设置所有背景属性 */
.element {
  background: lightblue url('image.jpg') no-repeat center center / cover fixed border-box padding-box multiply;
}

核心内容总结

  • background-color: 设置背景颜色。
  • background-image: 设置背景图像。
  • background-repeat: 控制背景图像的重复方式。
  • background-position: 设置背景图像的起始位置。
  • background-size: 控制背景图像的大小。
  • background-attachment: 控制背景图像的滚动行为。
  • background-clip: 设置背景绘制区域。
  • background-origin: 设置背景图像的起始位置区域。
  • background-blend-mode: 设置背景图像的混合模式。
  • background: 简写属性，允许在一个声明中设置所有的背景属性。

好的，以下是关于 CSS 中文本处理的详细解释，条理清晰并涵盖所有核心内容。

文本处理

1. color

设置文本颜色

color 属性用于设置文本的颜色。

.element {
  color: #333; /* 使用十六进制颜色值 */
  /* color: rgb(51, 51, 51); 使用 RGB 颜色值 */
  /* color: rgba(51, 51, 51, 0.8); 使用 RGBA 颜色值 */
  /* color: hsl(0, 0%, 20%); 使用 HSL 颜色值 */
  /* color: hsla(0, 0%, 20%, 0.8); 使用 HSLA 颜色值 */
}

2. font-family

设置字体系列

font-family 属性用于设置文本的字体系列。

.element {
  font-family: "Arial", Helvetica, sans-serif;
}

3. font-size

设置字体大小

font-size 属性用于设置文本的字体大小。

.element {
  font-size: 16px; /* 使用像素值 */
  /* font-size: 1em; 使用 em 单位 */
  /* font-size: 100%; 使用百分比 */
  /* font-size: 1rem; 使用 rem 单位 */
}

4. font-weight

设置字体粗细

font-weight 属性用于设置文本的字体粗细。

.element {
  font-weight: bold; /* 预定义值 */
  /* font-weight: 700; 使用数值 */
  /* font-weight: normal; 普通 */
  /* font-weight: lighter; 更细 */
  /* font-weight: bolder; 更粗 */
}

5. font-style

设置字体样式

font-style 属性用于设置文本的字体样式。

.element {
  font-style: italic; /* 斜体 */
  /* font-style: normal; 正常 */
  /* font-style: oblique; 伪斜体 */
}

6. font-variant

设置字体变体

font-variant 属性用于设置文本的小型大写字母效果。

.element {
  font-variant: small-caps; /* 小型大写字母 */
  /* font-variant: normal; 正常 */
}

7. line-height

设置行高

line-height 属性用于设置文本的行高。

.element {
  line-height: 1.5; /* 使用倍数 */
  /* line-height: 24px; 使用像素值 */
  /* line-height: 150%; 使用百分比 */
}

8. text-align

设置文本对齐方式

text-align 属性用于设置文本的水平对齐方式。

.element {
  text-align: center; /* 居中对齐 */
  /* text-align: left; 左对齐 */
  /* text-align: right; 右对齐 */
  /* text-align: justify; 两端对齐 */
}

9. text-decoration

设置文本装饰

text-decoration 属性用于设置文本的装饰效果。

.element {
  text-decoration: underline; /* 下划线 */
  /* text-decoration: line-through; 删除线 */
  /* text-decoration: overline; 上划线 */
  /* text-decoration: none; 无装饰 */
}

10. text-transform

设置文本转换

text-transform 属性用于设置文本的大小写转换。

.element {
  text-transform: uppercase; /* 转为大写 */
  /* text-transform: lowercase; 转为小写 */
  /* text-transform: capitalize; 首字母大写 */
  /* text-transform: none; 无转换 */
}

11. letter-spacing

设置字母间距

letter-spacing 属性用于设置文本中字符之间的间距。

.element {
  letter-spacing: 2px; /* 使用像素值 */
  /* letter-spacing: 0.1em; 使用 em 单位 */
}

12. word-spacing

设置单词间距

word-spacing 属性用于设置文本中单词之间的间距。

.element {
  word-spacing: 4px; /* 使用像素值 */
  /* word-spacing: 0.2em; 使用 em 单位 */
}

好的，以下是关于 text-indent 属性及其之后的内容的详细解释。

13. text-indent

设置首行缩进

text-indent 属性用于设置文本的首行缩进。

.element {
  text-indent: 2em; /* 使用 em 单位 */
  /* text-indent: 20px; 使用像素值 */
  /* text-indent: 10%; 使用百分比 */
}

14. text-shadow

设置文本阴影

text-shadow 属性用于设置文本的阴影效果。

.element {
  text-shadow: 2px 2px 4px #888888; /* x-offset, y-offset, blur-radius, color */
}

15. white-space

设置空白处理

white-space 属性用于设置文本中的空白符处理方式。

.element {
  white-space: nowrap; /* 不换行 */
  /* white-space: normal; 默认值，自动换行 */
  /* white-space: pre; 保留空白符和换行符 */
  /* white-space: pre-wrap; 保留空白符和换行符，并自动换行 */
  /* white-space: pre-line; 合并多余的空白符，但保留换行符 */
}

16. word-break

设置单词换行规则

word-break 属性用于设置单词的换行规则。

.element {
  word-break: break-all; /* 允许在单词内换行 */
  /* word-break: keep-all; 禁止在单词内换行（适用于CJK文本） */
  /* word-break: break-word; 只在必要时换行 */
}

17. overflow-wrap

设置溢出换行

overflow-wrap 属性用于设置文本在溢出时如何换行。

.element {
  overflow-wrap: break-word; /* 当内容溢出时在单词内换行 */
  /* overflow-wrap: normal; 默认值，不会在单词内换行 */
}

18. text-overflow

设置文本溢出处理

text-overflow 属性用于设置文本在溢出容器时的处理方式。

.element {
  text-overflow: ellipsis; /* 用省略号表示溢出部分 */
  /* text-overflow: clip; 截断溢出部分 */
}

19. direction

设置文本方向

direction 属性用于设置文本的书写方向。

.element {
  direction: rtl; /* 从右到左 */
  /* direction: ltr; 默认值，从左到右 */
}

20. unicode-bidi

控制双向文本

unicode-bidi 属性与 direction 属性一起使用，用于控制双向文本的显示顺序。

.element {
  unicode-bidi: bidi-override; /* 覆盖双向算法 */
  /* unicode-bidi: normal; 默认值 */
  /* unicode-bidi: embed; 嵌入文本 */
}

21. font

简写属性

font 属性是一个简写属性，允许在一个声明中设置所有的字体相关属性。

.element {
  font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
  /* 语法: font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]; */
}

核心内容总结

颜色和字体

  • color: 设置文本颜色。
  • font-family: 设置字体系列。
  • font-size: 设置字体大小。
  • font-weight: 设置字体粗细。
  • font-style: 设置字体样式。
  • font-variant: 设置字体变体。
  • font: 简写属性，设置所有字体相关属性。

文本排列和间距

  • text-align: 设置文本对齐方式。
  • line-height: 设置行高。
  • letter-spacing: 设置字母间距。
  • word-spacing: 设置单词间距。
  • text-indent: 设置首行缩进。

文本装饰和转换

  • text-decoration: 设置文本装饰。
  • text-transform: 设置文本转换。
  • text-shadow: 设置文本阴影。

好的，以下是关于 CSS 中文本处理剩余内容的详细解释。

文本处理

  • white-space: 设置空白处理。
  • word-break: 设置单词换行规则。
  • overflow-wrap: 设置溢出换行。
  • text-overflow: 设置文本溢出处理。

文本方向

  • direction: 设置文本方向。
  • unicode-bidi: 控制双向文本。

位置操作

1. position

position 属性用于指定一个元素的定位方式，有以下几种值：

  • static: 默认值。元素按照正常的文档流进行定位。
  • relative: 相对定位。元素相对于其正常位置进行定位。
  • absolute: 绝对定位。元素相对于最近的已定位祖先元素进行定位（如果没有已定位祖先，则相对于初始包含块）。
  • fixed: 固定定位。元素相对于浏览器窗口进行定位。
  • sticky: 粘性定位。元素根据用户的滚动位置在相对定位和固定定位之间切换。
.element {
  position: relative; /* 示例：相对定位 */
}

2. top, right, bottom, left

这些属性用于设置定位元素的偏移量，具体的行为取决于 position 属性的值。

  • top: 设置元素的顶部偏移。
  • right: 设置元素的右边偏移。
  • bottom: 设置元素的底部偏移。
  • left: 设置元素的左边偏移。
.element {
  position: absolute;
  top: 10px;
  right: 20px;
}

3. z-index

z-index 属性用于设置元素的堆叠顺序。数值越大，元素越靠前。

.element {
  position: absolute;
  z-index: 10; /* 数值越大，元素越靠前 */
}

4. float

float 属性用于设置元素的浮动，通常与 clear 属性配合使用。

  • left: 元素向左浮动。
  • right: 元素向右浮动。
  • none: 默认值。元素不浮动。
.element {
  float: left; /* 元素向左浮动 */
}

5. clear

clear 属性用于控制浮动元素的行为，防止元素和浮动元素相邻。

  • left: 不允许左侧浮动元素相邻。
  • right: 不允许右侧浮动元素相邻。
  • both: 不允许左侧或右侧浮动元素相邻。
  • none: 默认值。允许浮动元素相邻。
.element {
  clear: both; /* 不允许左侧或右侧浮动元素相邻 */
}

6. display

虽然 display 属性主要用于设置元素的显示类型，但它也在布局和定位中起重要作用。

  • block: 块级元素，占据父容器的全部宽度。
  • inline: 行内元素，不会打断文本流。
  • inline-block: 行内块级元素，既保持行内元素特性，又可以设置宽高。
  • none: 隐藏元素，不占据任何空间。
.element {
  display: inline-block; /* 行内块级元素 */
}

7. margin 和 padding

margin 和 padding 属性用于设置元素的外边距和内边距。

  • margin: 设置元素的外边距。
  • padding: 设置元素的内边距。
.element {
  margin: 10px; /* 设置外边距 */
  padding: 15px; /* 设置内边距 */
}

8. box-sizing

box-sizing 属性用于设置元素的盒模型计算方式。

  • content-box: 默认值。宽度和高度包括内容，但不包括内边距、边框或外边距。
  • border-box: 宽度和高度包括内容、内边距和边框，但不包括外边距。
.element {
  box-sizing: border-box; /* 包括内边距和边框 */
}

9. overflow

overflow 属性用于设置当内容溢出元素框时的处理方式。

  • visible: 默认值。内容不会被剪裁，会呈现在元素框之外。
  • hidden: 内容会被剪裁，且不可见。
  • scroll: 内容会被剪裁，但用户可以滚动查看内容。
  • auto: 内容会被剪裁，只有在需要时才会显示滚动条。
.element {
  overflow: hidden; /* 内容溢出时隐藏 */
}

10. clip

clip 属性用于定义一个元素的可视区域。通常与绝对定位一起使用。该属性已被 clip-path 所取代。

.element {
  position: absolute;
  clip: rect(10px, 100px, 100px, 10px); /* 定义可视区域 */
}

11. clip-path

clip-path 属性用于创建一个剪切区域，使得只有该区域内的部分才会显示。

.element {
  clip-path: circle(50% at 50% 50%); /* 创建一个圆形剪切区域 */
}
# Front-end
CSS Flex & Grid 上一篇
Cross Entropy in Classification 下一篇
已运行:
浏览数: | 访客数:
Powered by Gridea © 2021-2024 ❤️ zhsh
0%