从FrozenUI中学习CSS的实际解决方案

最新推荐文章于 2021-08-04 01:48:18 发布

lilly呀

最新推荐文章于 2021-08-04 01:48:18 发布

阅读量783

点赞数

分类专栏： CSS记录篇文章标签： css

CSS记录篇专栏收录该内容

14 篇文章 7 订阅

订阅专栏

前言：最近，在查看FrozenUI框架时，上面提及了很多了CSS的常用场景的实际解决方案，（如：1px解决方案，文字截断，占位，表单开关，角标等，同时也解决了移动端的适配问题等），感觉很有实用价值，所以在此mark一下。

一、1px的解决方案

1px解决移动端retina屏幕1像素的显示问题。

<ul class="ui-list-text border-list">
    <li class="ui-border-t">上边框</li>
    <li class="ui-border">边框</li>
    <li class="ui-border-b">下边框</li>
    <li class="ui-border-tb">上下边框</li>
    <li class="ui-border-l">左边框</li>
    <li class="ui-border-r">右边框</li>
</ul>

.border-list {
    background-color:#fff;
}
.border-list li {
    width: 100px;
    margin: 10px auto;
    -webkit-box-pack:center;
   text-align:center;
}
.ui-list-text>li {
    position:relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
    -webkit-box-align: center;
}
/***上边框***/
.ui-border-t:before {
    border-top: 1px solid #e06161;
    content:'';
    display:block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform-origin:left top;
}
/***边框***/
.ui-border::before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border:1px solid #e06161;
    -webkit-transform-origin:0 0;
    padding:1px;
    -webkit-box-sizing:border-box;
   pointer-events:none;
   z-index:10;
   pointer-events:none;
}
/***下边框***/
.ui-border-b::before {
    border-bottom:1px solid #e06161;
    content:'';
    display:block;
    width:100%;
    position:absolute;
    left:0;
    bottom:0;
    -webkit-transform-origin:left bottom;
}
/***上下边框***/
.ui-border-tb::before {
    border-top:1px solid #e06161;
    content:'';
    display:block;
    width:100%;
    position:absolute;
    left:0;
    top:0;
    -webkit-transform-origin:left top;
}
/***左边框***/
.ui-border-l::before {
    border-left:1px solid #e06161;
    content:'';
    display:block;
    bottom:0;
    position:absolute;
    left:0;
    top:0;
    -webkit-transform-origin:left top;
}
/***右边框***/
.ui-border-r::before {
    border-right:1px solid #e06161;
    content:'';
    display:block;
    bottom:0;
    position:absolute;
    right:0;
    top:0;
    -webkit-transform-origin:right top;
}
/***圆角边框***/
.ui-border-radius::before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border:1px solid #e06161;
    -webkit-transform-origin:0 0;
   padding:1px;
   -webkit-box-sizing:border-box;
   border-radius:8px;
   pointer-events:none;
   z-index:10;  
}

二、占位的解决方案

占位解决方案：失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性。

<section class="ui-placehold-wrap">
  <div class="ui-placehold">正在加载中...</div>
</section>

.ui-placehold-wrap {
    padding-top:31.25%;
    position:relative;
}
.ui-placehold {
    color:#bbb;
    position:absolute;
    top:0;
    width:100%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-sizing:border-box;
    text-align:center;
    height:100%;
    z-index:1;
}

三、两端留白的解决方案

两端留白，640以下10px,以上15px。

<ul class="ui-row ui-whitespace">
  <li class="ui-col ui-col-50">50</li>
  <li class="ui-col ui-col-50">50</li>
</ul>

.ui-row {
    display:block;
    overflow:hidden;
}
.ui-whitespace {
    padding-left:12px;
    padding-right:12px;
}
.ui-col {
    padding:5px;
    background:#777;
    text-align:center;
    box-sizing:border-box;
    border:1px solid #ddd;
}
.ui-col-50 {
    width:50%;
}
.ui-col {
    float:left;
}

四、表单开关项的解决方案

通过CSS设置表单开关项的解决方案。

<form action="">
  <div class="ui-form-item ui-form-item-switch ui-border-b">
    <p>对附近的人可见</p>
    <label class="ui-switch">
        <input type="checkbox">
    </label>
  </div>   
  <div class="ui-form-item ui-form-item-switch ui-border-b">
    <p>对附近的人可见</p>
    <label class="ui-switch">
         <input type="checkbox" checked="">
    </label>
  </div>
