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的时候改颜色。 <