网站首页 » 前端开发 » div+css » div+css 技巧大全
上一篇:
下一篇:

div+css 技巧大全

121212

css 计数

css 代码
.choose{
  counter-reset:fruit;
}
.choose input:checked{
  counter-increment: fruit;
}
.count:before{
  content:counter(fruit);
}
HTML 代码
<div class="choose">
  <label><input type="checkbox">1</label>
  <label><input type="checkbox">2</label>
</div>

<p><span class="count"></span></p>

多列同高

css 代码
.wrap{
  display: table;
  border-spacing: 20px;
}
.wrap div{
  display: table-cell;
  width: 10000px;
  padding:12px;
  background: #eee;
}
HTML 代码
<div class="wrap">
  <div>挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的</div>
  <div>挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的</div>
  <div>挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的</div>
  <div>挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的挺完美的</div>
</div>

伪类 (::before 和 ::after)的 content 内容居中

HTML 代码
<div class="box"></div>
CSS 代码
.box{
    position: relative;
    width:60px;
    height: 60px;
}
.box::before{
    content: "✔";
       font-size: 20px;
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       -webkit-justify-content: center;
       justify-content: center;
       -webkit-align-items: center;
       align-items: center;
       width:100%;
       height:100%;
}

关于一些特殊字符你可通过输入法实现。

完美实现超出文字点点(省略)效果

.text-deal{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all; /* 追加这一行代码 */
}

经测试,目录暂时还没发现有不适用的场景。

样式消除移动端点击延迟

a, button, .otherElements
{
    -ms-touch-action: manipulation;    /* IE10  */
    touch-action: manipulation;        /* IE11+ */
}

去掉每一行最后一个元素的右边距

.box>.item:nth-child(3n){
  margin-right:0
}

 
可以根据实际情况修改3n的值,即一行有多个几元素排列就把 3n 改成多少n
持续更新……

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/div-css-skill/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END