First, let's look at the box model in CSS, such:
We can think of it as a box opened above the reality, and then look down from the top down, the border is equivalent to the thickness of the box, the content is relative to the space of the objects in the box, and fill it, it is equivalent to a bubble filled in the box for shockproof purposes. The boundary is equivalent to setting aside some space for other items around the box. This makes it easy to understand the box model.
Therefore, the width of the entire box model in the page is composed of the Left Border + Left fill + content + right fill + Right Border + right border, the width defined in the CSS style is only the width of the content. If width is not specified, the content area of the parent container is filled by default. If height is not specified, the height is determined by the content contained in the parent container.
Setting rules for margin reference http://blog.csdn.net/kkdelta/article/details/8701617
You can use the following example to understand margin and padding:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">By setting margin to auto, you can control the center of elements in the parent container:
# Div1 {width: 600px; Height: 200px; margin: auto; Background: # ac0 ;}# div2 {width: 400px; Height: 160px; margin: auto; Background: # Eee ;} </style>Use float to control the left and right positions of multiple block elements in the same row. The elements after float are separated from the document stream and do not occupy the original position. However, pay attention that the elements of float must occupy the width of the layer after float.
# Side {Background: #99ff99; Height: 300px; width: 120px; float: Left ;}# main {Background: #99 FFFF; Height: 300px; width: 70%; margin-left: 120px ;} </style>1. Position: relative; if a relative element is located, it first appears at its location. Then, move the element "relative to" its original start point by setting the vertical or horizontal position. (Another point is that elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element will overwrite other boxes)
2. Position: absolute; indicates absolute positioning. The position is calculated based on the browser's upper left corner. Absolute positioning disconnects elements from the document stream, so it does not occupy space. The layout of elements in a normal Document Stream is the same as that when an absolutely positioned element does not exist. (Because the absolute positioning boxes are irrelevant to the Document Stream, they can overwrite other elements on the page and control their hierarchical order through Z-index. The higher the value of Z-index, the more it is displayed on the upper layer .)
3. parent container uses relative positioning. After the child element uses absolute positioning, the position of the element is no longer relative to the upper left corner of the browser, but relative to the upper left corner of the parent window.<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <style> body {padding: 20px ;} A {color: # 00f; text-Decoration: none;} A: hover {color: # f60; position: relative; top: 1px; left: 1px ;} # layout {width: 600px; margin: 0 auto; Background: # Eee; position: relative; }# new {position: absolute; top:-15px; left: 140px ;} </style>
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
