Page layout:Also known as layout layout, is a Web UI designer to the limited visual elements of the organic arrangement of the composition of the rational thinking personality of the expression, is a personal artistic characteristics of the visual communication way. The message is conveyed with beauty. Web design features (relative to paper media). Features: 1, Web page can be adaptive width 2, the length of the Web page theoretically can be extended infinitely 3: The page: Head, body part, the bottom. A column is also called a split: a list of layout two columns layout three-column layouts and a mixed layout (with the most), and the layout is done by floating and positioning (UI effects are implemented).
a list of layouts:body{margin:0;parding:0;} Clear the default style, the default margins for each browser are different, which avoids some browser differences. Of course, you can also use the * wildcard character to reset all tag elements, such as: *{margin:0;padding:0px;}, but not recommended, because all the label elements will be reset again, affecting performance. Reset whichever you need. Center horizontally, margin:0 Auto
two column layout:Because the width to be adaptive, so to set the left side of the width:xx%, need to arrange, so set Float:left, the other side right also set the width and float (left and OK, then fine) fixed width of the case, Left and right Add a parent Div#main, set the width of this main, and margin 0 auto; If you want to control the width of left and right, you can use PX. Floating (float) and absolute positioning (Position:absolute) can leave elements out of the standard document flow.
three-column layout-Intermediate adaptive:Do not float, with the positioning of the left and right sides respectively (POSITION:ABSOLUTE;LETF/RIGHT:XPX;TOP:XPX;) the middle part using margin value (margin:0 xpx 0 xpx)---left to below, Margin value is greater than the left and right width to see the partition area mixed layout: We can transform a column layout into a mixed layout with "left" and "R". Add a sub div to the middle Mian (left, right). Then add the Styles ". Left and. Right" in the style, respectively! Both left and right are floating "float", and you can make a more complex mix layout under a mixed layout, and you can define right as sub_right and sub_right into a more dense mixed layout.
There are two ways to clear a float: 1.clear:both 2.overflow:hidden
Clear:both; Remove the floating of the elements on both sides of his influence Overflow:hidden; Use the floating element itself to clear the effect on the parent element the page layout is the relationship between blocks: 1. Next to the relationship 2. Nested relationships 3. Overlapping relationships are combined in various combinations.
Web page layout with CSS
