HTML5网页布局应该注意哪些事项，大牛：这样做才更轻松！

HTML5网页布局应注意什么?下面就跟着一起来看看HTML5网页布局应该注意的三点事项。

HTML5中的CSS3特效样式、Canvas、webgl的介入，不仅加强了网页的视觉效果，同时提高了用户体验。很多小伙伴在学习之初都会学习HTML5和CSS3的内容，还会做一些网页设计，以下就是HTML5学习经验分享。

一阶段我们学习了四个礼拜，主要是学习了HTML、CSS2以及HTML5、CSS3的内容。对于HTML5来说，知识点大多都是属性的学习，只要知道属性如何应用，在自己编写页面的时候就比较轻松。当然前提是知道如何布局，无论是网页端还是移动端，又或者是响应式布局，这些在写页面的时候，只要布局思路清晰，写起来就比较轻松。

 

自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS [炫酷特效，游戏，插件封装，设计模式]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

加Q Q群：956940552（招募中）

在学习的过程中自己大概总结了一下HTML5网页布局应该主要的三点事项：

1、首先要有大局观。可以先将整个页面按照上下分成几个大模块，分好几个模块在HTML文件中写好。不需要写样式，在写的时候只要一个模块一个模块书写，大体布局就不会乱。

2、书写局部布局。每个大模块里又可以分几个小模块，根据页面来思考是左右布局还是上下布局。可能有的模块比较复杂，但是划分模块无非就是上下和左右，一定要层层递进。

3、代码要明确。在书写的过程中最好是将代码写的明确一点，同级的标签对齐显示在页面，有利于自己查看和修改代码，别人看起来也比较清晰明了。

HTML5布局总结

1、网页布局分为：自然布局，浮动布局， 定位布局

2、当一个元素被定义为浮动显示时，即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以，应该有个好的习惯即把浮动元素设置高和宽。如果没有设置，则元素会按照它所包含的内容大小来确定它的大小。

3、当元素浮动后，周边的对象会自动环绕浮动元素周围，形成一种环绕关系。

4、块状元素之间的外边距会有重叠现象，但是浮动元素之间的外边距不会发声重叠现象。

5、浮动元素移动，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此类推。

6、一般定位元素(绝对或是相对元素)都会覆盖在文档流对象之上。但是，select元素的窗口控件还不完全支持z-index

7、在css定位布局中，一般遵循“外部相对定位，内部绝对定位”

8、在body中设置min-width:760px,可以避免布局重叠现象。