阅读 367

CSS 日常使用小结

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

1. posotion: sticky 粘性定位

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

完整代码点击这里

sticky.gif

注意点:

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

2. 伪元素增大点击区域

a.gif

    .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元素换行:

inline.gif

    .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. 实现横向滚动,但是父元素没有固定宽度的解决方案

完整代码点击这里

left.gif

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

8. display:table/table-cell;

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

cell.gif

.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小技巧,很推荐。

outline.gif

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

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

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

vertical.gif

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

总结:

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

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

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

文章分类
前端
文章标签