注意事项:

布局:先用色块把整体布好。
id:唯一的(重复也不会错,同样的css可以加标号)
img:宽度和高度只设置一种,避免被拉伸

已解决:

兼容问题:什么时候该用绝对数值,什么时候用百分比,宽和高各怎么设等等都不太清楚,导致有点混乱,缩放时位置会移动。

解决方法:如果是屏幕宽度的div,先设一个100%的div,再套一个固定宽度的div,固定宽度里面的其他内容宽度可用百分比。

总结起来就是:大的div固定宽度,里面用百分比。

1.用图片做列表前缀可能会和文字不平齐,可以用背景图片的方法,再用背景图片的定位调整位置。

2.背景图片的居中:background-position:center(50%) center(50%)

3.宽度固定内容太挤的话缩放时可能自动换行

4.line-height设置单行垂直居中

5.设置一个只包含浮动元素的div时,如果下面还有其他内容,一定要给div固定高度。

6. 给整个页面设置(左)边距的时候是body{}而不是*{},要设置padding而不是margin

7. padding值不能为负

8.行内标签不能通过text-align;center实现文字居中,因为本身的长度是跟随内容的长度

9.对a和div的标签组合设置:hover:可直接通过a标签控制;如果通过div控制,需将div放到a标签里面

10.如果要图片不随缩放而改变,图片所在的div和图片本身都不要设高。如果只给div设高,图片不会改变,但会遮盖下面内容,如果也给图片设高,高度会缩放。

 posted on 2018-03-14 21:43  Aifeiff  阅读(143)  评论(0编辑  收藏  举报