css问题整理（持续更新中...）

1. css权重、优先级

权重

内联样式
id选择器
class、属性选择器（eg：[title]{ color:blue;}）、伪类(:first-child,:active,:disabled等)
元素选择器、伪元素（::before,::after,::first-letter等）
通配选择器（eg：*{}）

优先级

权重相同，写在后面的覆盖前面的
使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

2. 用css2和css3分别写一下垂直居中和水平居中

css2

水平居中：

div + margin: auto;
span + text-align

垂直居中

使用 position 然后 left/top 和 margin 的方式垂直居中（已知宽高和未知宽高）
使用 position + transform
使用 display: table-cell;

css3

水平垂直居中 flex

3. BFC和IFC介绍及应用

4. opacity:0、visibility:hidden、display:none区别及应用

display:none

DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
事件监听：无法进行 DOM 事件监听；
性能：动态改变此属性时会引起重排，性能较差；
继承：不会被子元素继承，毕竟子类也不会被渲染；

visibility: hidden

DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
事件监听：无法进行 DOM 事件监听；
性能：动态改变此属性时会引起重绘，性能较高；
继承：会被子元素继承，子元素可以通过设置 visibility: visible;来取消隐藏；

opacity: 0

DOM 结构：透明度为 100%，元素隐藏，占据空间；
事件监听：可以进行 DOM 事件监听；
性能：提升为合成层，不会触发重绘，性能较高；
继承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；

5. 两栏布局和三栏布局

6. 页面防抖

Q：一个宽度百分百，高度自适应的图片，在网速慢的情况下加载过程中会出现抖动的问题（未加载图片前容器的高度为0，图片加载完成后下面的内容会被挤下去）
A：如果是图片有固定高度，就不会出现加载抖动。但一般情况下，为了使图片不被拉伸，高度一般设为自适应，那么为了防止加载抖动，我们需要给图片提前占个位，这里使用的是css的padding-bottom百分比进行占位。

例子：css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .outer {
        width: 400px;
        height: 100%;
        background: blue;
        margin: 0 auto;
        display: flex;
        align-items: center;
      }

      .inner {
       /* position: relative;*/
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        background: red;
      }

      .box {
       /* position: absolute;*/
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div class="box">hello</div>
      </div>
    </div>
  </body>
</html>

7. 使网页呈现哀悼模式

在相应的节日里，需要整个页面置灰，早body标签加上filter:grayscale(1)使网页呈现哀悼模式

body{
  filter: grayscale(1);
}

8. 文本选中样式及禁止选中

文本选中

image.png

<p class="content">为了保障您的权益，当您在相关页面上点击确认的时候，例如，您点击“开</p>

.content::selection {
  color: #ffffff; 
  background-color: #ff4c9f;
}

禁止选中

.content::selection {
  user-select: none;
}

9. 解决IOS滚动条卡顿

body,html{   
  -webkit-overflow-scrolling: touch;
}

10. not选择器

列表里面最后一行不需要border-bottom

ul> 
  <li>     
    <span>内容</span>  
  </li>  
  <li>       
    <span>内容</span>   
  </li>  
  <li>       
    <span>内容</span>  
  </li>  
</ul>

li:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}

11. image图片底部有间距

1、给父元素设置font-size: 0
2、给img设置display: block
3、给img设置vertical-align: bottom
4、给父元素设置line-height: 5px;

12.使用flex布局实现智能固定底部

当内容不够一屏时，底部按钮固定在底部，当内容足够多时，底部按钮随着内容往下移动。