用边框实现三角形、复选框样式、怪异盒子

1.实现三角形
     1.实现一个宽高为0的盒子
     2.给边框设置成有粗度的透明色    透明transparent
         border:*px    solid   transparent
     3.给想要的方向的边框设置成对应的颜色

2.实现好看的复选框
     1.实现框和勾勾   【勾勾由设置相邻两边边框旋转得到】
     2.设置定位和浮动-让框和文字横着排列，让勾显示在框上面
     3.让勾勾隐藏
     4.选中对应的选项的时候里面的勾勾显示出来。

     e+f  选中后面相邻的兄弟f
     e~f  选中e后面所有的兄弟f
     e:checked   被选中的选项e

3.盒子模型标注模式和怪异模式
     概念:他们都是盒子模型，只是是不同的模式而已。
     设置概念:
          box-sizing:border-box (怪异模式)丨 centent-box (标准模式) ;
     区别:元素实际占用的宽高不一致
     标准模式:占用的宽度 = width + margin + padding + border;
     怪异模式:占用的宽度 = width + margin;

calc  （50% - 100px）  用于单位之间  必须有空格

4.粘性定位:
      position:sticky;

5.pointer-events: none;   (元素不对指针事件做出反应)