前端css样式封装-flex

今天药忘吃喽~ 2022-10-07 09:56 242阅读 0赞

html,
    body {
    	height: 100%;
    	// overflow-y:  auto;
    	// position:  relative;
    }
    
    #root {
    	height: 100%;
    	position: relative;
    }
    
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif !important;
    }
    
    
    
    /* 为元素设定的宽度和高度决定了元素的边框盒 */
    div {
    	box-sizing: border-box;
    	-webkit-tap-highlight-color: rgba(0);
    }
    
    a {
    	text-decoration: none;
    }
    
    
    
    /* 默认图片是行内元素 */
    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;
    }
    
    
    
    /* 弹性布局盒模型可换行 */
    .rowW {
    	display: -moz-box;
    	/* Firefox */
    	display: -ms-flexbox;
    	/* IE10 */
    	display: -webkit-box;
    	/* Safari */
    	display: -webkit-flex;
    	/* Chrome, WebKit */
    	display: box;
    	display: flexbox;
    	display: flex;
    	flex-wrap: wrap;
    }
    
    
    
    /* 水平垂直居中 */
    .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;
    }
    
    
    
    /* 横向排列,所有元素放置于底部 */
    .bottomY {
    	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;
    	align-items: flex-end;
    }
    
    
    
    /* 左右居中 */
    .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;
    }
    
    .rightX {
    	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;
    	align-items: flex-end;
    	/* justify-content: flex-end; */
    }
    
    
    
    
    /*定位全屏*/
    .allcover {
    	position: absolute;
    	top: 0;
    	right: 0;
    }
    
    
    
    /*定位上下左右居中*/
    .centerAXY {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    }
    
    
    
    /*定位上下居中*/
    .centerAY {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    
    
    /*定位左右居中*/
    .centerAX {
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    }
    
    
    
    /* 清楚浮动 */
    .clearfix::after {
    	content: '';
    	display: block;
    	clear: both;
    }
    
    .clearfix {
    	zoom: 1;
    }
    
    
    
    /* 左浮动 */
    .fl {
    	float: left;
    }
    
    
    
    /* 右浮动 */
    .fr {
    	float: right;
    }
    
    .am-modal-mask {
    	z-index: 9999999;
    }
    
    .am-modal-wrap {
    	z-index: 9999999;
    }
    
    .am-list-header {
    	padding: 0 !important;
    }
    
    .am-list-footer {
    	padding: 0 !important;
    }
    
    .am-list-view-scrollview {
    	height: 100vh;
    }