Flex转型Html学习随笔1——关于Html页面的div布局（上）-CSDN博客

写在最前面：本文适合从Flex程序员转型为Web程序员的朋友观看

Flex4中的页面布局相当直观，如水平定位的HGroup（Flex3中的HBox），垂直定位的VGroup（Flex3中的VBox），绝对定位的Group（Flex3中的Canvas）。

但是当我转型到Web程序员，用Html+CSS布局页面的时候就搞得一头雾水，什么div，什么float，什么position="relative"又是个什么gui！由于博主刚从Flex转型过来怀有抵触情绪，心浮气躁不愿意好好研究，所以都是拿Bootstrap里的Grid控件来应付一下（别说这个Grid还蛮好用的），不过有些对布局要求比较高的地方要修改Grid的原始CSS比较麻烦，后来博主在摸索中发现原生的div+css布局起来还是比较简单的。随着项目的深入博主也渐渐爱上了Web开发今天就耐下性子写了几个demo来加强记忆吧！

准备工作：

干净index.html一份，用于颜色分辨的css2个

<html>
 <head>
  <title>Hello Html</title>
 </head>
 <style>
    .redRect{
        border: 1px solid #ff0000;
    }
    .blueRect{
        border: 1px solid #0000ff;
    }
 </style>
 <body>
    
 </body>
</html>

先来看看div这货是怎么工作的

什么都不设置，div默认状态如下

<body>
    <div class="redRect"></div>
 </body>

没错我们看到Div不设置width的话，默认是100%，而Height则是自适应Div中的内容

例如：

<body>
    <div class="redRect">
        <p>I am sub component</p>
        <button>I am sub component</button>
    </div>
 </body>

此外我们还可以发现，这些子元素的排列方式是垂直分布的，换成div看看会更加直观

<body>
    <div class="redRect">
        <div class="blueRect" style="width:50px">sub div 0</div>
        <div class="blueRect" style="width:50px">sub div 1</div>
        <div class="blueRect" style="width:50px">sub div 2</div>
    </div>
 </body>

！！！我靠原来div在一定意义上可以认为是个VGroup（VBox），馊滴死內！

那么HGroup（HBox）难道就是在父div中加个float="left"嘛？我们来试一试

<body>
    <div class="redRect" style="float:left">
        <div class="blueRect" style="width:50px">sub div 0</div>
        <div class="blueRect" style="width:50px">sub div 1</div>
        <div class="blueRect" style="width:50px">sub div 2</div>
    </div>
 </body>

咦！显然不是我们想要的结果。原来要让子元素水平布局，float="left"必须挨个设置在每个子元素的style中，真特么的奇葩

试试看！

<body>
    <div class="redRect">
        <div class="blueRect" style="float:left;width:50px">sub div 0</div>
        <div class="blueRect" style="float:left;width:50px">sub div 1</div>
        <div class="blueRect" style="float:left;width:50px">sub div 2</div>
    </div>
 </body>

好家伙，虽然是水平布局了，但是从父容器里溢出了！这个可如何是好，博主我也不知道怎么解决，去w3school查询了一下，原来有如下解决办法

请戳

博主感觉还是用空的子元素+clear：both的方法比较靠谱！不得不吐槽一下这特么太不人性化了。

<body>
    <div class="redRect">
        <div class="blueRect" style="float:left;width:50px">sub div 0</div>
        <div class="blueRect" style="float:left;width:50px">sub div 1</div>
        <div class="blueRect" style="float:left;width:50px">sub div 2</div>
        <div style="clear:both"/>
    </div>
 </body>