CSS-属性

news2024/11/20 9:44:51

📚详见 W3scholl，本篇只做快速思维索引。

CSS 背景

用于定义元素的背景效果。

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachment

background-color

background-color 属性指定元素的背景色。

h1 {
  background-color: lightblue;
}

background-image

background-image 属性指定元素背景的图像。

p,h1 {
  background-image: url("paper.gif");
}

background-position

background-position 属性用于指定背景图像的位置（top right bottom left）。

body {
  background-image: url("tree.png");
  background-position: right top;
}

把背景图片放在右上角

background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。但有些时候，看起来很怪，通过 background-repeat: repeat-x; 指定图像仅在水平方向重复。

  • repeat-x: 仅在水平方向重复
  • repeat-y: 仅在垂直重复图像
  • no-repeat: 只显示一次背景图像
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

  • fixed: 固定
  • scroll: 滚动
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

📌 简写属性

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

⚠️注： 在使用简写属性时，属性值的顺序为：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

CSS 边框属性

border 属性允许您指定元素边框的样式、宽度、颜色

  • border-style
  • border-width
  • border-color
  • border-radius

border-style

border-style 属性指定 四个边框 的 样式。

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框、左边框）。允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • none - 定义无边框
  • hidden - 定义隐藏边框
p {
  border-style: solid; /* 四个边都是 solid */
}

p {
  border-style: dotted solid; /* 上、下边框为 dotted，右、左边框为 solid */
}

p {
  border-style: dotted dashed solid double; /上边框为 dotted，右边框为 dashed，下边框为 solid，左边框为 double
}

⚠️注： 除非设置了 border-style 属性，否则其他 CSS 边框属性（将在下一章中详细讲解）都不会有任何作用！

border-width

border-width 属性指定 四个边框 的 宽度。

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上、下边框 5px，左、右边框 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px 10px; /* 上边框为 20px，左、右边框为 5px，下边框为 10px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

border-color

border-color 属性指定 四个边框 的 颜色。

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

border-radius

border-radius 属性指定 四个圆角边框。

p.round1 {
  border-style: solid;
  border-radius: 5px;
}
p.round2 {
  border-style: solid;
  border-radius: 8px 16px;
}

单独的边

在 CSS 中，还有一些属性可用于指定 每个边框（顶部、右侧、底部和左侧）：

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

📌 简写边框属性

p {
  border: 5px solid red; /* border: red solid 5px; 效果一样，没有顺序要求 */
}

border 属性是以下各个边框属性的简写属性，属性没有顺序要求：

  • border-width
  • border-style（必需）
  • border-color

也可以只为一个边指定所有单个边框属性：

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

上例指定左边框属性。

CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

单独的边

CSS 拥有用于为元素的每一侧指定外边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto：浏览器来计算外边距
  • length：以 px、pt、cm 等单位指定外边距
  • %：指定以包含元素宽度的百分比计的外边距
  • inherit：指定应从父元素继承外边距

⚠️注： 允许负值。

示例：

p {
  margin-top: 100px;
  margin-right: 150px;
  margin-bottom: 100px;
  margin-left: 80px;
}

📅 auto
margin 属性设置为 auto，会使元素在其容器中 水平居中。该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

📅 inherit

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

<p class=“ex1”>元素的左外边距将 继承 自父元素（<div>）

📌 简写属性

p {
  margin: 25px 50px 75px 100px;
}

margin 属性是以下各外边距属性的简写属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的 较大者。

CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

单独的边

CSS 拥有用于为元素的每一侧指定内边距的属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有内边距属性都可以设置以下值：

  • length：以 px、pt、cm 等单位指定内边距
  • %：指定以包含元素宽度的百分比计的内边距
  • inherit：指定应从父元素继承内边距

⚠️注： 不允许负值。

示例：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

📌 简写属性

div {
  padding: 25px 50px 75px 100px;
}

padding 属性是以下各内边距属性的简写属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

内边距和元素宽度

CSS width 属性指定元素 内容区域的宽度。如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

div {
  width: 300px;
  padding: 25px;
}

<div> 元素的宽度为 300px。但是，<div> 元素的 实际宽度 将是 350px = 300px + 左内边距 25px + 右内边距 25px。

若要将宽度保持为 300px，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

📅 示例：

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}

div.ex3 {
  width: 300px;
  padding: 25px;
  background-color: green;
  box-sizing: border-box;
}
</style>
</head>

<body>
<h1>内边距和元素宽度 - 设置  box-sizing</h1>

<div class="ex1">这个 div 是 300 像素宽。</div>
<div class="ex2">这个 div 是 350 像素宽，即使在 CSS 中它被定义为 300 像素。</div>
<div class="ex3">div 的宽度保持在 300 像素，尽管总的左右内边距为 50 像素，因为设置了 box-sizing: border-box 属性。</div>
</body>

