笔记整理..

最新推荐文章于 2024-10-02 22:45:05 发布

aalg01

最新推荐文章于 2024-10-02 22:45:05 发布

阅读量67

点赞数

文章标签：笔记前端 css

本文链接：https://blog.csdn.net/aalg01/article/details/131633528

版权

 div{
            width: 300px;
            height: 300px;    
            background-color: aqua;  
           /* padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
            padding-right: 20px; 设置内边距*/
            padding: 10px 30px 60px 90px; /*可以同时设置内边距，分别为上右下左*/
            margin: 0 auto; /*水平居中，将整个盒子模型水平居中*/
        }

 span{
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin-right: 5px;/*用来设置外边距*/

        }

 .father{
            width: 800px;
            height: 800px;
            background-color: aquamarine;
            border: 1px solid rebeccapurple;
           /*文本溢出，自适应overflow: auto;
            overflow: hidden;*/
        }   /*margin塌陷问题：父元素的第一个子元素的margin*/

div{
            width: 300px;
            height: 300px;
            padding: 50px;px;
            border: 2px solid rebeccapurple;
            box-sizing: border-box;/*解决padding影响盒子大小的问题*/
        }

.father{
            width: 800px;
            height: 800px;
            background-color: aqua;
            display: flex;/*排列方式,可以让子盒子在同一行显示*/
            /*flex-direction: row-reverse;横排列，从右至左*/
            /*flex-direction: row;横排列，从左至右*/
            /*flex-direction: column;竖排列，从左上至下*/
            /*flex-direction: column-reverse;竖排列，从左下至上*/
              flex-wrap: wrap;
            /*让flex布局变为多行
            flex-wrap: wrap;
              flex-wrap: nowrap;*/
              
              /*主轴上的布局*/
              /*justify-content: center;
              justify-content: end;
              justify-content: space-between;
              justify-content: space-around;*/
              justify-content: space-evenly;
              
              /*侧轴*/
              /*align-items设置单行*/
              align-items: center;/*垂直居中*/
             /* align-items: end;贴近底部*/

             /*align-content设置多行*/
             align-content: center;
            




        }
        .son{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
            order: -3;/*order，值越小排列在越前面*/
        }

  div{
        width: 400px;
        height: 890px;
       /*颜色渐变*/ background-image: linear-gradient(red,green,pink,blue);
    }

.father{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            transform-style: preserve-3d;
            perspective: 800px;
           /* perspective-origin: 100px 200px;*/
        }

        .son{
            transition: 2 5s;/*谁变化给谁加*/
            width: 300px;
            height: 300px;
            background-color:palegoldenrod ;
           /*平移元素（）分别代表xy轴的偏移量
            transform: translate(40px,80px);
        翻转元素，盒子内的内容也会一同翻转
        transform: rotateZ(40deg);
       复合写法,复合写法里面有旋转时，应放到最后以便于与目标样式达成一致
      transform: translate(100px) rotateZ(45deg);*/
    /*缩放：transform: scale(1.5);*/
   /* transform: translate(100px,100px) scale(0.25) rotate(45deg);*/
   transform: rotateX(45deg);
  /*隐藏背部*/ backface-visibility: hidden;