共计 9745 个字符，预计需要花费 25 分钟才能阅读完成。
CSS3 动画相关属性实例大全（五)
（margin、max-height、max-width、min-height、min-width、opacity、order 属性）
本文目录：
零、时光宝盒
一、margin 属性（设置元素的边距属性）
1.1、margin-bottom 属性（设置元素的下边距）
1.2、margin-left 属性（设置元素的左边距）
1.3、margin-right 属性（设置元素的右边距）
1.4、margin-top 属性（设置元素的顶边距）
二、max-height 属性（设置元素的最大高度）
三、max-width 属性（设置元素的最大宽度）
四、min-height 属性（设置元素的最低高度）
五、min-width 属性（设置元素的最低宽度）
六、opacity 属性（设置一个元素的透明度级别）
七、order 属性（设置布局时的顺序）
零、时光宝盒
（https://blog.csdn.net/weixin_69553582 逆境清醒）
今天是我家里人生日，但现在的我精力真不如从前，只煮了几个简单菜，也不够精致，不能算生日菜，惭愧。幸好，哥和嫂子买了蛋糕才有点生日的感觉。
生活中，我们可以从一件事情的细微处感受到关爱之深。我哥平时工作忙，我妈总希望他能休息好。例如夏天，哥回这边家时，晚上睡觉前在房间打开空调然后去洗澡，这期间，我妈进自己房间睡觉前，总是叮嘱我把客厅的空调留哥哥不要关，怕他刚洗完澡可能会热，他房间的空调温度还没降到舒适温度，所以要专门留着客厅的空调给哥先吹吹。妈平时是很节俭的人，如果她离开客厅去睡觉，一定会关掉她不用的空调。哥哥都结婚 20 年了，但在妈心中，他永远是需要细心照顾的孩子。这也许跟那些为晚归人留盏灯意义是一样的，那是种温暖，是关爱，是家。
我最近用 python 和 html 写了一些庆祝生日快乐的代码，还在微调细节，如果大家需要，到时分享给大家。
（我的代码都会验证过后完整分享给大家，如果大家运行不成功，可能是有其他原因，例如你不是在我博客逆境清醒逆境清醒 -CSDN 博客 获取的代码，或者我的代码因为某些我不可预测和控制的原因出现了代码被删剪，如果发生这种情况，请尽量与我取得联系，我看得到的评论或留言我会回复。）
初步效果如图：
html 生日庆祝
python 画蛋糕：
逆境清醒
2024.10.20
一、margin 属性（设置元素的边距属性）
margin 属性
| 值 | 意义 |
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
| margin:1px 2px 3px 4px; | 上边距是 1px 右边距是 2px 下边距是 3px 左边距是 4px |
| margin:10px 50px 60px; | 上边距是 10px 右边距和左边距是 50px 下边距是 60px |
| margin:10px 50px; | 上边距和下边距是 10px 右边距和左边距是 50px |
| margin:10px; | 所有四个边距都是 10px |
| JavaScript 语法： | object.style.margin=”10px 50px” |
逆境清醒
改变 margin 属性：从 margin: 0; 到 margin:50px;
1.1、margin-bottom 属性（设置元素的下边距）
margin-bottom 属性设置元素的下边距。
| 值 | margin-bottom 属性意义 |
| auto | 浏览器计算下外边距。 |
| length | 规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的下外边距。 |
| inherit | 规定应该从父元素继承下外边距。 |
逆境清醒
改变 margin-bottom 属性：从 margin-bottom: 0; 到 margin-bottom: 50px;
1.2、margin-left 属性（设置元素的左边距）
逆境清醒
改变 margin-left 属性：从 margin-left: 0; 到 margin-left: 50px;
1.3、margin-right 属性（设置元素的右边距）
逆境清醒
改变 margin-right 属性：从 margin-right: 99%; 到 margin-right: 90%;
1.4、margin-top 属性（设置元素的顶边距）
逆境清醒
改变 margin-top 属性：从 margin-top: 1%; 到 margin-top: 10%;
二、max-height 属性（设置元素的最大高度）
max-height 属性设置元素的最大高度。它可以防止 height 属性的已用值大于为 指定的值。
max-height 属性不包括填充，边框，或页边距！
| 值 | 意义 |
| none | 定义对元素被允许的最大高度没有限制。默认。 |
| length | 定义元素的最大高度值。 |
| % | 定义基于包含它的块级对象的百分比最大高度。 |
| inherit | 规定应该从父元素继承 max-height 属性的值。 |
逆境清醒 2023 年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你
改变 max-height 属性：从 默认到 max-height: 80px;
三、max-width 属性（设置元素的最大宽度）
max-width 属性设置元素的最大宽度
逆境清醒 2023 年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你
改变 属性：从 0 到 100px
四、min-height 属性（设置元素的最低高度）
| min-height | 属性设置元素的最低高度。属性不包括填充，边框，或页边距！ |
| length | 定义元素的最小高度。默认值是 0。 |
| % | 定义基于包含它的块级对象的百分比最小高度。 |
| inherit | 规定应该从父元素继承 min-height 属性的值。 |
逆境清醒 2023 年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你
改变 min-height 属性：从 min-height: 50px; 到 min-height: 260px;
五、min-width 属性（设置元素的最低宽度）
逆境清醒
改变 min-width 属性：从 50px 到 min-width: 200px;
六、opacity 属性（设置一个元素的透明度级别）
| opacity | 属性设置一个元素的透明度级别。 |
| value | 指定不透明度。从 0.0（完全透明）到 1.0（完全不透明） |
| inherit | Opacity 属性的值应该从父元素继承 |
我是背景板
我会隐形
改变 属性：从 0 到 100px
七、order 属性（设置布局时的顺序）
order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。
规定了弹性容器中的可伸缩项目在布局时的顺序。
元素按照 order 属性的值的增序进行布局。
拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
order 仅仅对元素的视觉顺序 (visual order) 产生作用，
并不会影响元素的逻辑或 tab 顺序。
order 不可以用于非视觉媒体
如果元素不是弹性项目，则 order 属性无效。
初始值：0
逆境清醒
2
3
4
5
6
改变 order 属性
改变红色 DIV 元素的显示顺序，从 1 到 6 再回到 1
CSS3 动画相关属性实例大全系列目录：
- 1、CSS3 动画相关属性实例大全（一)（@keyframes，background 属性，border 属性）
- 2、CSS3 动画相关属性实例大全（二)（bottom、box-shadow、clip、color、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
- 3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis、flex-grow、flex-shrink 属性）
- 4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）
- 5、CSS3 动画相关属性实例大全（五)（margin、max-height、max-width、min-height、min-width、opacity、order 属性）
- 6、CSS3 动画相关属性实例大全（六)（outline、outline-color、outline-offset、outline-width、padding、padding-bottom、padding-left、padding-right、padding-top、perspective 属性）
- 7、
CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color、text-indent、text-shadow、top、transform、transform-origin、vertical-align、visibility、width、word-spacing、z-index 属性）
推荐阅读：CSS @规则 (At-rules) 详解系列索引目录
|
|
|
|
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
|
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
|
|
|
|
|
语音识别实战（python 代码）(一） |
人工智能基础篇 |
计算机视觉基础__图像特征 |
逆境清醒
|
|
||
|
matplotlib 自带绘图样式效果展示速查（28 种，全） |
||
|
|
||
| Three.js 实例详解___旋转的精灵女孩(附完整代码和资源)（一） | ||
|
|
|
|
| 立体多层玫瑰绘图源码__玫瑰花 python 绘图源码集锦 |
Python 3D 可视化（一） |
让你的作品更出色——词云 Word Cloud 的制作方法（基于 python，WordCloud，stylecloud) |
|
|
|
|
|
python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format 对齐打印 |
用代码写出浪漫__合集（python、matplotlib、Matlab、java 绘制爱心、玫瑰花、前端特效玫瑰、爱心） |
python 爱心源代码集锦（18 款） |
|
|
|
|
|
Python 中 Print()函数的用法___实例详解(全，例多） |
Python 函数方法实例详解全集(更新中 …) |
《Python List 列表全实例详解系列（一）》__系列总目录、列表概念 |
|
|
|
|
| 用代码过中秋，python 海龟月饼你要不要尝一口？ |
python 练习题目录 |
|
|
|
|
|
| 草莓熊 python turtle 绘图（风车版）附源代码 |
草莓熊 python turtle 绘图代码（玫瑰花版）附源代码 |
草莓熊 python 绘图（春节版，圣诞倒数雪花版）附源代码 |
|
|
|
|
|
巴斯光年 python turtle 绘图__附源代码 |
皮卡丘 python turtle 海龟绘图（电力球版）附源代码 | |
|
|
|
|
|
Node.js (v19.1.0npm 8.19.3) vue.js 安装配置教程（超详细） |
色彩颜色对照表（一）(16 进制、RGB、CMYK、HSV、中英文名) |
2024 年 6 月多家权威机构____编程语言排行榜__薪酬状况 |
|
|
|
|
|
手机屏幕坏了____怎么把里面的资料导出（18 种方法） |
【CSDN 云 IDE】个人使用体验和建议（含超详细操作教程）（python、webGL 方向) |
查看 jdk 安装路径，在 windows 上实现多个 java jdk 的共存解决办法，安装 java19 后终端乱码的解决 |
|
|
||
| vue3 项目搭建教程（基于 create-vue，vite，Vite + Vue） | ||
|
|
|
|
| 2023 年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特 |
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4 套) |
SVG 实例详解系列（一）(svg 概述、位图和矢量图区别（图解）、SVG 应用实例） |
|
|
|
|
| 【程序人生】卡塔尔世界杯元素 python 海龟绘图（附源代码），世界杯主题前端特效 5 个（附源码） | HTML+CSS+svg 绘制精美彩色闪灯圣诞树，HTML+CSS+Js 实时新年时间倒数倒计时(附源代码) |
2023 春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载） |
|
|
|
|
|
tomcat11、tomcat10 安装配置（Windows 环境）（详细图文） |
Tomcat 端口配置（详细） |
Tomcat 启动闪退问题解决集（八大类详细） |
原文地址: CSS3 动画相关属性实例大全（五)（margin、max-height、max-width、min-height、min-width、opacity、order 属性）
