- 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
- 关于水平居中和垂直居中的方法
- 如果要用伪类来清除浮动，样式一定要加display:block, content: " ", 如
&:after {
clear: both;
content: " ";
display: block;
}
/* "display: block; clear: both;"是确保这个空白字符是非浮动的独立区块 */
- flex这个属性的作用是把容器内的剩余宽度按照比例做一个分配，比如如下dom树，如果.title和.img flex:1，代表两个div 50% 50%分配宽度
<li>
<div class="title">
<p class="up">生鲜馆</p>
<p class="down">第二件半价</p>
</div>
<div class="img">
<img src="//img02.fn-mart.com/C/web/layout/kk/20160428/201604281156341461815794_kk-1_org_q75.jpg"/>
</div>
</li>
- 如何去掉div中文字上下的间距，有一种解决办法，就是设置这个div的line-height, 设置成差不多当前字体大小的高度就行了。不知道还有没有其他办法。
关于样式的权重计算规则（经常发现父元素定义的font-size，子元素无法直接继承，因为*默认定义了font-size）
- 第一等：代表内联样式，如: style=””，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为0100
- 第三等：代表类，伪类和属性选择器，如.content，权值为0010
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000
- 继承的样式没有权值。
- 关于如何清除浮动 https://segmentfault.com/a/1190000004237437
- text-overflow只能针对单行文本溢出设置省略号，多行文本溢出设置省略号参考http://www.css88.com/archives/5206
- 有关border-radius的详细原理，这篇文章说的很好 http://blog.csdn.net/xiaoermingn/article/details/53497607
- 若想让容器内的元素通过text-align来设置左右对齐，子元素必须是inline或者inline-block的元素，如果子元素是block，父元素上设置text-align无效
- 如果是inline元素，设置height width margin均无效
- position:absolute和float会隐式的改变display类型，不论之前是什么类型的元素（display:none除外），只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。注意一点的是，position:relative并不能够隐式的改变display的类型(看了京东分类页的header-bar有感)
- 写样式的时候发现比如我在父元素上定义的font-size不能传递给子元素，那可能是因为通配符（*）优先级大于继承而来样式的优先级
样式命名技巧