盒子水平垂直居中

  1. 绝对定位+margin-left(盒子有宽高) ``` .box{
    position: absolute;
    width: 100px; height: 100px; background-color: #bfa; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }
  2. 2. 绝对定位+margin:auto(盒子有宽高)

.box{
position: absolute;
width: 100px; height: 100px; background-color: #bfa; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

  2. 3. 绝对定位+translate(盒子无宽高)

.box{
position: absolute;
background-color: #bfa; top: 50%; left: 50%; transform: translate(-50%,-50%); }

  2. 4. display:flex;

html{ height: 100%; overflow: hidden; display: flex; justify-content: center;//主轴（横轴） align-items: center; }

  2. 5. display:table-cell;

.father{ width: 100px; height: 100px; display: table-cell; vertical-align: middle;//垂直对齐 text-align: center; } .box{ display: inline-block; }

  1. <a name="B2ZkD"></a>
  2. ## 三角形

.box{ width: 0px; height: 0px; border: 20px solid; border-color: transparent transparent blue transparent; }

  1. <a name="heieL"></a>
  2. ## position
  3. <a name="OriNl"></a>
  4. ### absolute 绝对定位
  6. 1. 开启绝对定位后，如果不设置偏移量元素的位置不会发生改变；
  7. 1. 开启绝对定位后，**会从文档流中脱离**；
  8. 1. 绝对定位**会改变元素的性质**，行内变成块，块的宽高被内容撑开；
  9. 1. 绝对定位会使元素提升一个层级；
  10. 1. 绝对定位是相对于其包含块定位的。
  11. <a name="uERyw"></a>
  12. ### relative 相对定位
  14. 1. 开启相对定位后，如果不设置偏移量元素的位置不会发生改变；
  15. 1. 相对定位是参照元素在文档流中的位置进行定位的；
  16. 1. 相对定位会提升元素的层级；
  17. 1. 相对定位**不会使元素脱离文档流**；
  18. 1. 相对定位**不会改变元素的性质**。
  19. <a name="AmtrZ"></a>
  20. ### fixed 固定定位
  21. 也是一种绝对定位，唯一不同的是固定定位永远参照于浏览器的视口定位。<br />固定定位的元素不会随网页的滚动条滚动。
  22. <a name="qkNYl"></a>
  23. ### inherit 从父元素继承position的值
  24. <a name="oCkZp"></a>
  25. ### sticky 粘滞定位
  26. <a name="ZxQCr"></a>
  27. ### static 默认值
  28. <a name="Nao0r"></a>
  29. ## display
  31. - flex
  32. - inline 默认值
  33. - block
  34. - inline-block
  35. - table
  36. - none 元素不在页面中显示
  37. <a name="q3vm6"></a>
  38. ## visibility
  40. - visible 默认值 元素在页面中正常显示
  41. - hidden 元素在页面中隐藏不显示，但依然占据页面的位置
  42. <a name="pZ06w"></a>
  43. ## px em rem 
  45. - px 像素
  46. - 百分比 属性值相对于其父元素属性的百分比
  47. - em 相对于**元素的字体大小**计算
  49.        eg. 10em 16px<br />           width=10*16=160
  51. - rem 相对于**根元素**（html）的字体大小计算
  52. <a name="md4vj"></a>
  53. ## vh vw vm
  55. - vh 相对于视口的高度
  56. - vw 相对于视口的宽度
  57. - vm 相对于视口的宽度或高度中较小的那个
  58. <a name="fSzB0"></a>
  59. ## 垂直外边距的重叠/折叠
  61. - 相邻的垂直方向外边距会发生重叠现象
  62. - 兄弟元素 取绝对值最大(对开发有利)
  63. - 父子元素(会影响页面布局 俗称“坑爹”)
  64. <a name="BDtHT"></a>
  65. ## 高度塌陷
  66. 在浮动布局中，父元素默认是被子元素撑开的。<br />当子元素设置浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。<br />父元素高度丢失后，其下的元素会自动上移，导致页面的布局混乱。
  67. <a name="r5ZqK"></a>
  68. ## BFC（块级格式化环境）
  69. **开启元素的BFC：**
  71. 1. 设置元素的浮动（float:left）
  72. 1. 将元素设置为行内块元素（display:inline-block）
  73. 1. 将元素的overflow设置为一个非visible的值
  75.        -**常为元素设置overflo：hidden开启其BFC**，以使其可以包含浮动元素。<br />**元素开启BFC后的特点：**
  77. 1. 开启BFC的元素不会被浮动元素所覆盖
  78. 1.                          子元素和父元素外边距不会重叠
  79. 1.                          可以包含浮动的元素
  80. <a name="A20dX"></a>
  81. ## 解决高度塌陷和外边距重叠

  1. <a name="deJzt"></a>
  2. ## 网页处理溢出文本内容

white-space:nowrap;//设置网页如何处理空白 nowrap-不换行 overflow:hidden; text-overflow:ellipsis;//省略号 ```

盒子模型

标准盒模型（box-sizing:content-box）

bf87fcb7ab972914ed580e0b5e79d775_1258515-20171023230013051-545804378.png
width和height是内容区域即content的width和height

怪异盒模型（box-sizing:border-box）

dc91d4152447a9d0338fd183499d326e_1258515-20171023230320941-1160589931.png
width已经包含了padding和border值

flex弹性伸缩盒模型

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

页面布局

https://blog.csdn.net/William_bb/article/details/99697369

哪个CSS 属性可能会触发 GPU 硬件加速？

  1. transform
  2. opacity
  3. filter
  4. will-change