</form>

.ui-form-item {
    max-width:375px;
    margin:0 auto;
}
.ui-form-item-switch {
    display:-webkit-box;
    -webkit-box-align:center;
}
.ui-form-item {
    position:relative;
    font-size:18px;
    height:46px;
    line-height:46px;
    padding-right:12px;
    padding-left:12px;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
.ui-border-b::after {
    border-bottom:1px solid #e9e9e9;
    content:'';
    display:block;
    width：100%;
    position:absolute;
    left:0;
    bottom:0;
    -webkit-transform-origin:left bottom;
}
.ui-switch {
    position:absolute;
    font-size:14px;
    right:12px;
    top:50%;
    margin-top:-16px;
    width:52px;
    height:32px;
    line-height:32px;
}
label {
    display:inline-block;
    margin-bottom:.5rem;
}
.ui-form-item input[type="checkbox"] {
    padding-left:0;
}
.ui-switch input {
    width:52px;
    height:32px;
    position:absolute;
    z-index:2;
    border:none;
    background:none;
    -webkit-appearance:none;
    outline:none;
}
.ui-switch input {
    box-sizing:border-box;
}
.ui-switch input::before {
    content:'';
    width:50px;
    height:30px;
    border:1px solid #dfdfdf;
    background-color:#fdfdfd;
    border-radius:20px;
    cursor:pointer;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    -webkit-box-sizing:content-box;
    border-color:#dfdfdf;
    -webkit-box-shadow:#dfdfdf 0px 0px 0px 0px inset;
    -webkit-transition:border 0.4s,-webkit-box-shadow 0.4s;
    -webkit-background-clip:content-box;
}
.ui-switch input:checked:before {
    border-color:#64bd63;
    -webkit-box-shadow:#64bd63 0px 0px 0px 16px insert;
    background-color:#64bd63;
    -webkit-transition:border 0.4s,-webkit-box-shadow 0.4s,background-color 1.2s;
   background-color:#64bd63;
}
.ui-switch input::after {
    content:'';
    width:30px;
    height:30px;
    position:absolute;
    top:1px;
    left:0;
    border-radius:100%;
    background-color:#fff;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
    -webkit-transition:left 0.2s;
}
.ui-switch input:checked:after {
    left:21px;
}

五、角标的解决方案

各种小角标的设置

<ul class="ui-grid-halve">
  <li>
    <div class="ui-grid-halve-img" style="overflow:hidden;">
      <i class="ui-subscript ui-subscript-red">最新</i>
      <span style="background-image:url(http://placeholder.qiniudn.com/290x160);"></span>
    </div>
  </li>
</ul>

.ui-grid-halve  {
    max-width:375px;
    margin:0 auto;
}
.ui-grid-halve {
    overflow:hidden;
}
.ui-grid-halve>li {
    padding-right:5px;
    padding-bottom:10px;
    float:left;
    position:relative;
    -webkit-box-sizing:border-box;
    width:50%;
}
.ui-grid-halve-img {
    width:100%;
    padding-top:55.17%;
    position:relative;
}
.ui-subscript.ui-subscript-red {
    background-color:#fb5050;
}
.ui-subscript {
    position:absolute;
    left:0;
    top:0;
    z-index:9;
    height:16px;
    line-height:16px;
    font-size:11px;
    background-color:#fb5050;
    white-space:nowrap;
    color:#fff;
    padding:0px 50px;
    transform:rotate(-45deg) translate(-31%,-205%);
}
.ui-grid-halve-img>span {
   width:100%;
   height:100%;
   position:absolute;
   top:0;
   left:0;
   z-index:1;
   background-repeat:no-repeat;
   font-style:normal;
   -webkit-background-size:cover;
}

六、进度条的解决方案

<div class="demo-block">
  <div class="ui-progress">
    <span style="width:50%;"></span>
  </div>
</div>

.demo-block {
    position:relative;
}
.ui-progress {
    overflow:hidden;
    width:100%;
    height:2px;
    font-size:0px;
    background-color:#e2e2e2;
    box-sizing:border-box;
}
.ui-progress span {
    display:block;
    width:0%;
    background:#65d521;
    height:100%;
    font-size:0;
}