Home > Developer > Web Develop
1. Standard document flow: From top to bottom, output document content from left to right
2. Floating
3. Absolute positioning
It is important to note that block-level elements such as DIV p UL, etc.
Row-level elements such as span strong img input, etc.
Block-level elements and row-level elements are box models, the following is the box model
Box modelBox model is the cornerstone of Web page layout, border padding margin
The box 3d Model diagram is easy to understand.
Common layouts automatically center a column layoutThe most important thing in the layout is to hold three skill points: standard document flow, block-level element, margin property
Auto Center code: margin:0 Auto; auto sets both margins automatically based on browser width
Note: You cannot set float and absolute positioning at the same time!
Floating layoutsFloat property: Left right none; The float property means that the element is moved to or from the move until it touches the container.
After setting the Float property, the adjacent element is affected by the element immediately following it
The code for Clear floating is: clear:both;
Or: Width:100%;overflow:hidden;
Horizontal two-column layoutFirst, you can use the floating method to achieve
Second, you can use absolute positioning method, but not used mainly for one column width fixed another column width adaptive, it should be noted that the height of the fixed width column is greater than the height of the adaptive column
Here's a code for a page layout
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title>Untitled Document</title>6 <styletype= "Text/css">7 *{margin:0;padding:0;}8 #wrap{width:970px;margin:0 Auto;}9 #mainbody{position:relative;Margin-top:15px;}Ten #left{float: Left;width:110px; } One #mid{float: Left;width:650px;Border:1px solid #999;Margin-left:13px;} A #right{position:Absolute;Border:1px solid #999;Margin-left:790px;} - </style> - </Head> the - <Body> - <DivID= "Wrap"> - <DivID= "header"><imgsrc= "Http://img.mukewang.com/5369cd6e0001a15b09700088.jpg"width= "970"Height= " the" /></Div> + <DivID= "Mainbody"> - <DivID= "Left"><imgsrc= "Http://img.mukewang.com/5369cd0e00011e3901090487.jpg"width= "109"Height= "487" /></Div> + <DivID= "Mid"><imgsrc= "Http://img.mukewang.com/5369cd3c00013e9e06490439.jpg"width= "649"Height= "439" /></Div> A <DivID= "Right"><P>Welcome to use Kingsoft Software produced by Love Word pa, online query Your English vocabulary, sentence interpretation</P><imgsrc= "Http://img.mukewang.com/5369cd540001d8e101770329.jpg"width= "177"Height= "329" /></Div> at </Div> - </Div> - </Body> - </HTML>
You can see that the left and mid horizontal two columns take a floating method
Right takes an absolute positioning method
Web layout Basics CSS Layout Learning Summary
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
