CSS编写要注意的问题

css编写注意事项：

1、导航菜单栏li标签里面嵌套a标签进行菜单的跳转，li标签应该跟头部的菜单栏高度一致符合用户使用习惯；写门户网站的时候能使用a标签进行链接的跳转就尽量不要使用事件点击来进行跳转；

2、图片自适应铺满问题：图片资源一般使用两倍图，为了兼容iOS系统，iOS分辨率是安卓的两倍；background-size: 背景图片的尺寸：auto 按比例放缩铺满，no-repeat 不重复渲染背景图；

3、按照设计图来进行还原的时候，width和height的值要减去margin padding 和 border的值，开发时要注意

4、尽量减少使用transform和flex 的方式来进行居中，一方面要写兼容代码，另一方面比较难调试，知道宽高的时候使用position和margin来进行定位居中

5、一个盒子里面有多个子盒子，设置display:inline-block后，子盒子顶部不对齐，在子盒子中设置vertical-align: top 顶部对齐就可以使所有子盒子顶部对齐

6、form表单里有默认的提交事件，在form标签里绑定@submit事件，当填写所有的项时触发提交事件，同时如果在表单中有按钮，按钮的默认类型为submit。因此要禁止表单的默认提交事件，有如下方法：

    将input标签内的按钮类型从type=“submit”改为type=“button” ; 将表单内的提交button显式修改为<button type=“button”>来阻止表单提交，利用preventDefault()方法

7、在设计稿定宽的情况下，最好全局给body设置min-width，这样当页面缩小时不会压缩，而是出现滚动条来进行放缩

8、a标签点击后有虚线的方框，可以使用a:focus{outline:none}来进行去除

9、一般的门户网站的底部都要固定在底部：普遍做法是：

设置底部盒子container 

Width: 100%;  position: absolute, bottom: 0

然后设置 body, html:

html {

height: 100%;

}

body {

min-height: 100%;

position: relative;

}

最后在页面上的内容要设置padding-bottom 要大于footer的高度才不会被footer的内容遮挡