您的位置：首页 > Web前端 > HTML

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

2015-02-27 13:00 323 查看
写在最前面：本文适合从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>




终于达成所愿。

好了，水平和垂直2种布局方式搞定了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航