常见的几种css 布局
垂直居中 // 第一种 绝对定位 #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); } } 复制代码内容仅供参考使用！
