当前位置: 首页 > news >正文

css简写属性

一些属性,如 font、background、padding、border 和 margin 等属性称为简写属性。它们允许在一行中设置多个属性值,从而节省时间并使代码更整洁。

/* 在像 padding 和 margin 这样的 4 值简写语法中,数值的应用顺序是上、右、下、左(从顶部顺时针方向)。也有其他的简写类型,例如 2 值简写,它为顶部/底部设置 padding/margin,然后是左侧/右侧 */
padding: 10px 15px 15px 5px;
/*上面一行顶下面4行*/
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
/*一行顶5行*/
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;//定义一个背景图初始位置
background-repeat: repeat-x;//背景图铺开方式
background-attachment: fixed;//背景图是固定的还是随窗口滚动

警告:使用 CSS 简写属性的一个不太明显的方面是省略的值如何重置。一个没有在 CSS 简写属性中指定的值会恢复到它的初始值。这意味着 CSS 简写属性中的省略可以覆盖之前设置的值

文档地址:
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works

 

http://www.lryc.cn/news/476196.html

相关文章:

  • 力扣刷题(sql)--零散知识点(2)
  • TCP是怎样工作的网络拥塞控制理论和算法部分记录
  • CSRF初级靶场
  • CSP/信奥赛C++刷题训练:经典差分例题(2):洛谷P9904 :Mieszanie kolorów
  • Java | Leetcode Java题解之第525题连续数组
  • YOLOv8改进 - 注意力篇 - 引入iRMB注意力机制
  • 项目学习总结
  • 用于低成本接收机的LoRa SF11 500KHz波形检测解调算法
  • WEB防护
  • 使用Jest进行JavaScript单元测试
  • 网络安全法详细介绍——爬虫教程
  • PCB什么情况该敷铜,什么情况不该敷铜!
  • 标准化的企业级信息管理系统信息中心必备PHP低代码平台
  • Rust 力扣 - 1984. 学生分数的最小差值
  • 【098】基于SpringBoot+Vue实现的垃圾分类系统
  • STM32CUBEIDE FreeRTOS操作教程(八):queues多队列
  • SIGNAL TAP使用记录
  • 基于vue3和elementPlus的el-tree组件,实现树结构穿梭框,支持数据回显和懒加载
  • 彻底理解链表(LinkedList)结构
  • TON 区块链开发的深入概述#TON链开发#DAPP开发#交易平台#NFT#Gamefi链游
  • Hive专栏概述
  • 鼠标悬停后出现小提示框实现方法
  • 计算机视觉常用数据集Foggy Cityscapes的介绍、下载、转为YOLO格式进行训练
  • css中的样式穿透
  • MMCA:多模态动态权重更新,视觉定位新SOTA | ACM MM‘24 Oral
  • linux同步执行命令脚本 (xcall)
  • opencv - py_imgproc - py_grabcut GrabCut 算法提取前景
  • ChatGPT多模态命名实体识别
  • 04-Dubbo的通信协议
  • 开源数据库 - mysql - innodb源码阅读 - 线程启动