</html>

在这里插入图片描述

💦 <div class=“ex2”> 内容占用宽度 为300px；元素宽度 为350px = 300px + 左内边距 25px + 右内边距 25px。

在这里插入图片描述

💦 <div class=“ex3”> 内容占用宽度 为250px = 300px - 左内边距 25px - 右内边距 25px。元素宽度 为300px。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

碘浊度法与红外相机联用测定食品中维生素C

碘浊度法与红外相机联用测定食品中维生素C

&#x1f31e;欢迎来到看论文的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f4c6;首发时间&#xff1a;&#x1f339;2024年4月6日&…
阅读更多...
Jenkins (三) - 拉取编译

Jenkins (三) - 拉取编译

Jenkins (三) - 拉取编译 通过Jenkins平台 git 拉取github上项目&#xff0c;通过maven编译并打包。 Jenkins 安装 git 插件 Manager Jenkins -> Plugins -> Available plugins -> Git 打包编译检验 FressStyle 风格编译 New Item输入 item name Spring-Cloud-1…
阅读更多...
大数据毕业设计Python+Spark知识图谱高考志愿推荐系统 高考数据分析 高考可视化 高考大数据 计算机毕业设计 机器学习 深度学习 人工智能

大数据毕业设计Python+Spark知识图谱高考志愿推荐系统 高考数据分析 高考可视化 高考大数据 计算机毕业设计 机器学习 深度学习 人工智能

附件3 文山学院本科生毕业论文&#xff08;设计&#xff09;开题报告 姓名 性别 学号 学院 专业 年级 论文题目 基于协同过滤算法的高考志愿推荐系统的设计与实现 □教师推荐题目 □自拟题目 题目来源 题目类别 指导教师 选题的目的、意义(理论…
阅读更多...
Vue关键知识点

Vue关键知识点

watch侦听器 Vue.js 中的侦听器&#xff08;Watcher&#xff09;是 Vue提供的一种响应式系统的核心机制之一。 监听数据的变化&#xff0c;并在数据发生变化时执行相应的回调函数。 目的:数据变化能够自动更新到视图中 原理&#xff1a; Vue 的侦听器通过观察对象的属性&#…
阅读更多...
3.6 CSS定位

3.6 CSS定位

CSS定位可以将HTML元素放置在页面上指定的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为(0,0)的原点&#xff0c;然后以像素为单位将整个网页构建成一个坐标系统。其中x轴与数学坐标系方向相同&#xff0c;越往右数字越大&#xff1b;y轴与数学坐标系方向相反&#x…
阅读更多...
RabbitMQ3.13.x之六_RabbitMQ使用场景

RabbitMQ3.13.x之六_RabbitMQ使用场景

RabbitMQ3.13.x之六_RabbitMQ使用场景 文章目录 RabbitMQ3.13.x之六_RabbitMQ使用场景1. 为什么选择 RabbitMQ&#xff1f;1. 可互操作2. 灵活3. 可靠 2. 常见用户案例1. 服务解耦2. 远程过程调用3. 流处理4. 物联网 1. 为什么选择 RabbitMQ&#xff1f; RabbitMQ 是一个可靠且…
阅读更多...
(一)基于IDEA的JAVA基础11

(一)基于IDEA的JAVA基础11

为什么使用多重循环 有时单独一个循环不能满足我们的要求&#xff0c;我们就要使用多重循环&#xff0c;这不废话吗。 多重循环的使用: 一般我们使用多重循环都是双重for循环&#xff0c; 语法: for(循环条件){ 循环操作1&#xff1b; for(循环条件2){ 循环操作2&#x…
阅读更多...
关于swagger配置

关于swagger配置

swagger有多种样式&#xff0c;有些比较难用&#xff0c;如下界面比较友好 1.推荐对应的jar包如下 <!--swagger相关--> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.7.0<…
阅读更多...
基于SSM框架就业管理系统

基于SSM框架就业管理系统

摘要 本论文主要讲述了基于SSM框架及MySQL数据库实现的就业管理系统的设计和开发过程。本论文中所讲的就业管理系统是通过所学的知识创办一个非商业性的网站平台&#xff0c;使所有想要就业信息查看的高校毕业生们与想要宣传自己公司的商家们都可以更方便快捷的进行就业和体验…
阅读更多...
echarts实现炫酷科技感的流光效果

echarts实现炫酷科技感的流光效果

前言&#xff1a; echarts实现炫酷科技感的流光效果 效果图&#xff1a; 实现步骤&#xff1a; 1、引入echarts,直接安装或者cdn引入 npm i echarts https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js 2、封装 option方法&#xff0c;第一个数据是折线数据&a…
阅读更多...
WebGIS 地铁交通线网数据可视化监控平台

