关于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
邮箱：lixx2048@163.com
公众号：IT技术快餐
更多资料等你来拿！
关于HTML学习重点-绝对布局和相对布局总结相关推荐
- html局对布局和相对布局,关于HTML学习重点-绝对布局和相对布局总结
其实这篇文章早就该写了,很久写了关于HTML布局相关的经验总结,一直在百度云上,只是偶尔查询翻到对应资料,担心日后很难找到,所以最后还是决心以文章的形式记录下来供大家参考查阅,实现这篇文章应有的价值: ...
- 《撸代码 学习 IOC注入技术1 》—— 布局注入 与 控件注入
不诗意的女程序媛不是好厨师~ 转载请注明出处,From李诗雨-https://blog.csdn.net/cjm2484836553/article/details/104539874 [源代码下载地 ...
- flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- java 布局教程_java布局学习（新）
坚持学习java一段时间,最近自己需要做一个小型的系统,所以需要自己将自己的AWT知识巩固一下. 一.4大布局管理器. 1.边界布局BorderLayout 是JFrame和JDialog的默认布局方 ...
- duilib 子窗口位置_Duilib学习笔记《02》— 界面布局
2. 简单空白窗体界面 此处以创建一个简单的空白的灰色背景窗体为例.对应的XML布局文件对应的也就很简单.如下: 1<?xml version="1.0" encoding= ...
- Linux 学习重点内容(第二节)
#Linux 学习重点内容 第一天 常用命令 第二天 系统管理 第三天 网络应用 第四天 LAMP产品级环境搭建 第五天 Apache服务器配置 第六天 ...
- rpn风险等级评价准则_2019一建经济学习重点：技术方案经济效果评价
2019年一级建造师备考正在进行中,你是在看教材还是在刷题呢?今天优路教育小编是来送干货的,教材太厚,知识点太乱,那就来看这里的考点总结吧.接下来小编带大家一起学习<工程经济>第一章工程经 ...
- CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- 安卓学习笔记09：常用布局 - 帧式布局
文章目录 零.学习目标 一.帧式布局概述 1.布局特点 2.继承关系图 3.常用属性 二.案例演示 -- 切换颜色 1.创建安卓应用[SwitchColor] 2.主布局资源文件activity_ma ...
最新文章
- C# 高性能 TCP 服务的多种实现方式
- s:textfield format date
- [NOI2012（bzoj2879）（vijos1726）]美食节 （费用流）
- win2003 server重启故障
- 关于python的闭包与装饰器的实验
- Luogu4897 【模板】最小割树
- 俄勒冈州立大学计算机科学专业,美国俄勒冈州立大学专业介绍
- 实验设计和结果分析经验总结
- linux下安装asio4ks,FL Studio 第一步 初始化 2020-10-01
- ARM嵌入式系统中的体系结构
- Wireshark TS | 丢包？不要轻易下结论续
- 线程 线程的创建与回收
- Java如何判断字符串中包含有全角,半角符号
- 学习HTML+CSS知识点
- 2022年终总结：少年不惧岁月长，彼方尚有荣光在。
- 中国大学MOOC课程《程序设计入门——C语言》 期末考试编程题
- Ubuntu 14.04 LTS 安装配置搜狗拼音输入法
- android6.0官方镜像,安卓x86 6.0 iso下载
- arcgis新建图层信息复制_arcgis如何创建图层要素 专家详解
- 『小项目』打字小游戏