CSS积累

浏览器渲染过程

参考文章

render Tree = Dom Tree + 样式结构体

• Dom Tree

  • 浏览器将html代码解析成1个Dom Tree，根节点就是documnet对象
  • Dom Tree包含所有元素，如：display：none；js动态添加的元素

• 样式结构体

  • 浏览器将所有样式(css代码)解析成样式结构体
  • 浏览器会去掉自身不能识别的样式：IE会去掉-moz开头的样式，而FF会去掉_开头的样式

• render Tree

  • 可以识别样式，每个节点都有自己的style
  • 不包含隐藏的元素(比如display:none的节点，还有head节点)，但包含visibility:hidden隐藏的元素（因为会占据空间）

• 浏览器根据render Tree进行渲染展示

BFC

参考文章
关于CSS-BFC深入理解

什么是BFC

• 块级格式化上下文，是一个独立的渲染区域
• 可以理解为是一个css属性，拥有该属性的元素对内部元素和外部元素会表现出一些特性，

触发条件

• 根元素，即html元素
• float: 不为none
• position: 不为relative
• overflow: hidden / auto
• display: inline-block, table-cell

BFC的作用

• 清除内部浮动
• 上下margin重叠问题
• 自适应两栏布局
• 阻止元素被浮动元素覆盖

BFC布局规则

• 同一BFC中的元素，上下margin会重叠
• BFC不会被浮动的元素覆盖

文档流

• 普通流
• 浮动流
• 定位流

回流、重绘

参考文章

关于回流和重绘

• 回流一定会引起重绘，重绘不一定会引起回流
• 回流的代价高于重绘
• 浏览器使用流式布局模型，通常只需遍历一边Render Tree，计算出节点在页面上的位置和大小，最后绘制到页面上

回流

• Render Tree中部分或者全部的元素的尺寸，结构，属性发生变化时，浏览器会重新渲染。这个过程叫做回流

• 触发回流的操作
  • 页面首次加载时
  • 浏览器窗口改变时
  • 元素尺寸，位置改变时
  • 元素内容，字体大小变化时
  • 触发伪类时，hover
  • 动态的添加或删除DOM时
  • 进行某些js操作时

重绘

• 页面元素的样式改变并不会影响在文档流中的位置，浏览器会将新样式赋予给元素并重新绘制它。这个过程称为重绘

• 触发重绘的操作
  • color
  • background
  • visibility

calc(), table

• calc() css的计算属性，会触发多次回流
• table 的计算较为复杂，比同等元素多花3倍的时间

flex布局

参考文章

1. 实现元素水平垂直居中

• flex布局

  body{
    width: 100%;
    height: 600px; // body要设置高度
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
  }

• position定位 + margin (确定宽高)

  body{
    width: 100%;
    height: 600px;
    border: 1px solid blue;
    position: relative;
  }
  .box{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    border: 1px solid #000;
  }

• position定位 + transform (不确定宽高)
  transform

  body{
    width: 100%;
    height: 600px;
    border: 1px solid blue;
    position: relative;
  }
  .box{
    padding: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); // transform：应用元素的2D，3D转换 translate：改变元素在X，Y轴上的位置
    border: 1px solid #000;
  }

2. 浮动

• 清除浮动的本质，就是使父级元素变成BFC

3. p标签实现文字超出省略效果…

• p标签设置固定宽度，文字超出隐藏…

p{
  width: 200px;
  overflow: hidden;
  white-space: nowrap;  // 文字不换行
  text-overflow: ellipsis;  // 文本溢出包含元素时,
}

• p标签不设置固定宽度，文字超出隐藏…

p{
  max-height:63px; 
  word-break: break-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

4.修改滚动条的样式

::-webkit-input-placeholder {
  color: rgba(0,0,0,0.4);
  font-size: 14px;
}
:-moz-placeholder {
  color: rgba(0,0,0,0.4);
  font-size: 14px;
}

// 修改滚动条样式
.pro-list::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.pro-list::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  background: rgba(51,51,51,0.1);
}
.pro-list::-webkit-scrollbar-track {/*滚动条里面轨道*/
  // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}

5.内容超出可左右滑动

  <div class="box">
    <span></span> * 10
  </div>

.box{
  width: 100%;
  line-height: 40px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-overflow-scrolling: touch;
  text-align: justify;
  background: #fff;
  box-sizing: border-box;
  border: .0625rem solid #000;
}
span{
  display: inline-block;
  width: 50px;
  height: 30px;
  border: 1px solid red;
}

6.pointer-events：none;

参考文章

• 阻止JavaScript点击动作触发的事件
• 阻止用户的点击动作产生任何效果，适用于任何元素
• 阻止CSS里的 hover 和 active 状态的变化触发事件
• 对于非 <svg> 元素，只有属性 auto 和 none 有效

鼠标移入，图片放大

.img-wrap{width: 172px; height: 95px; overflow: hidden;}
.img-css{width: 172px; height: 95px;object-fit: cover;transition: all 0.6s;}
.img-css:hover{transform: scale(1.4);}

<div class="img-wrap">
    <img class="img-css"        src="https://img.cdn.apipost.cn/statics/top/2019_04_15_462309671_thumb.png"/>
</div>

7.input number类型，去掉右侧上下箭头

• 用于控制输入类型，只能为数字和小数点。减少其他校验。

 .vis-pirse::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    line-height: 0px !important;
 }

8.css实现 印象笔记不支持Markdown 该效果

 <small>印象笔记不支持Markdown</small>

small{
    text-decoration: line-through;
    color: black;
    font-size: 12px;
    display: inline-block;
}