我所不注意的那些CSS冷知识，但却阻止了我做项目的速度

2019年9月14日 221次阅读 来源: Denzel

有序无序列表序列号不显示

我们常常要遇到的是，不显示序列号（设置list-style-type:none），但有时因为项目过大，设置了一些通用属性后，想显示序号却怎么也捣腾不出来,关于list-style-type：none属性，具体去看W3C标准，下面罗列那些情况，会阻止序列号显示的问题；
1：list-style-type:none,规范标准，没啥讨论的；
2：当li标签border与ul外边框距离小于1em时，也就是：
width =ul_margin + ul_border + ul_padding + li_margin <1em(为啥是1em，因为序号字体和文字字体相关)；
3：li标签设置了overflow属性且属性值不为visible;

结论：所以写这块时，要注意自己css初始化样式的代码如margin:0这样的代码；

块状元素默认宽度

display属性为block的块状元素，width不一定为父元素宽度的100%

  • position属性为absolute或fixed；和其上一级元素position是否为非static无关，就是不继承其宽度；
  • 和第一条类似，当设置了float属性；
  • 当父元素display为flex布局，display为inline-block布局时，虽然父元素的宽度受子元素撑开，当其子元素的宽度还是为父元素宽度的100%；
    另外：可以关注一下CSS3width的四个新特性：fill-available, max-content, min-content, 以及fit-content，张大神的讲解奉上

inline-block间距问题

学会inline-block这个属性后，float这个神奇的怪物，出镜率就越来越低,但偶然发现,当margin和padding都设置为0时，块与块之间还是存在间距（大于4px）；百度了一下，原来这里面学问还真不少；推荐一篇讲透了的文章

在页面中，怎么完美的控制元素的高度

在 CSS 规范中，有 4 种类型的可用视口单位：

  • vw — 1vw 等于视口宽度的 1%
  • vh — 1vh 等于视口高度的 1%
  • vmin — vw 和 vh 中的较小值
  • vmax — vw 和 vh 中的较大值
    简单来说，它和 px,rem 一样就是个单位，适当的使用这种单位有时候能出奇效。

视口（viewport），即浏览器屏幕大小，也可以理解手机屏幕有效的可视区域大小，1vw 等于视口宽度的 1%，100vw 即整个视口宽度，同理计算高度。视口单位v更常用语高度的控制，如果我们用height：20%来控制我们内容的高度，在这个内容之前父元素和body、HTML高度没有显示的设置高度，这样设置则是无效的，但如果我们想不去设置body或父元素的高度，想直接和使用者的屏幕大小关联，使显示的元素和屏幕呈现一个完美的比例，比如黄金分割点啥的，这时候vh这个单位就显得特别合适。

flex伸缩项目的margin：auto(奇淫技巧)

当学会了flex时，inline-block的出镜率又越来越低，前端真的是无论你跑多快，你永远跟不上。闲话少扯，当我们用flex实现下列这种布局转换时,
《我所不注意的那些CSS冷知识，但却阻止了我做项目的速度》
如果我们css这样写：

.headbox{display:flex;justify-content:space-between;margin 0 1rem；}

上面未登陆时，由于是两个元素，所以子元素不需要做任何动作，就可以实现如图所示的布局，但是当登陆后，子元素又两个变为三个（菜单按钮、欢迎信息、注销按钮）,我们首先想到的是不是将后面两个再装到另一个box中，但是flex的伸缩项目被设置margin：auto时，就有意想不到的效果,其设置了为”auto” 的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置；粘贴下面的源码可以自己感受一下：

<style>
     .flex{display: flex;justify-content: space-between;}
     .right {margin-right: auto;}
</style>       
<div class="flex">
  <button class="right">菜单</button>
   <button>登录</button>
   <button>注销</button>
</div>

伪元素的灵活使用

伪元素有很多：其中以hover、first-child、after、before这些最常用，用好了hover可以增强交互的感觉，而用好了before，after，则可以少些好多重复的代码，特别这些代码是动态生成的时候，比如，当我要生成这样一个list清单样式的时候，如下图
《我所不注意的那些CSS冷知识，但却阻止了我做项目的速度》
这个清单有很多相同之处，其格式可以这样概括： 图标 – 标题 – ‘-’ – 日期 ,所以我们以标题为准，利用伪元素，为其插入图标和 ‘-’ ，这在写代码时，就减少很多重复工作； 但有一个要重点提及的，就是当用伪元素插入一个背景图时，有两点需要注意:
1：content：”，虽然只设背景，但这句话还得有；
2:设背景图片，最好不要直接在content：URL()这样设置，除非你图片切的刚好，但还是不推荐，还是该采用background设置，利于图片缩放，如：

.jsimg::before {content:'';background: url('../img/js.png') no-repeat;background-size: 3rem;width:3rem;height:3rem;}

3: 设置背景图片时width一定要指定；

后续再补充

    原文作者：Denzel
    原文地址: https://segmentfault.com/a/1190000010279351
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