一些需要注意的知识

1. 在布局时，可以多使用padding和margin来做，它可以很好的控制居中等，对于布局元素，一般不要设置其高度，而是由子元素来撑开，这样做的好处是更容易控制布局，清晰明了，代码较少。

2. 使文字之间空开，可以采取两种方法：1. 给文字设置white-space:pre；这样在html中保留的任何字符都可以显示。2. 在html中使用shift+空格，切换到圆角符号，然后再空格，这时，我们得到的就是中文下的空格，就可以被保留了。

3.多看看网易新闻和新浪新闻的布局方式，一般最外层的div或其他包裹元素都只是设置margin和padding，padding更多用于上下，margin多用于左右，这样是因为需要使用分隔线会更方便一些,当然如果对于分隔线没有需要，直接全部在包裹元素设置padding更为明了、方便，而设置宽和高往往是在最内部的元素设置，这样就可以将外部元素撑起来了，如果内层和外层都设置宽度和高度，这样的结构可能更难以控制并导致部分冲突。

4.移动端布局时，可以大量采用css3的属性，因为移动端对齐支持的已经很好了。 另外，在移动端，可以发现像网易、腾讯、新浪这样大公司的网站，对于每一个条目，其将a标签扩在div外面，这样的好处是只要点任何一部分，都会进入该条目，并且点的瞬间，是没有active类似的颜色变化的，应当注意，使用-webkit-tap-highlight-color:rgba(255,0,0,0)，但是新浪使用的方法感觉真的很乱，不推荐; 个人认为，搜狐公司这方面做的并不是很好，没有借鉴价值。

5.截取、处理字符串时，有时候使用slice方法也会很简单

6.设置图片的大小时，往往给外层div固定宽高，而img设置为100%，注意：更好的做法时给width设置100%，然后给height设置min-height和max-height，比如min-height为100%，max-height为130%。而网易的做法时设置min-height的高度。但是这样必须严格要求图片的百分比在某一个特定的范围内，否则会出现问题。

7. 类数组对象不是数组，所以不能用数组的方法，比如$("p")这里获取的就是一个类数组对象。

8.  width即为我们所写的width，而device-width为设备的width，媒体查询也可以很清楚地表明这一点，这部分的内容可以总结博客。

9. 主页的问题在于有的元素从html或者body处溢出来了，所以才能左右晃动，这时只需要设置html元素的overflow-x:hidden即可实现，如果设置了body的overflow:hidden，那么这时候其offsetHeight不能使用。

10. flex布局不能用在多行多列的情况下，而只能用在单行或者单列的情况下，多行多列我们可以用inline-block的布局方式。多行多列，直接给最外层div固定的width，这是必须的，这样才能精确控制，然后设置center这样内部的inline元素居中，有img则给img再来一个div包裹，然后让img的widht和height用百分比布局的方式。

11.实在不知道到底优先级的问题，直接!important，效果还是不错的。

12.在分页跳转时，我们可以使用 将两个模块的父元素设置为white-space:nowrap;  然后将子元素的display设置位inlineblock，并且将父元素的宽度设置为子元素的两倍（在子元素相等的情况下），这样我们就可以使用动画的形式来控制margin-left的值。

13. 当自己不懂某一方面的设计时，可以多多参考优秀公司的网站。

14. 有时候 a 标签明明在，但是点击却毫无反应，并且设置的cursor： pointer; 也没有用，这很有可能是你设置它或它的父元素为position: absolute;了，（也许不是这样），本质问题是z-index值太小，导致我们的鼠标够不到，只要设置较高的z-index值即可正常点击。 

15. color属性一般情况下是继承的，但是对于<a>标签中的color属性是不会继承的，如果我们希望a标签中的color属性也能继承，那么我们可以给a标签添加属性 color: inherit; 这样a标签也可以继承父元素的color属性了。