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属性了。