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 属性

 margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

<div id="animation49">逆境清醒div>

​改变  margin 属性：从 margin: 0;到 margin:50px;

1.1、margin-bottom属性（设置元素的下边距）

margin-bottom属性设置元素的下边距。

<div id="animation50">逆境清醒div>

​改变 margin-bottom 属性：从 margin-bottom: 0;到 margin-bottom: 50px;

1.2、margin-left 属性（设置元素的左边距）

    <div>
        <div id="animation51">逆境清醒div>
    div>

​改变  margin-left  属性：从 margin-left: 0; 到 margin-left: 50px;

1.3、margin-right 属性（设置元素的右边距）

<div id="animation52">逆境清醒div>

​

改变  margin-right 属性：从 margin-right: 99%;到 margin-right: 90%;

1.4、margin-top属性（设置元素的顶边距）

<div id="animation53">逆境清醒div>

​

改变 margin-top 属性：从 margin-top: 1%;到 margin-top: 10%; 

二、max-height 属性（设置元素的最大高度）

max-height 属性设置元素的最大高度。它可以防止 height 属性的已用值大于为 指定的值。
max-height属性不包括填充，边框，或页边距！

<div id="animation54"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你p>div>

​ 改变 max-height 属性：从 默认到 max-height: 80px;

   
三、max-width属性（设置元素的最大宽度）

max-width属性设置元素的最大宽度

<div id="animation55"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你p>div>

​

改变  属性：从 0 到 100px

四、min-height属性（设置元素的最低高度）

<div id="animation56"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你p>div>

​

改变 min-height 属性：从 min-height: 50px;到 min-height: 260px;

五、min-width属性（设置元素的最低宽度）

<div id="animation57">逆境清醒div>

​

改变 min-width 属性：从 50px 到 min-width: 200px;

六、opacity 属性（设置一个元素的透明度级别）

    <div id="bjb"><h1>我是背景板h1>div>
    <div id="animation58"><h1>我会隐形h1>div>

改变  属性：从 0 到 100px

七、order 属性（设置布局时的顺序）

order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。
规定了弹性容器中的可伸缩项目在布局时的顺序。
元素按照 order 属性的值的增序进行布局。
拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
order 仅仅对元素的视觉顺序 (visual order) 产生作用，
并不会影响元素的逻辑或 tab 顺序。 
order 不可以用于非视觉媒体
如果元素不是弹性项目，则 order 属性无效。

初始值：0

    <div id="main">
        <div style="background-color: red; order: 1;" id="animation59">逆境清醒div>
        <div style="background-color:orange;order:2;">2div>
        <div style="background-color:yellow;order:3;">3div>
        <div style="background-color:lightgreen; order: 4;">4div>
        <div style="background-color:lightblue;order:5;">5div>
        <div style="background-color:purple;order:6;">6div>
    div>

​

改变 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)详解系列索引目录

逆境清醒