WebGIS 地铁交通线网数据可视化监控平台

数字孪生技术在地铁线网的管理和运维中的应用是一个前沿且迅速发展的领域。随着物联网、大数据、云计算以及人工智能技术的发展&#xff0c;地铁线网数字孪生在智能交通和智慧城市建设中的作用日益凸显。 图扑软件基于 HTML5 的 2D、3D 图形渲染引擎&#xff0c;结合 GIS 地图&…
阅读更多...
掌握数据相关性新利器：基于R、Python的Copula变量相关性分析及AI大模型应用探索

掌握数据相关性新利器：基于R、Python的Copula变量相关性分析及AI大模型应用探索

在工程、水文和金融等各学科的研究中&#xff0c;总是会遇到很多变量&#xff0c;研究这些相互纠缠的变量间的相关关系是各学科的研究的重点。虽然皮尔逊相关、秩相关等相关系数提供了变量间相关关系的粗略结果&#xff0c;但这些系数都存在着无法克服的困难。例如&#xff0c;…
阅读更多...
网络编程套接字应用分享【Linux C/C++ 】【UDP应用 | TCP应用 | TCP线程池小项目】

网络编程套接字应用分享【Linux C/C++ 】【UDP应用 | TCP应用 | TCP线程池小项目】

目录 前提知识 1. 理解源ip&#xff0c;目的ip和Macip 2. 端口号 3. 初识TCP&#xff0c;UDP协议 4. 网络字节序 5. socket 编程 sockaddr类型 一&#xff0c;基于udp协议编程 1. socket——创建套接字 2. bind——将套接字强绑定 3. recvfrom——接受数据 4. s…
阅读更多...
练手项目层高阶3—《详解文件版本——通讯录管理系统》

练手项目层高阶3—《详解文件版本——通讯录管理系统》

文章目录 &#x1f6a9;前言&#x1f9e9;框架结构&#x1f4fa;效果展示&#x1f680;完整代码 &#x1f6a9;前言 我们前面写的两种方法&#xff08;静态和动态)&#xff0c;唯一缺点就是每次运行都要输入新的数据&#xff0c;很麻烦&#xff0c;也就是说写入的数据无法长久保…
阅读更多...
C# 使用共享文件生成项目

C# 使用共享文件生成项目

项目文件中添加共享文件 <ItemGroup><Compile Include"..\Shared\Interfaces\Services\ITextService.cs" Link"Interfaces\Services\ITextService.cs" /><Compile Include"..\Shared\Services\TextService.cs" Link"Service…
阅读更多...
[StartingPoint][Tier1]Sequel

[StartingPoint][Tier1]Sequel

Task 1 During our scan, which port do we find serving MySQL? (在扫描过程中&#xff0c;我们发现哪个端口为 MySQL 提供服务&#xff1f;) 3306 Task 2 What community-developed MySQL version is the target running? (目标正在运行哪个社区开发的 MySQL 版本&…
阅读更多...
vue2/vue3手写专题——实现父子组件通信、祖先通信的方法

vue2/vue3手写专题——实现父子组件通信、祖先通信的方法

Vue 组件通信可以使用以下几种方法&#xff1a; 父组件向子组件传递数据&#xff1a;使用 props 将数据从父组件传递给子组件&#xff0c;子组件可以通过 props 接收和使用数据。子组件向父组件传递数据&#xff1a;使用 $emit 触发自定义事件&#xff0c;父组件可以通过事件监…
阅读更多...
【Kaggle】练习赛《鲍鱼年龄预测》(上)

【Kaggle】练习赛《鲍鱼年龄预测》(上)

前言 上一篇文章&#xff0c;讲解了《肥胖风险的多类别预测》机器学习方面的文章&#xff0c;主要是多分类算法的运用&#xff0c;本文是一个回归的算法&#xff0c;本期是2024年4月份的题目《Regression with an Abalone Dataset》即《鲍鱼年龄预测》&#xff0c;在此分享高手…
阅读更多...
Vuex的模块化管理

Vuex的模块化管理

1&#xff1a;定义一个单独的模块。由于mutation的第二个参数只能提交一个对象&#xff0c;所以这里的ThisLog是个json串。 2&#xff1a;在Vuex中的index.js中引入该模块 3&#xff1a;在别的组件中通过...mapState调用模块保存的State的值。 4&#xff1a;用...mapMutations修…
阅读更多...
K8S之Job和CronJob控制器

K8S之Job和CronJob控制器

这里写目录标题 Job概念适用场景使用案例 CronJob概念适用场景使用案例 Job 概念 Job控制器用于管理Pod对象运行一次性任务&#xff0c;例如&#xff1a;对数据库备份&#xff0c;可以直接在k8s上启动一个mysqldump备份程序&#xff0c;也可以启动一个pod&#xff0c;这个pod…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023