HTML应用

最新推荐文章于 2024-07-25 10:45:42 发布

接着看日落

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量30

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_77161151/article/details/134369500

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
           }
           .boss {
               width: 400px;
               height: 300px;
               border: 1px solid red;
               display: flex;
               /* flex-flow: column-reverse wrap-reverse; */
           }
           .box1 {
               width: 100px;
               height: 100px;
               background-color: pink;
               /* order: -2; */
               align-self: auto;
           }
           .box2 {
               width: 100px;
               height: 100px;
               background-color: orange;
               align-self: flex-end;
           }
           .box3 {
               width: 100px;
               height: 100px;
               background-color: aqua;
               /* order: -1; */
               align-self: center;
           }
           .boxx1 {
               width: 300px;
               height: 300px;
               border: 30px solid aqua;
               /* border-top: 10px solid red;
               border-left: 20px solid red;
               border-bottom: 30px solid red;
               border-right: 40px solid red; */
               /* border-top-width: 10px;
               border-left-width: 20px;
               border-bottom-width: 30px;
               border-right-width: 40px;
               border-top-style: solid;
               border-left-style: dashed;
               border-bottom-style: dotted;
               border-right-style: double; */
               /* none:没有边框,即忽略所有边框的宽度(默认值)
               ·solid:边框为单实线
               ·dashed:边框为虚线
               ·dotted:边框为点线
               ·double:边框为双实线 */
               /* border-top-color: red;
               border-left-color: orange;
               border-bottom-color: pink;
               border-right-color: aqua; */
               /* 圆角 */
               /* border-radius: 10px 20px 30px; */
               /* border-radius: 50%; */
               /* 边框阴影 */
               /* box-shadow: 水平垂直大小颜色; */
               /* 图形边框 */
               border-image: url(../../2.png) 15 15 round;
           }
       </style>
   </head>
   <body>
       
       
       
       <div class="boss">
           <div class="box1">11111</div>
           <div class="box2">22222</div>
           <div class="box3">33333</div>
       </div>
       <div class="boxx1"></div>
   </body>
</html>

接着看日落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML应用

如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。-- flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。-- align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
复制链接

扫一扫