前端常用布局样式

/*每个页面公共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;
	}