前端程序员应该了解的项目经验分享

1：HTML

• 尽量使用语义化标签 header aside main footer 等
• 给a标签加上href：“javascript：；”就能禁止跳转
• 块级元素独占一行
• 除了div等那些，基本上都是行内元素
• 行内元素设置宽高边距无效
• img、input属于行内替换元素:height/width/padding/margin均可用。效果等于块元素
• button也是行内元素

2：CSS

• 引入清除样式
• 文字的居中，text-align，line-height
• 盒子的间隔可以考虑外边距margin，也可以考虑内边距padding。尽可能偏向内边距
• div的宽度尽量给百分比或者min-width/max-width
• 如果设置了相同的宽高，发现对不齐，考虑盒子的padding和boder ，设置box-sizing：border-box
• 图片是行内元素 可以直接在img标签上 有<img src="smiley-2.gif" alt="Smiley face" width="42" height="42"> 属性，或者veight设置居中，在img标签属性上写width:100%。能自动铺开
• 想给图片设置外边距，先设置display：block，变成块级元素，或者用div包裹图片
• 涉及到模态框的问题，点击空白处模态框关闭，事件冒泡不能解决的话，可以在子div加个同级的背景div，在背景div上面加关闭事件，背景div样式为宽高100%再加个颜色
• less嵌套语法加伪元素 加上&符号 和：
• less等语法 可以抽离公共部门。规定整个项目的颜色主题，规定一个变量@blue:#fff，在每个页面进行导入，通过@import 导入路劲。
• img是行内元素，虽然可以设置宽高，但是设置display:block减少边距
• 设置flex布局如果是justify设为space-bewteen，加上允许换行，会有样式错误。解决办法

• 嵌套伪元素选择器写法&:nth-child（第几个）
• 选择后代第几个&：nth-of-type（）
• 最后一个子节点不需要样式，&：last-chlid
• hover可以指定下面的具体类名加上样式（比如显示隐藏），一般配合trasform，和trantions
• 如果说hover给排列的item加样式，比如加边框，可能会出现样式重排。避免这种情况，在原始样式上设置对应的属性比如border的颜色为transparent，再hover的时候改颜色。
<