关于HTML CSS的布局的初步理解

写这篇文章前，我看了看HTML的布局。
最直观的感觉是HTML结构清晰，页面展示效果良好。CSS 看起来挺复杂的。
HTML怎么实现的UI效果呢？先看一段代码

<div class="section_05">
   <div class="content">
      <div class="titlebar">
         <h2 class="subtitle">风控严格</h2>
         <small>strict risk management</small>
         <span class="line"></span>
      </div>
      <div class="risk-con">
         <div class="risk-left">
            <h3>五大风控安全保障体系</h3>
            <ul>
               <li>① 严谨的行业选择标准体系</li>
               <li>② 细致的合作机构筛选体系</li>
               。。。
               <li>⑤ 完善的内控稽核体系</li>
            </ul>
         </div>
         <div class="risk-middle"></div>
         <div class="risk-right">
            <h3>多维度多方位风控措施</h3>
            <ul>
               <li>·&nbsp;&nbsp;严格的会员准入标准</li>
               <li>·&nbsp;&nbsp;严格的项目筛选标准</li>
               。。。
               <li>·&nbsp;&nbsp;及时尽责的信息披露</li>
            </ul>
         </div>
      </div>
   </div>
</div>

效果是这样的

为何简单几行代码，可以有这样的效果，太神奇了。

一般来说，布局可分为 相对布局、绝对布局、线性布局。DOM间有 包含、平行关系。
在Android里头，线性布局有LinearLayout，相对布局有RelativeLayout，绝对布局AbsoluteLayout，还有约束布局ConstraintLayout。

所谓，灵活，即想要什么就是什么。

HTML的DOM不存在View类型的区别，DOM间可以进行任意包含。
HTML的快速UI开发，也有此一功。
换言之，你想要达到的效果，为了保证HTML代码的清晰，可能需要编写大量的CSS style去实现。

这是一部分代码。CSS也展示出了层级关系。
看起来有点乱，加点注释，加写换行。
1、2、3 对应 A、B、C这样关系看起来就顺眼了。

而这些style的层级关系对于编码人员就需要特别的注意。

• 不规范或者缺少注释，就容易增加代码阅读的难度。
• 通过float、position等属性，可以轻松的实现三种布局方式。

因为DOM间可以相互包含，HTML+CSS是灵活的，也是具有一定复用性的。乍一看属性挺多，常用的也是那几个，margin、padding、position、background等等。然，本质是一样的。