css 常见布局方案以及技巧

tab 切换的布局技巧

	<!-- 使用flex布局， display: flex; justify-content: space-between;-->
	<section id="tab">
	  <section class="catgegory">
            <section class="c1 active">
                <span>全部订单</span>
            </section>
            <section class="c1">
                <span>待付款</span>
            </section>
            <section class="c1">
                <span>待收货</span>
            </section>
            <section class="c1">
                <span>已完成</span>
            </section>
      </section>
	<section>
	<style>
		#tab {
		height: .44rem;
	    padding-top: .1rem;
	    padding: .1rem .16rem 0;
	    background-color: #fff;
	    position: fixed;
	    z-index: 22;
	    left: 0;
	    top: 0;
	    width: 100%;
	    .catgegory {
		   display: flex;
		   justify-content: space-between;
		   font-size: .13rem;
		   .c1 {
		     padding: .02rem .03rem .08rem;
			 flex: 1;
		     &.active {
		      color: @main-color;
		      border-bottom: 2px solid @main-color;
		      }
		    }
		 }
	}
	</style>
	

行自适应

	<section class="line">
		<span class="name">买家留言</span>
		<span class="val">发圆通快递快递快递快递快递快递</span>
	</section>
	
	<style>
		.line {
			/* 不要去设置行高，设置padding就行啦，就能撑开高度，而且能实现内容自适应*/
			display: flex;
			border-bottom: 1px solid #ccc;
			padding: .16rem .05rem;
			font-size: .14rem;
			.name {
				min-width: 30%
			}
			.val {
				flex: 1;
			}
		}
	</style>

checkbox选中效果

	<style>
		input{
		  outline: none; 
		  -webkit-appearance:none;  /* 去除浏览器默认样式，input按钮在ios和安卓端表现形式不同，所以得清*/
		  background-color: transparent;
		}
		input[type="checkbox"] {
		    width: .23rem;
		    height: .23rem;
		    background-image: url('../../assets/css_sprites.png');
		    background-repeat: no-repeat;
		    background-size: 3.56rem 2.07rem;
		    background-position: -2.8rem -1.01rem;
		    border: 1px solid #ccc;
		    border-radius: 50%;
		}
		/* 选中效果 */
		input[type="checkbox"]:checked {
		    background-position: -3.08rem -1.01rem;
		    border: none;
		}
		
	</style>

图片上传组件布局

	<!-- input[type="file"] 文件上传组件 透明度为1, 层级最高-->
	<style>
    .u-card {
        display: flex;
        justify-content: space-between;
        margin-top: .05rem;
        padding: 0 .18rem;
        .card {
            width: 1rem;
            height: .8rem;
            background-color: #f2f2f2;
            border-radius: .05rem;
            position: relative;
            padding: 0 .18rem;
            i {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: .2rem;
                height: .2rem;
                background-image: url('../images/icons/iconadd.png');
                background-size: .2rem .2rem;
            }
            .imgbox {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: .05rem;
                top: 0;
                left: 0;
            }
        }

        input[type="file"] {
            position: relative;
            opacity: 0;
            width: 100%;
            height: 100%;
            border-radius: .05rem;
            z-index: 9;
        }
    }
	</style>
                <section class="u-card">
                    <section class="card">
                        <img src="" alt="" class="imgbox">
                        <input type="file" class="sf1" accept="image/*">
                        <i></i>
                    </section>
                    <section class="card">
                        <img src="" alt="" class="imgbox">
                        <input type="file" class="sf1" accept="image/*">
                        <i></i>
                    </section>
                    <section class="card">
                        <img src="" alt="" class="imgbox">
                        <input type="file" class="sf1" accept="image/*">
                        <i></i>
                    </section>
                </section>
                <section class="word">
                    <span>身份证人像面</span>
                    <span>身份证国徽面</span>
                    <span>认证合一</span>
                </section>