一七六、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

控制元素的可见性,visiblehidden

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-growflex-shrinkflex-basis

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

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

  • auto(默认):继承容器的 align-items 属性。
  • flex-startflex-endcenterbaselinestretch:与 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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/60209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS教程(八)- 盒子模型

1、介绍 核心内容 盒子模型、浮动和定位&#xff0c;帮助我们实现页面布局 本质&#xff1a;页面布局过程 准备好相关的页面元素&#xff0c;网页元素基本都是盒子 Box 利用 CSS 设置盒子的样式&#xff0c;摆放到相应的位置 向盒子中填充相应内容 网页布局的核心本质&…

数据结构——二叉树和BST

树与二叉树 基本概念 树是一种非线性结构&#xff0c;其严格的数学定义是&#xff1a;如果一组数据中除了第一个节点&#xff08;第一个节点称为根节点&#xff0c;没有直接前驱节点&#xff09;之外&#xff0c;其余任意节点有且仅有一个直接前驱&#xff0c;有零个或多个直接…

mysql数据库(四)单表查询

单表查询 文章目录 单表查询一、单表查询1.1 简单查询1.2where1.3group by1.4having1.5order by1.6limit 一、单表查询 记录的查询语法如下&#xff1a; SELECT DISTINCT(去重) 字段1,字段2… FROM 表名 WHERE 筛选条件 GROUP BY 分组 HAVING 分组筛选 ORDER BY 排序 LIMIT 限…

常用机器人算法原理介绍

一、引言 随着科技的不断发展&#xff0c;机器人技术在各个领域得到了广泛应用。机器人算法是机器人实现各种功能的核心&#xff0c;它决定了机器人的行为和性能。本文将介绍几种常用的机器人算法原理&#xff0c;包括路径规划算法、定位算法和运动控制算法。 二、路径规划算法…

Vagrant 没了 VirtualBox 的话可以配 Qemu

开源虚拟机软件 VirtualBox 从当初不可一世的 Sun 易手到 Oracle 之间&#xff0c;变得不那么被许多公司信任了。之前一直是用 Vagrant 搭配 VirtualBox 在 Mac 下使用 Linux 虚拟机&#xff0c;因为不需要用到 Linux 桌面&#xff0c;用 Vagrant 操作虚拟机非常方便。但现在不…

C语言 | Leetcode C语言题解之第542题01矩阵

题目&#xff1a; 题解&#xff1a; /*** Return an array of arrays of size *returnSize.* The sizes of the arrays are returned as *returnColumnSizes array.* Note: Both returned array and *columnSizes array must be malloced, assume caller calls free().*/ type…

一文了解珈和科技在农业遥感领域的服务内容和能力

2020年&#xff0c;农业农村部、中央网信办联合印发了《数字农业农村发展规划&#xff08;2019-2025年&#xff09;》&#xff0c;对数字农业农村建设作出了具体部署。其中&#xff0c;农业遥感作为推进数字农业农村的重要力量贯穿《规划》始终。 今年10月&#xff0c;农业农村…

【Golang】Channel的ring buffer实现

文章目录 前言一、介绍三、环形缓冲区的实现原理三、使用方式四、总结 前言 在并发编程中&#xff0c;channel 是 Golang 提供的一种用于 goroutine 之间通信的机制。channel 的底层实现是一个环形缓冲区&#xff0c;这种设计使得 channel 在处理大量数据传输时能够保持高效。…

隧道论文阅读2-采用无人融合扫描数据的基于深度学习的垂直型隧道三维数字损伤图

目前存在的问题&#xff1a; 需要开发新的无人测量系统测量垂直隧道图像数据量巨大&#xff0c;基于深度学习完成损伤评估跟踪获取图像位置的困难&#xff0c;对大型基础设施感兴趣区域(roi)的2d和3d地图建立进行了研究&#xff0c;对整个目标结构的损伤定位仍然具有挑战性。为…

