当前位置：首页 > article >正文

一七六、CSS 介绍及示例

article 2024/11/8 6:04:58

CSS 介绍及示例

CSS（Cascading Style Sheets）是层叠样式表的缩写，主要用于控制网页元素的样式，如颜色、字体、布局等。以下是常见的 CSS 属性及其示例。

Box 模型相关属性

1. width / height

用于设置元素的宽度和高度。

div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

2. margin / padding

margin 用于设置元素外边距，padding 用于设置元素内边距。

div {
  margin: 20px;
  padding: 10px;
  background-color: lightcoral;
}

3. border

设置元素的边框。

div {
  border: 2px solid black;
}

4. box-sizing: content-box / border-box

控制元素的盒子模型，content-box 是默认值，border-box 包括边框和内边距。

/* content-box */
div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: content-box;  /* 宽度加上内边距和边框 */
}

/* border-box */
div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box; /* 宽度包括内边距和边框 */
}

5. display

控制元素的显示类型，常见值有 block, inline, inline-block, none 等。

div {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightgreen;
}

Float 属性

1. float: left / right

使元素浮动至容器的左侧或右侧。

div {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightyellow;
}

2. clear: none / left / right / both / inherit

清除浮动，使元素避免被浮动元素影响。

div {
  clear: both;
}

Position 属性

1. position: static / inherit / relative / absolute / fixed

控制元素的定位方式。

static: 默认，不进行定位。
relative: 相对定位，相对于元素的正常位置。
absolute: 绝对定位，相对于最近的定位祖先元素。
fixed: 固定定位，相对于浏览器窗口。
inherit: 继承父元素的定位属性。

/* relative */
div {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: lightpink;
}

2. z-index

设置元素的堆叠顺序，值越大越靠前。

div {
  position: absolute;
  z-index: 10;
  background-color: lightblue;
}

3. top / right / bottom / left

指定元素的相对位置。

div {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: lightblue;
}

选择器（Selector）

基础

*
####
.
ele

层级

,
空格
>
+
~

属性

[attr]
[attr=val]
[attr*=val]
[attr~=val]
[attr^=val]
[attr$=val]
[attr|=val]

伪类

:link
:active
:hover
:visited

伪元素

:before
:after
:first-letter
:first-line

索引

:first-child
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)

表单

:focus
:enabled
:disabled
:checked

其他

:not()
:empty
:target
:selection

webkit

:-webkit-scrollbar
:-webkit-full-screen
:-webkit-touch-callout
-webkit-text-size-adjust
-webkit-input-placeholder
-webkit-overflow-scrolling
-webkit-tap-highlight-color
-webkit-filter

Never Use

:root
:lang()

排版（Typesetting）

1. color

设置文本颜色。

p {
  color: blue;
}

2. background

设置元素的背景颜色或图像。

div {
  background-color: lightgreen;
}

3. font

设置字体类型、大小、加粗等。

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

4. line-height

设置行高，影响行间距。

p {
  line-height: 1.5;
}

5. text-decoration

设置文本装饰，如下划线、删除线等。

a {
  text-decoration: underline;
}

6. text-indent

设置文本缩进。

p {
  text-indent: 30px;
}

7. text-shadow

为文本添加阴影。

h1 {
  text-shadow: 2px 2px 5px gray;
}

8. opacity

设置元素的透明度。

div {
  opacity: 0.5;
}

9. visibility

控制元素的可见性，visible 或 hidden。

div {
  visibility: hidden;
}

10. list-style

设置列表样式，如项目符号、数字列表等。

ul {
  list-style-type: square;
}

11. outline

设置元素的外边框，通常用于获得焦点时的效果。

button {
  outline: 2px solid blue;
}

12. box-shadow

为元素添加阴影。

