Write in front: This article is suitable for viewing from a friend who transforms from Flex programmer to a web programmer
The page layouts in Flex4 are fairly straightforward, such as horizontally positioned hgroup (Hbox in Flex3), vertically positioned vgroup (Flex3 in VBox), and absolutely positioned group (canvas in Flex3).
But when I transition to the Web programmer, with html+css layout page confused, what Div, what float, what position= "relative" is a what gui! As the blogger has just changed from flex to have a resistance, impatient not willing to study hard, so the bootstrap in the grid control to deal with it (don't say this grid is quite useful), but some of the layout requirements are relatively high place to modify the original CSS grid is troublesome, Later Bo Master found or simply use the original DIV+CSS layout to the convenience. With the project in-depth bloggers also gradually fell in love with the Web development today on the patience to write a few demo to enhance memory it!
Preparatory work:
A clean index.html, used for color-resolved CSS2
<HTML> <Head> <title>Hello Html</title> </Head> <style>. Redrect{Border:1px solid #ff0000; }. Bluerect{Border:1px solid #0000ff; } </style> <Body> </Body></HTML>
Let's take a look at Div, how the goods work.
1: Nothing is set, div default state is as follows
< Body > < class= "Redrect"></div></ Body>
Flex transforms HTML learning essays about the layout of HTML pages