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

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

咱们经常要遇到的是，不显示序列号（设置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这样写：

.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清单样式的时候，以下图

这个清单有不少相同之处，其格式能够这样归纳： 图标 - 标题 - ‘-’ - 日期 ,因此咱们以标题为准，利用伪元素，为其插入图标和 ‘-’ ，这在写代码时，就减小不少重复工做； 但有一个要重点说起的，就是当用伪元素插入一个背景图时，有两点须要注意:
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必定要指定；

后续再补充