div {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

13. border-radius

设置元素的圆角。

div {
  border-radius: 10px;
}

14. overflow

控制元素内容溢出时的行为。

div {
  overflow: auto;
}

15. overflow-x / overflow-y

分别控制水平方向和垂直方向的溢出行为。

div {
  overflow-x: scroll;
  overflow-y: hidden;
}

16. min-width / min-height

设置元素的最小宽度和最小高度。

div {
  min-width: 100px;
  min-height: 50px;
}

17. max-width / max-height

设置元素的最大宽度和最大高度。

div {
  max-width: 500px;
  max-height: 300px;
}

18. content

用于在伪元素中插入内容。

p::before {
  content: "Note: ";
  font-weight: bold;
}

19. vertical-align

设置元素在垂直方向上的对齐方式。

img {
  vertical-align: middle;
}

20. text-align

设置文本对齐方式。

h1 {
  text-align: center;
}

21. border-collapse: collapse

合并表格边框。

table {
  border-collapse: collapse;
}

22. border-spacing: none

设置表格单元格之间的间距。

table {
  border-spacing: 0;
}

23. white-space

控制空白符的显示方式。

pre {
  white-space: pre-wrap;
}

24. word-spacing

设置单词间距。

p {
  word-spacing: 5px;
}

25. word-break

设置单词断行规则。

p {
  word-break: break-all;
}

26. word-wrap

设置单词换行规则。

p {
  word-wrap: break-word;
}

媒体查询（Media Query）

1. @media

根据设备的屏幕大小、分辨率等应用不同的样式。

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

动画（Animation）

1. animation

设置 CSS 动画。

@keyframes example {
  0% { background-color: red; }
  100% { background-color: yellow; }
}

div {
  animation: example 3s infinite;
}

过渡（Transition）

1. transition

设置元素的状态变化过渡效果。

div {
  transition: background-color 1s ease;
}

div:hover {
  background-color: lightblue;
}

2D / 3D 变换（Transform）

1. transform

设置元素的平移、旋转、缩放等变换。

div {
  transform: rotate(45deg);
}

其他（Other）

1. -webkit-user-select: none

禁止用户选择文本。

div {
  -

webkit-user-select: none;
}

2. -webkit-input-placeholder: color

设置输入框占位符的颜色。

input::placeholder {
  color: gray;
}

3. -webkit-text-size-adjust: none

禁用文本缩放。

body {
  -webkit-text-size-adjust: none;
}

4. -webkit-touch-callout: none

禁用长按时显示的菜单。

div {
  -webkit-touch-callout: none;
}

5. -webkit-overflow-scrolling: touch

启用 iOS 中的滚动效果。

div {
  -webkit-overflow-scrolling: touch;
}

6. -webkit-tap-highlight-color: transparent

禁用点击时的高亮效果。

div {
  -webkit-tap-highlight-color: transparent;
}

7. ::-webkit-scrollbar

自定义滚动条样式。

::-webkit-scrollbar {
  width: 10px;
}

8. ::-webkit-full-screen

设置全屏样式。

::-webkit-full-screen {
  background-color: black;
}

CSS Flexbox（弹性盒布局）简介

Flexbox 是一种 CSS 布局模式，专为单行或多行布局的分布和对齐设计，特别适合创建自适应的响应式布局。它使元素可以灵活地调整在容器中的位置和比例。

基本概念

容器（Container）：使用 display: flex; 定义的元素，将子元素设为弹性布局。
项目（Items）：容器内的每一个直接子元素，被称为“弹性项目”。

Flex 容器属性

1. display

display: flex;：将元素定义为弹性容器，子元素按弹性布局排列。
display: inline-flex;：容器为弹性布局，同时保持行内元素性质。

.container {
  display: flex;
}

2. flex-direction

设置项目在主轴上的排列方向。

row（默认）：项目从左到右排列。
row-reverse：项目从右到左排列。
column：项目从上到下排列。
column-reverse：项目从下到上排列。

.container {
  flex-direction: row;
}

3. justify-content

控制项目在主轴上的对齐方式。

flex-start（默认）：项目靠左对齐。
flex-end：项目靠右对齐。
center：项目居中对齐。
space-between：项目平均分布，两端对齐。
space-around：项目平均分布，项目两侧有间隔。

.container {
  justify-content: center;
}

4. align-items

控制项目在交叉轴上的对齐方式。

stretch（默认）：项目占满交叉轴的高度。
flex-start：项目在交叉轴的起点对齐。
flex-end：项目在交叉轴的终点对齐。
center：项目在交叉轴上居中对齐。
baseline：项目在文本基线对齐。

.container {
  align-items: center;
}

5. align-content

控制多行项目的对齐方式，仅在项目换行时有效。

flex-start：行靠交叉轴的起点对齐。
flex-end：行靠交叉轴的终点对齐。
center：行在交叉轴上居中。
space-between：行均匀分布，两端对齐。
space-around：行均匀分布，行之间留有间隔。
stretch（默认）：行将拉伸以占满交叉轴。

.container {
  align-content: space-between;
}

6. flex-wrap

指定项目是否换行。

nowrap（默认）：不换行。
wrap：自动换行。
wrap-reverse：反向换行。

.container {
  flex-wrap: wrap;
}

Flex 项目属性

1. flex-grow

定义项目的放大比例，默认为 0，即不放大。

.item {
  flex-grow: 1; /* 项目将分配剩余空间 */
}

2. flex-shrink

定义项目的缩小比例，默认为 1，即项目将缩小以适应容器。

.item {
  flex-shrink: 0; /* 项目不缩小 */
}

3. flex-basis

定义项目在主轴上的初始大小。

.item {
  flex-basis: 100px;
}

4. flex

简写属性，包含 flex-grow、flex-shrink 和 flex-basis。

.item {
  flex: 1 0 100px; /* 等同于 flex-grow: 1; flex-shrink: 0; flex-basis: 100px; */
}

5. align-self

允许单个项目在交叉轴上有不同的对齐方式，覆盖 align-items 的设置。

auto（默认）：继承容器的 align-items 属性。
flex-start、flex-end、center、baseline、stretch：与 align-items 的值相同。

.item {
  align-self: flex-end;
}

示例代码

下面是一个完整的示例，展示了如何使用 flex 布局创建一个水平导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
      padding: 10px;
    }
    .item {
      color: white;
      padding: 10px;
      flex: 1;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Home</div>
    <div class="item">About</div>
    <div class="item">Services</div>
    <div class="item">Contact</div>
  </div>
</body>
</html>