H5注意事项

H5注意事项：

常见易错点总结；

1. 在规划样式时，尽量不要重复嵌套ul与li，这样会在后续选择时候出现标签css时会选择其所有子代li.
2. 字体图标在使用时，第一种，直接在要加的位置添加一个类名然后再其类上加after伪元素，进行实现。
   elment::after{content:'\ef8#;' font-family:'iconmoon'}.
3. 在a中添加图片的 一般方式是先设置a为块级元素，设定其大小，在其中设置要想添加到图片为其为背景图片格式，此时不会出现在行内元素中添加了块级元素，实现点击图片完成跳转的功能。
4. 不太规律的布局多使用定位。
5. 搜索框和input默认有边框和选中后的边框样式，在初始化中要将其去掉，其方式为：border:0;outline:none;
6. 随着文字多少变化的盒子不能使用width定义其边框大小，要使其随着文字多少长度实现自己变化的效果。还有一点要注意：由于文字长度变化时，其盒子大小走向要和常规常识一致，一般会见盒子定位以left定位规划，这样文字多了会向右移动。
7. 注意点：文字出现在盒子下边只显示半边是可能是由于继承了父亲的行高导致其高度和自己盒子大小不匹配，所以要修改其行高大小使其居中显示。
8. 下拉菜单布局要按照相关性进行布局，将其写在一个大盒子中。dt 大标题 dd详细内容大块>li列表详细信息。
9. li里面加链接a的话，添加盒子内边距一般添加在链接a上，这样用户体验好。
10. 巧用问题环绕：在盒子后面添加文字后，（其中文字添加span盒子和p或者h标签进行设置，都可以）前边的盒子浮动后（只是添加图片的那个盒子添加浮动），后边的文字会实现文字环绕效果
11. 在盒子中添加很多li的时候掉下来的情况解决方案：由于xiao li的布局方式是div>ul>li,其中div确定整体和盒子的大小，边框等情况，利用增加ul 的宽度来使得li能放在上面，其中ul 未添加边框浮动等他的宽度的怎加不会是的页面的整体布局发生任何变化情况，后续有超出的部分直接使用overflow：hodden,添加在div上面。
12. text-align：center可以将行内元素和行内块元素剧中显示。
13. 不规则小竖线不能使用边框来实现时，可以采用after伪元素进行添加成一个有背景的盒子，然后使用定位将其挤过来。
14. 为了使上传图片高度和宽度一定不让他随着上传图片的大小而改变布局所以就要设置固定的图片大小。设置在img上。
15. 注意点：上面问题行高会影响到下面盒子布局，即上面盒子盒子高度小于其给定的行高时会使得小面盒子高度在空间上被上盒子行高所占用。
16. 鼠标经过显示元素边框：之前将盒子边框设置好，只不过盒子边框的颜色设置为透明，后续鼠标经过则上为需要的颜色，这样设置的好处是为了布局不会随着盒子加上边框而发生作用的变动。
17. 随着输入信息发生变化的提示信息或者图片（例如邮箱格式提示信息），都需要将其结构都搭建好，后续使用类调用改变。
18. 在添加了文字和图片的同时，使用行高会使得文字垂直居中但是图片对此无反应：原因，默认图片和文字基线对齐，所以要是的图片和文字一样，在使用行高时垂直居中，就要设置图片的vertical-align:middle;
19. 考虑到在c3盒子模型中，其盒子边框不会将盒子撑大，所以在文字添加行高时，要除去盒子的边框大小，文字才可以垂直居中。
20. 在图片布局中，一般将精灵图放在盒子中作为背景图片，而上传到大图作为img标签将图片放入其中。

移动端布局；

流式布局；

1. 盒子宽度随动的情况，（例如中间搜索框的实现）利用两边夹击，中间不给定其宽度的方式使其自由变化。
2. 移动端精灵图的缩放以及测量大小，接的不要将自己的缩放操作保存到上传的原图中，其过程详细概述为：1.0 利用background-size将上传的倍图进行为1倍大小. 2.0 然后测量其位置。此处测量方法为：将原来的两倍图进行放大至其实际的1倍进行测量其位置，写到background-position中，这个操作只是为了得到位置，记得不要进行保存操作。3.0 过程结束。
3. flex布局不存在外边距合并。

响应式布局与bootstrap

bootstrap中就是要利用已经定义好的各种类进行书写样式，不需要自己进行实现。

1. 在使用bootstrap库一用类似子图图标功能的组件时，直接在盒子里面添加上相应的类进行布局，其实先原理是在添加了此类的盒子上添加before伪元素进行实现。
2. 在bootstrap中。清楚浮动直接在标签上添加clear fix就行了，这个类在bootstrap中直接定义好了。
3. bootstrap中直接定义好了相关标题字号大小的样式，在其中css排版中的标题一栏中直接引用就好了。
4. 其中字体颜色和字体背景在辅助类中可以找到，直接应用类就行了，没必要进行标签的修改。
5. 还有三角符号都在其中利用类的引入就行了。
6. 在使用bootstrap中根据屏幕大小显示或者隐藏某些元素使用的时在HTML中添加屏幕大小单位相关我类名，而在其样式上有所变化时做法是在 css 中使用媒体查询来进行改变其样式。