css技巧篇：会频繁用到的那些技巧，应该要知道的那些注意事项本篇收集了日常开发中，会频繁用到一些css技巧，以及棘手场景

前言

大家好，我是抹茶。

本篇收集了日常开发中，会频繁用到一些css技巧，以及棘手场景的解决方案，可通过目录快速浏览是否有需要的，感兴趣的也可以收藏，方便查阅。

技巧

1.文字少时居中显示，文字超过一行居左显示

.box{
    text-align:center
}
.content{
    display:inline-block;
    text-align:left
}

inline-block元素的包裹性：文字越多宽度越宽（内部尺寸特性），但如果文字足够多，则会在容器的宽度处自动换行（自适应性）. 除了inline-block元素，浮动元素以及绝对定位元素都具有包裹性(shrink-to-fit,收缩到合适)，均有类似的智能宽度行为。

2. 多行省略和单行省略

超过三行显示省略号

.box{
   display:-webkit-box;
   overflow:hidden;
   text-overflow:ellipsis;
   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;

}

单行省略号

.item{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  /* width:100%; display:absolute的时候必须设置width:100%,其他情况可以不用 */  
}

3.收起展开的过渡动画

.element{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s;
}
.element .active{
    max-height:666px; //一个足够大的高度值
}

4.基于伪元素生成图片提示信息

img::after{
    //生成alt信息
    content:attr(alt);
    position:absolute;bottom:0;
    width:100%;
    background-color:rgba(0,0,0,.5);
    transform:translateY(100%);
    transition:transform 0.2s;//过渡动画
}
img:hover::after{
    //alt信息显示
    transform:translateY(0)
}

原理：替换元素和非替换元素的区别在于src属性。如果没有src属性，就是一个普通的内联元素。当添加src属性，图片从普通元素变成替换元素，原本支持的::before和::after此时完全无效

5.解决height :100%无效

(1) 父元素设置显示的高度值

html,body{
    height:100%
}

(2) 使用绝对定位

div{
      height:100%;
      position:absolute;
}

区别：绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding 大小值计算在内非绝对定位元素则是相对于content box 计算的。

6.对fixed定位的剪裁

fixed-clip{
       position:fixed;
       clip:rect(30px 200px 200px 20px)
}

7.让页面的滚动条不发生晃动

html {
      overflow-y:scroll;
}
:root{
      overflow-y:auto;
      overflow-x:hidden;
}
:root body{
      position:absolute;
}
body{
      width:100vw;
      overflow:hidden;
}

8. 设置浏览器滚动条样式

整体部分 ::-webkit-scrollbar
两端按钮 ::-webkit-scrollbar-button
外层轨道 ::-webkit-scrollbar-track
内层轨道 ::-webkit-scrollbar-track-piece
滚动滑块 ::-webkit-scrollbar-thumb

平常开发一般会设置下面三个属性：

::-webkit-scrollbar{  //血槽宽度
        width:8px;height:8px
}
::-webkit-scrollbar-thumb{  //拖动条
        background-color:rgba(0,0,0,.3);
        border-radius:6px;
}
::-webkit-scrollbar-track{  //背景槽
        background-color:#ddd;
        border-radius:6px
}

9. 锚点定位

（1）利用`<a>`标签以及name属性

<a href="#1">发展历程 </a>
<a name="1"> </a>

（2）使用标签的id属性

<a href="#1">发展历程</a>
<h2 id="1">发展历程 </h2>

10. 阻止margin合并

margin合并是发生在垂直方向 对于margin-top合并，可以进行如下操作（满足一个条件即可）

父元素设置为块状格式化上下元素
父元素设置boder-top值
父元素设置padding-top值
父元素和第一个子元素之间添加内联元素进行分隔

对于margin-bottom合并，可以进行如下操作（满足一个条件即可）

父元素设置为块状格式化上下文元素
父元素设置border-bottom值
父元素设置padding-bottom值
父元素和最后一个子元素之间添加内联元素进行分隔
父元素设置height、min-height或者max-height

margin合并的意义在于可以避免不小于遗落或者生成的空标签影响排版和布局

11. 块状元素右对齐

.father{
      width:300px;
}
.son{
        width：200px;
        margin-left:auto;
}

12. 设置hover的阴影

 box-shadow:0 3px 32px 0 rgba(0,0,0,.04), 0 6px 36px 0 rgba(0,0,0,.05), 0 10px 40px 0 rgba(0,0,0,.02);

13. border妙用

（1）画三道杠

.icon-menu{
        width:120px;
        height:20px;
        border-top:60px double;
        border-bottom:20px solid;
}

（2）待加号的上传按钮

<a href class="add" title="继续上传">
  添加图片
</a>
.add {
    display: inline-block;
    width: 76px; height: 76px;
    color: #ccc;
    border: 2px dashed;
    text-indent: -12em;
    transition: color .25s;
    position: relative;
    overflow: hidden;
}
.add:hover {
    color: #34538b;
}
.add::before, .add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
}
.add::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px;
}
.add::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px;
}

当没有指定border-color颜色值的时候，会使用当前元素的color计算值作为边框值

（3）利用透明border增加元素的点击区域大小

.icon-clear{
        width:16px;
        height:16px;
        border:11px solid transparent;
}

（4）三角形绘制

div{
      width:0;
      border:10px solid;
      border-color:blue transparent transparent;
}

注意事项

当float和absolute同时存在时，float属性是没有任何效果的。

.box{
      position:absolute;
      float:left; //无效
}

元素默认是inline水平，但是一旦设置position:absolute，其display计算值就会变成block
可以单独设置position:absolute,如果没有设置left/right/top/bottom，并且其祖先元素全部是非定位元素，其位置还是在当前位置
会触发BFC的情况：

根元素

float的值不为none

overflow的值为auto、scroll、或者hidden

display的值为table-cell、table-caption、和inline-block中的任何一个

position的值不为relative 和 static

IE7及以上版本浏览器适配的自适应解决方案：
(1) .bfc-content { overflow:hidden }
(2) .bfc-content{ dispaly:table-cell;width:9999px; word-break:break-all }
除非overflow-x 和overflow-y 的属性值都是visible,否则visible会被当成auto解析
在PC端，窗体的滚动高度可以使用document.documentElement.scrollTop获取，但是在移动端可能就要使用document.body.scrollTop获取
position为relative时，只有一个方向的定位属性会起作用。默认的文档流是自上而下，从左到右。因此top/bottom同时使用时，只有top生效，left/right同时使用时，只有left生效。

.example{
        position:relative;
        top:10px;
        bottom:10px;//无效
        left:10px;
        right:10px;//无效
}

非替换元素的纯内联元素，其高度完全由line-height决定。完全，即什么padding、border属性的可视高度是没有任何影响的，这也是我们平常口中的'盒模型'约定俗成说的是块级元素的原因
第一行文字，其上方是半行距在css中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是有“行距"的，只不过这个“行距”的高度仅仅是完整“行距”的一半，因此，也被称为“半行距”
vertical-align只能应用于内联元素，以及display 值为table-cell的元素 vertical-align的百分比值是相对于line-height计算的。

总结

本文将不断收集和整理在日常开发中常用的css技巧，以及从css设计规则出发，了解一些注意事项。

css技巧篇：会频繁用到的那些技巧，应该要知道的那些注意事项

前言

技巧