CSS 日常使用小结

这是我参与新手入门的第一篇文章，我决定先从日常中用到的css开始，抱枕我来了。

1. posotion: sticky 粘性定位

设定sticky的表现类似于relative和fixed的合体，在超过目标区域时，他会固定于目标位置。
可以用来实现固定表头、锁定列，以及其他需要滚动固定元素的地方。

完整代码点击这里

注意点：

1. 必须定义目标位置left/right/top/bottom来实现固定效果。
2. posotion: sticky应用于table时，只能作用于th和td。

2. 伪元素增大点击区域

    .btn{
      position: relative;
      background-color: rgb(133, 215, 245);
    }
    .btn::before {
      content:"";
      position:absolute;
      top:-10px;
      right:-10px;
      bottom:-10px;
      left:-10px;
      background-color: rgb(211, 185, 236,0.3);
    }
复制代码

实际开发中，伪元素可以用于清除浮动，画分割线等多种用途。

3. css下inline元素换行：

    .box span:after {
        content: '\A';
        white-space: pre;
    }
    <p class="box">
       <span>第一行</span>
       <span>第二行</span>
    </p>
复制代码

4. margin-top 塌陷问题

原文参考链接

1. 给父元素增加边框
2. 溢出隐藏，在父元素的style里面添加overflow：hidden；
3. …

具体的6中方式，参考链接里面的作者已经给出了原因和答案，此处只是借鉴，第二种常用且方便，但是要注意hidden之后的bug。

5. pointer-events 元素穿透 不可点击

有时候需要全屏的页面遮罩效果，遮罩层放到最高层级，但是不想遮住低下的元素，可以设置：

pointer-events:none;
复制代码

如果父元素设置了pointer-events:none; 但是想让子元素可以点击，可以把要点击的元素设为pointer-events:auto;

6. z-index 层级无效问题

元素设置了transform 2d,3d效果，会遇到层级一直在最上面的问题，其他元素设置z-index值是无法覆盖的，可以用translateZ(0em) 代替z-index设置上下顺序

// 弹窗
.Popup-wrapper{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:100;
  -webkit-transform: translateZ(10em);
  -o-transform: translateZ(10em);
  transform: translateZ(10em);
  <!-- 旋转的元素会穿过这个弹窗 给弹窗设置更高的translateZ -->
 }
 
 
.logo01{
    animation: rotateImg 3s ease-in infinite;
  }
@keyframes rotateImg{
  80%{
    transform: rotateY(0);
  }
  90%{
    transform: rotateY(180deg) translateZ(0em);
  }
  100%{
    transform: rotateY(0);
  }
}
复制代码

7. 实现横向滚动，但是父元素没有固定宽度的解决方案

完整代码点击这里

项目中想实现横向滚动，但是item的数量又是不固定的，没办法给ul设置宽度，加一个float：left，脱离文档流，宽度就撑起来了。

8. display：table/table-cell;

这个我觉得还是比较常用的，可以很容易的实现垂直居中布局，图片文字居中对齐等。

.wrap{
      display: table;
    }
    .box{
      display: table-cell;
      padding: 10px;
      margin:10px; /* 设置 display: table-cell margin 无用 */
      width: 150px;
      vertical-align: middle;
    }
复制代码

注意：父元素要设置display:table,写了table-cell之后，margin无效，此元素会作为一个表格单元格显示。

9. outline 的用处

outline 用来描边做效果等，还是很好用的，这个是在张鑫旭老师的博客里看到过的，里面还有很多css小技巧，很推荐。

10. 文字字母数字的垂直排列

text-orientation CSS 属性设定行中字符的方向。但它仅影响纵向模式（当 writing-mode 的值不是horizontal-tb）下的文本。此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头。

upright
将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts）。注意这个关键字会导致所有字符被视为从左到右，也就是 direction 被强制设为 ltr。

    p{
      writing-mode: vertical-lr; /* 垂直方向内内容从上到下，水平方向从左到右 */
      text-orientation: upright; /* 将水平书写的字符自然布局（直排） */
    }
复制代码

总结：

首先：第一次发布文章，一直觉得我的工作平平无奇，知识一般也都是从各种技术论坛博客上学到的，私认为并没有值得记录的地方，这次为了抱枕尝试一下，也感谢掘金有这样一个活动，让我迈出了第一步。

其次：写了文章才知道，这些知识被书写总结出来，还是颇费一番功夫的，像我这样没有任何准备，只凭记忆边改边写的人，仅仅十条简单的css知识点，居然花费了一下午！这让我对掘金上面发布文章的小伙伴们有了一全新的认知，他们写文章背后肯定也付出了很多辛苦，敬重那些经常更新的大佬们，也珍惜这个热爱分享的地方。

最后：写的不好多多包涵，我只是想要一个抱枕而已，以上。