开发中遇到的问题 CSS

[已解决]伪类选择器无法选中指定元素(190923)
[已解决]父元素的overflow为什么可以清除浮动(190927)
[已解决]为什么把img元素设置为块级元素就能清除它与相邻元素的间距(190929)
为什么元素向右浮动后，前面的兄弟元素没有向右靠
[已解决]rem方案解决移动端适配，为什么设置根接点基础大小为1px无效(190924)
[已解决]绝对定位的父元素宽高固定，子元素高度不固定，如何让子元素在父元素中垂直居中，兼容IE老浏览器的写法(190926)

1. [已解决]伪类选择器无法选中指定元素(190923)

业务背景

在flex布局中，想让第一个item左右都有margin，以达到让首行只显示两个item的目的，后续的每行显示3个

遇到的问题

不管是设置first-child还是first-of-type都无法选中第一个item

源代码

 <!-- 规范化服务 -->
      <section class="standard">
        <!-- 标题 -->
        <div class="section-title">
          <h2>规范化服务标准</h2>
        </div>
        <!-- 服务项 -->
        <div
          class="standard-item"
          style="background-image:url(./images/service/组1959@2x.png);"
        >
          <!-- 上面的小图片 -->
          <img
            class="standard-item-icon"
            src="./images/service/11.png"
          >
          <!-- 下面的描述文字 -->
          <p class="standard-item-txt">上门维修服务标准</p>
        </div>
        <div
          class="standard-item"
          style="background-image:url(./images/service/组1959@2x.png);"
        >
          <img
            class="standard-item-icon"
            src="./images/service/12.png"
          >
          <p class="standard-item-txt">收费标准</p>
        </div>
        <div
          class="standard-item"
          style="background-image:url(./images/service/组1959@2x.png);"
        >
          <img
            class="standard-item-icon"
            src="./images/service/13.png"
          >
          <p class="standard-item-txt">工具服务使用标准</p>
        </div>
        <div
          class="standard-item"
          style="background-image:url(./images/service/组1959@2x.png);"
        >
          <img
            class="standard-item-icon"
            src="./images/service/14.png"
          >
          <p class="standard-item-txt">技术培训考核标准</p>
        </div>
        <!-- 注意最后一个标签需要添加 no-margin类 -->
        <div
          class="standard-item no-margin"
          style="background-image:url(./images/service/组1959@2x.png);"
        >
          <img
            class="standard-item-icon"
            src="./images/service/15.png"
          >
          <p class="standard-item-txt">安全作业标准</p>
        </div>
      </section>

/* 规范化服务标准 */
.standard {
  display: flex;
  flex-wrap: wrap;
}
.standard .section-title {
  flex: 0 1 100%;
  width: 100%;
}
.standard-item {
  flex: 0 1;
}
.standard-item:nth-child(1) {
  margin: 0 .2rem;
  color: red !important;
}

问题解决

是需要两个条件同时满足才会选中
- 下标符合
- 元素(这里匹配的是元素而不是类名)符合

问题分析

父元素下面的第一个元素是div所以下标选1的时候一直是选择的它
如果把div换成span的话,nth-of-type(1)/first-of-type就可以选中
但是它的类名又不吻合，所以一直没效果

2. [已解决]父元素的overflow为什么可以清除浮动(190927)

业务背景

在写PC页面时,由于要兼容IE老版本,所以很多新的布局方式没法使用,有些地方要用到浮动来布局.但是写完浮动后,后面的元素就会自动沿着这个元素排列,为了解决这个问题,又要多添加一个标签来清除浮动.感觉操作起来就有点不科学了,毕竟HTML结构应该别和CSS样式扯上关系才对,为了样式修改结构,就像是用一个新的问题去解决另外一个老的问题一样

后来看到在父元素上添加overflow:hidden;可以解决这个问题,那是什么原理呢?

示例代码

jsfiddle.net/ranwawa/wg0…

问题解决

不仅仅是设置地hidden,除visibility之外的值都可以
这样可以把当前元素渲染成单独的一个BFC

问题分析

和浏览器渲染原理有关,每个BFC是单独的渲染模块,里面的元素的样式只会在当前块内有效,不会影响到外部
具体的参考MDN文档传送门

3. [已解决]为什么把img元素设置为块级元素就能清除它与相邻元素的间距(190929)

业务背景

在做图文排版的时候,图片总是会和文字,以及图片之间有间隙.原因就是因为图片和文字之间有空白,空白加上字号就有间隙了.所以一般都会把父元素的字号设置为0.这样就可以清除影响了

但有时候发现,宽度百分百的图片,上下有间隙,通过设置图片为block也可以解决

原因分析

图片默认是行内元素
默认是下边和行框的基线对齐
而行框的基线要比图片的下边高,所以看上去会有空隙
设置父元素字号为0,就把基线拉到底边了
设置为块级元素,图片就不参与行对齐了,直接换行,如果没有margin就会挨着

4. 为什么元素向右浮动后，前面的兄弟元素没有向右靠

示例代码

jsfiddle.net/ranwawa/amt…

5. rem方案解决移动端适配，为什么设置根接点基础大小为1px无效

业务背景

之前解决移动端适配要么是uni-app的upx;要么是通过sass使用vw；要么是采用rem方案动态调整根节点大小。

在使用rem的过程中，无脑照搬别人的解决方案，不依赖于webpack的时候，每次在写的时候都要计算一下px到rem的转换值，感觉有点小麻烦。所以就想把基准值调整到1px，就不用再去计算了。试了一下，居然不起作用

示例代码

(function(){
  var baseWidth = 375;  // 默认屏幕宽度
  var baseFontSize = 1; // 默认根字体大小
  /* 设置根字体大小 */
  var setHtmlFontSize = function () {
      var size= document.documentElement.clientWidth / baseWidth * 1;
      document.documentElement.style.fontSize = size + 'px';
  }

  /* 屏幕尺寸变化时设置根字体大小 */
   window.addEventListener('resize', function(e) {
       var width = document.width
       setHtmlFontSize();
   })
   /* 初始化根字体大小 */
   setHtmlFontSize();
})();

问题解决

还是只能把根字体大小设置成100，在编写CSS的时候，除100就行了。

原因分析

因为Chrome限制了最小字号是12px，所以设置1px是无法生效的，当然在移动端上，不同的浏览器也是有不同的限制，所以肯定也无法生效

6. 绝对定位的父元素宽高固定，子元素高度不固定，如何让子元素在父元素中垂直居中，兼容IE老浏览器的写法

业务背景

在做PC端网站的时候，要实现垂直居中还真有点儿小麻烦，主要是不能用新的CSS特性，单行的用line-height可以解决，多行的还是试了很多方式才试出来。

示例代码

jsfiddle.net/ranwawa/njg… 只罗列了兼容老浏览器的写法，新特性没写

问题解决

通过设置单元格为table-cell
然后固定其高就可以了
- 有点坑的是，table-cell不能设置百分数

更多的可以参考：www.jianshu.com/p/0ee2b49dd…