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

常见的几种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);}
}
复制代码

内容仅供参考使用！