你不知道的超实用CSS

[hawx1993]

与父元素同宽同高

通过四个方向置0的方式，实现子元素撑开父元素宽高

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0

demo：https://codepen.io/hawx1993/pen/jYLjBg

flex 子元素向右对齐

父元素设置display:flex之后，子元素设置margin-left:auto可以向右对齐

demo: https://codepen.io/hawx1993/pen/aEygEW

BFC的妙用

浮动元素后面跟着一个非浮动的元素，产生了一个覆盖的现象。此时，可以通过触发BFC来解决，使得main元素不和浮动元素重叠

设置之后：

DEMO：https://codepen.io/hawx1993/pen/OzxyGY

类似的触发BFC的还有，解决上下margin重合问题，清除元素内部浮动等

隐藏滚动条

::-webkit-scrollbar{width:0}

// css操作滚动条：

 /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-track {
          background-color: #b46868;
    }
/* 滑块颜色 */
    ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2); 
    } 
/* 滑轨两头的监听按钮颜色 */
    ::-webkit-scrollbar-button {
          background-color: #7c2929;
    } 
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
    ::-webkit-scrollbar-corner {
          background-color: black;
    } 

用max-width来防止图片撑破容器

很多时候图片大小都是未知的，为了防止图片过大而撑开容器，可以通过设置图片的max-width:100%来处理；

img {
  display:inline-block;
  max-width: 100%;  
}

DEMO : https://codepen.io/hawx1993/pen/YYrLeM