前端常用布局样式
作者:互联网
/*每个页面公共css */
page {
background-color: #f4f4f6;
width: 100%;
}
/* 为元素设定的宽度和高度决定了元素的边框盒 */
view,div {
box-sizing: border-box;
display: flex;
}
/* 默认图片是行内元素 */
image,img {
display: inline-block;
}
/* 关闭滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/* 超过一行显示省略号 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 去除边框 */
button {
margin: 0;
padding: 0;
font: 400 15px/1.4 '';/*移动端和H5需要自己调试一下 px 或 rpx 大小*/
background: unset;
}
button::after {
border: none;
}
/* 弹性布局盒模型 */
.flex {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
}
/* 水平垂直居中 */
.centerXY {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
justify-content: center;
align-items: center;
}
/* 上下居中 */
.centerY {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
/* 横向排列 */
.rowX {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
/* 左右居中 */
.centerX {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
/* 纵向排列 */
.columnY {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* 向左向右 */
.betweenX {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 向上向下 */
.betweenY {
display: -moz-box;
/* Firefox */
display: -ms-flexbox;
/* IE10 */
display: -webkit-box;
/* Safari */
display: -webkit-flex;
/* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*定位全屏*/
.allcover {
position: absolute;
top: 0;
right: 0;
}
/*定位上下左右居中*/
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*定位上下居中*/
.ct {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/*定位左右居中*/
.cl {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 清楚浮动 */
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
/* 左浮动 */
.fl {
float: left;
}
/* 右浮动 */
.fr {
float: right;
}
标签:box,flex,常用,flexbox,样式,前端,IE10,webkit,display 来源: https://blog.csdn.net/ZkD953/article/details/88294791