Home > Developer > Web Develop
<DOCTYPEHTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"><HTML> <Head> <title></title> <Metahttp-equiv= "Pragma"content= "No-cache"> <Metahttp-equiv= "Cache-control"content= "No-cache"> <Metahttp-equiv= "Expires"content= "0"> <Metahttp-equiv= "keywords"content= "Keyword1,keyword2,keyword3"> <Metahttp-equiv= "description"content= "This is my page"> <!--<link rel= "stylesheet" type= "Text/css " href= "Styles.css" > - </Head> <stylestyle= "Text/css">Body{font-size:16px; }#left{width:50px;Height:50px;Background-color:Red;float: Left; }#right{width:200px;Height:200px;Background-color:Green;float: Right; }#foot{width:100px;Height:100px;Background-color:Blue; }. Aa:hover{-webkit-transition:border linear. 2s,-webkit-box-shadow linear. 5s;Border-color:Rgba (141,39,142,.75);-webkit-box-shadow:0 0 18px rgba (111,1,32,3); }. AA{Height:100px;width:100px; } </style> <Body> <Divstyle= "border:1px solid red; width:300px;"> <DivID= "Left">Left</Div> <DivID= "Right">Right</Div> <BRClear= "All" /> <!--equivalent to <div style= "Clear:both" ></div> - </Div> <DivID= "Foot">Foot</Div>This is my JSP page.<BR> <inputtype= "text"class= "AA"> </Body></HTML>
1. Center: Let the center element: margin:xxxpx Auto; (center in the div of the jacket)
2. Float: Equivalent to be out of the way, after the element as it does not exist.
3. Floating layout, the elements in the same div, all floating can.
4. Floating is based on the outermost first absolute absolute positioning elements, body seemingly the default absolute positioning.
5. Floating will have an effect on the back, and the float seems to automatically move up to the upper Div, affecting its parent layer. At this point, if you want the elements below to be unaffected,
Still arranged in the previous order, you need to remove the floating of the previous object: that is, to clear the float.
Clear:none/left/right/
<BR clear= "All"/> <!--equivalent to <div style= "Clear:both" ></div>-
6. Floating: First float after moving: first float away from the original position, after the move: the elements behind it will be to its original position, moving up.
7. There is another problem: when the browser window becomes small: floating in the same row, the window becomes smaller, this time will become more than line!!
Workaround: Set a div in the perimeter and define the width of the perimeter div.
Absolute positioning:
1.absolute Absolute Positioning: separates objects from the document stream by setting the left, right, top, bottom four directions relative to the parent object
Absolute positioning.
• When we want to use absolute positioning:
Must be full the parent element must be positioned with the attribute, the general recommendation is relative;
To the child element, plus absolute positioning, while setting top, right (or: left, bottom)
• If no such parent object exists, then the body object is based. (The location will also be empty.) ) (usually the back of the page, locate the
A location in front of the page. ）
2.relative Relative positioning:
Objects are not detached from the document stream and are relative to their position by setting left, right, top, bottom four directions
-bit --note here that it still occupies the previous position
CSS---Floating
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
