Flex转型Html学习随笔1——关于Html页面的div布局(上)
写在最前面:本文适合从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种布局方式搞定了。