Cascading Style Sheets

Since July 8th，2017

• float
  float 元素并不完全脱离文档流，其他元素会围绕在它周围。但其他元素的 background（包括 background-image）会铺在 float 元素下方。

• 创建锚点的两种方式

  • a + name

  <a name="test"></a>
  

  • id

• CSS 选择器

  • 属性选择
    [attribute=value]中要给 value 加双引号

• 解决 inline-block 间距的方法

  • 产生间距的原因是 html 文档中不同标签之间的空，有如下一些结局方法：http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements，通过设置 font-size 来解决比较简单。

• 外边距 margin 重叠

  • 外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（详情参考 http://www.hujuntao.com/web/css/css-margin-overlap.html）

• 隐藏滚动条仍能滚动的方法

  1. 设置要滚动的子元素和父元素的宽度和高度，一般要求两者高度相等，子元素的宽度略大于父元素（多出的部分即为要子元素要隐藏的部分）。例如

.parent {
  height: 100px;
  width: 100px;
}
.child {
  height: 100%;
  width: 100%;
  padding: 0 20px 0 0; /* Or width: calc(100% + 15px) */
}

2. 设置子元素和父元素的overflow
   以子元素需要纵向滚动为例，设置父元素横向滚动条为hidden，而子元素纵向滚动条为atuo。即

.parent {
  overflow-x: hidden;
}
.child {
  overflow-y: auto;
}

• CSS 中的强制换行
  对于超长的英文、数字等字符串（没有空格等）有word-wrap和word-break两种方式来进行强制换行。通过属性设置，前者会另起一行进行尝试，后者则不会，具体区别可以参考http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html