Css3、Scss 常用的布局设置-通用

港控/mmm° 2023-01-06 01:25 321阅读 0赞

一、垂直居中

> // 第一种 绝对定位  
> \#parent\{  
>   position:relative;  
>   height:400px;  
>   .son\{  
>    position:absolute;  
>    width:100px;  
>    height:100px;  
>    top: 50%;  
>    transform: translateY(-50%);   
>   \}  
> \}  
> // 第二种 flex布局  
> \#parent\{  
>    display:flex;  
>    align-items:center;  
>    height:400px;  
>   .son\{  
>     width:100px;  
>     height:100px;  
>   \}  
> \}  
> // 第三种  margin  
> \#parent\{  
>   position:relative;  
>   height: 400px;  
>   .son\{  
>    position:absolute;  
>    width:100px;  
>    height:100px;  
>    top:0;  
>    bottom:0;  
>    margin:auto;   
>   \}  
> \}

二、水平居中

> // 多个块级元素  
> \#parent\{  
>   height:100px;  
>   text-align:center;  
>   .son\{  
>     width:100px;  
>     height:100px;  
>     display:inline-block;  
>   \}  
> \}  
> // 绝对定位  
> \#parent\{  
>   position:relative;  
>   height:100px;  
>   .son\{  
>     position:absolute;  
>     width:100px;  
>     height:100px;  
>     left:50%;  
>     transform:translateX(-50%)  
>   \}  
> \}  
> // 块级元素  
> \#parent\{  
>   height:100px;  
>   .son\{  
>     width:100px;  
>     height:100px;  
>     margin:0 auto;  
>   \}  
> \}  
> // 行内元素  
> \#parent\{  
>   height:100px;  
>   .son\{  
>     width:100px;  
>     height:100px;  
>     display:inline-block;  
>     text-align:center;  
>   \}  
> \}  
> // flex布局  
> \#parent\{  
>   display:flex;  
>   justify-content:center;  
>   height:100px;  
>   .son\{  
>     width:100px;  
>     height:100px;  
>   \}  
> \}

三、左定宽右自适应

> // flex 布局  
>  \#Box\{  
>   width: 100%;  
>   height:400px;  
>   .left\{  
>     float:left;  
>     width:100px;  
>     height:400px;  
>   \}  
>   .right\{  
>     flex:1;  
>     height:400px;  
>   \}  
> \}  
> // float + margin   
>  .left \{  
>       float: left;  
>       width: 100px;  
>       height: 100%;  
>       background-color: antiquewhite;  
>    \}  
>  .right \{  
>       margin-left: 100px;  
>       height: 100%;  
>       background-color: rgb(77, 87, 184);  
>    \}  
> // float + overflow  
>  .left \{  
>       float: left;  
>       width: 100px;  
>       height: 400px;  
>       background-color: antiquewhite;  
>    \}  
>    .right \{  
>       height: 400px;  
>       overflow: hidden;  
>       background-color: rgb(77, 87, 184);  
>     \}

**四、请用CSS3写一个旋转的硬币**

>  .coin\{  
>   width:100px;  
>   height:100px;  
>   transform-style:preserve-3d;  
>   transform: rotate3d(-1, -1, 0, 45deg);  
>   animation: coin 15s linear;  
> \}  
> .coin>div\{  
>   position:absolute;  
>   width:100px;  
>   height:100px;  
> \}  
> .front\{  
>   width:100px;  
>   height:100px;  
>   border-radius:50%;  
>   transform: translateZ(2px); // 硬币厚度  
> \}  
> .back\{  
>   width:100px;  
>   height:100px;  
>   border-radius:50%;  
> \}  
> @keyframes coin\{  
>   from\{  
>     transform: rotateY(0deg);  
>   \}  
>   to\{  
>     transform: rotateY(360deg);  
>   \}  
> \}