关于HTML学习重点-绝对布局和相对布局总结

        其实这篇文章早就该写了，很久写了关于HTML布局相关的经验总结，一直在百度云上，只是偶尔查询翻到对应资料，担心日后很难找到，所以最后还是决心以文章的形式记录下来供大家参考查阅，实现这篇文章应有的价值；

        之前从事Java几年，对JavaWeb相关技术都有较深的了解，当然自从从事C++工作之后，一直在专研C++相关技术，所以对Java而言，我已经忘得差不多了，虽然如此，如果真的要恢复所有相关知识，也不需要太多时间，废话不多说，从事java前端UI设计师必不可少的  ，包括动态的JSP（ASP、PHP）和静态的HTML（CSS）以及JS和局部刷新，这里我们说的是HTML。

        关于HTML学习，其实就是学习UI设计，现在大多数的UI都是以XML文件进行布局解析，包括手机Andriod（之前学习过一段时间），QT高级UI应用（qss）以及C++皮肤库DUILIB等等，使用XML布局是一个种很合理很自然的方法，因为它确确实实将UI和业务逻辑完全分离了，如果不是如此，可以想象那是多乱！在设计的时候，我们一般都会遵循MVC模式，也就是将模型、视图以及控制器完全分离，让我们更好的专注业务模型开发，MVC应用很广泛，比如最简单的JavaWeb实现：jsp+serverlet+jdbc以及MFC文档视图框架都是典型的实现；

        关于UI（皮肤）或界面开发，从之前学习JavaWeb和DUILIB等开发经验来看，学习的重点不是学会里面各种标签的使用！因为这些使用都有相应的文档，告诉你标签元素的作用以及有哪些属性，当熟悉开发之后发现，我们根本不需要使用记忆这些东西，相反，我们需要的时候打开文档查阅就行！那么，开发的时候我们要掌握或理解的重点是什么？？

个人觉得：各种布局和布局管理器！ 只有我们掌握了布局和布局管理器，就掌握了UI的大局，也就是大致出来什么雏形我们就了然于心，至于某位置放什么东西，那就是具体元素的事情了，怎么使用查一下文档就很清楚了，所以学习UI布局重点不是元素使用，而是布局！！！

       HTML的布局与C++皮肤库种duilib的相对布局和绝对布局完全不一样，写HTML必须了解HTML布局原理，了解原理后自然就知道如何布局你的UI了。

       HTML是流式文档，所以HTML默认布局就是流式布局，这里所说的流式布局怎么理解呢？所谓了流式布局就是：所有元素（包括块级元素和非块级元素）将以流的形式依次从左到右、从上到下排列！

       流式布局是重点，在知道流式布局的原理之后，还要专注某一个元素在流式布局中自我的表现，元素空间分为占用空间和物理空间，占用空间是指元素所占用的空间，物理空间是指元素实际上所占用的空间！也即是说可以占用大空间，但是实际自身大小只能占用多大空间，剩余的就是配相的。

       说到单个元素占用空间，不免有必须知道元素边距的事！因为边距margin会对文档流种其他的元素产生影响！

       元素的布局分为相对布局和绝对布局，如果指定某元素的布局为相对布局，那么该元素在流式布局中的位置还是占用的！也就是不会影响其他元素的位置（就好像是默认的流式布局一样，自动被安排放置，各个元素的位置是相对的，所以认为是相对布局，这样理解我感觉更恰当）；如果指定某元的局部为绝对布局，那么该元素就会脱离文档流，此时其他元素会占用原本它应该占用的位置，并且该元素以最近的具有定位（Position）属性的父亲或祖先元素为参照物！

       所以影响文档的流式布局的因素有某元素自身使用了绝对布局，导致脱离文档流，这就是我们关注的重点！因为它改变了游戏规则，那么这个绝对布局特殊性在哪里？那就是他的位置脱离之后是如何布局到UI中的，如果position被指定（相对布局和绝对布局都可以），那么left、top、right、bottom属性就生效了，其他情况属于无效！而且四个元素只能用相邻的两个元素，即不能使用上又使用下，使用了左又使用右！ 还有就是使用了绝对定位的元素因为已经脱离了文档流，margin-bottom和margin-right两个值不再对文档中的元素产生影响（margin-top和margin-left还是有影响,当然不影响流式布局中的元素，但是影响其他绝对布局的元素，但是margin-right和margin-bottom就对其他元素没任何影响了），绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效！

 

 

       总结：

       相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。 绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。 绝对定位的元素以最近的定位祖先元素为参照物。
 

快来成为我的朋友或合作伙伴，一起交流，一起进步！
QQ群：961179337
微信：lixiang6153
邮箱：[email protected]
公众号：IT技术快餐
更多资料等你来拿！