一七六、CSS 介绍及示例
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>
在这个例子中，四个 .item 元素按等宽分布在容器中，并居中对齐。
新特性（New）
1. will-change
提示浏览器元素将要发生变化，优化性能。
div {
will-change: transform;
}
原文地址：https://blog.csdn.net/zm06201118/article/details/143588113
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！