深入提升Python编程能力的全方位指南

Python作为一种强大且灵活的编程语言&#xff0c;广泛应用于数据科学、机器学习、网络开发、自动化等领域。提升Python编程技术需要结合多方面的知识和技能。本文将详细介绍通过掌握核心技术、项目实践和代码示例来系统提升Python编程技能的方法。 一、掌握基础和高级Python特…

HCIP-HarmonyOS Application Developer V1.0 笔记(五)

弹窗功能 prompt模块来调用系统弹窗API进行弹窗制作。 当前支持3种弹窗API&#xff0c;分别为&#xff1a; 文本弹窗&#xff0c;prompt.showToast&#xff1b;对话框&#xff0c;prompt.showDialog&#xff1b;操作菜单&#xff0c;prompt.showActionMenu。 要使用弹窗功能&…

《深入浅出Apache Spark》系列③:Spark SQL解析层优化策略与案例解析

导读&#xff1a;本系列是Spark系列分享的第三期。第一期分享了Spark Core的一些基本原理和一些基本概念&#xff0c;包括一些核心组件。Spark的所有组件都围绕Spark Core来运转&#xff0c;其中最活跃的一个上层组件是Spark SQL。第二期分享则专门介绍了Spark SQL的基本架构和…

Linux应用——线程池

1. 线程池要求 我们创建线程池的目的本质上是用空间换取时间&#xff0c;而我们选择于 C 的类内包装原生线程库的形式来创建&#xff0c;其具体实行逻辑如图 可以看到&#xff0c;整个线程池其实就是一个大型的 CP 模型&#xff0c;接下来我们来完成它 2. 整体模板 #pragma …

算法每日双题精讲——滑动窗口(长度最小的子数组,无重复字符的最长子串)

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#xff01;&#x1f4aa;…

PHP字符串变量

php字符串变量&#xff0c;也可以理解为一个存放文本的一样东西。 <?php$text"Hello world!"; //输出Hello world&#xff01; echo $text;?> 当赋一个文本值给变量时&#xff0c;请记得给文本值加上单引号或者双引号。 1、下面再来看看字符串的应用场景 …

HiveSQL 中判断字段是否包含某个值的方法

HiveSQL 中判断字段是否包含某个值的方法 在 HiveSQL 中&#xff0c;有时我们需要判断一个字段是否包含某个特定的值。下面将介绍几种常用的方法来实现这个功能。 一、创建示例表并插入数据 首先&#xff0c;我们创建一个名为employee的表&#xff0c;并插入一些示例数据&am…

vue2 - el-table表格设置动态修改表头

效果 代码 <template><el-card><!-- 搜索栏 --><Search :query

MySQL 8.0的Public Key Retrival问题解决

一、导致“Public Key Retrieval is not allowed”原因 该错误是在 JDBC 与 MySQL 建立 Connection 对象时出现的&#xff1b;需要明确的是出现该问题的时候&#xff0c;MySQL 配置的密码认证插件为如下两种&#xff1a; sha256_passwordcaching_sha2_password 使用“mysql_…

Java 集合遍历中删除元素的正确方法与陷阱

在 Java 开发中&#xff0c;经常会遇到遍历集合并删除特定元素的需求。乍一看&#xff0c;这似乎是一个简单的操作&#xff0c;但如果不注意方式&#xff0c;很容易踩坑。这篇文章将带你理解如何在 Java 中安全地删除集合元素&#xff0c;并避免 ConcurrentModificationExcepti…

sed超实用的文本处理工具

sed命令参数表 sed参数说明a在指定行的后面增加新航c替换指定行d删除行-e多次编辑&#xff0c;多次编辑后这样写回文件。sed -i -e /^[[:space:]]*#/d -e /^$/d nginx.confp打印行-r激活拓展正则-n取消默认输出-i静默编辑&#xff0c;屏幕上不显示编辑后的内容&#xff0c;放在…