Home > Developer > Web Develop
1: <body>
2: <div>
3: <p>this is a pargraph. </P>
4: </div>
5: </body>
The containing block of the P element is the DIV element, because as a block-level element, a table cell or inline element, which is the nearest ancestor element, similar to the Div's containing block is the body. Therefore, the layout of P depends on the layout of the Div, and the layout of the Div relies on the body layout.
Block-level elements automatically restart a row.
2. Block-level elementsNormal flow layout
Generally, the width of an element is defined as from the left inner boundary to the right inner boundary, and the height is the distance from the upper inner boundary to the bottom inner boundary.
The layout of the document can be determined by combining different widths, heights, padding, and margins.
Horizontal layout
Simple rule, the sum of the horizontal part of a block-level element box in a normal flow is equal to the width of the parent element. Suppose that there are two paragraphs in a Div, the margins of the two paragraphs are set to 1 em, the width of the paragraph content is added with its left, right padding, and the border or margin is exactly the width of the div content.
7 large attributes, Margin-left, Border-left, Padding-left, Width, padding-right, border-right, Margin-right
The value of these 7 attributes must be the width value of the parent block element. (where Margin-left, margin-right, width can be set to Auto) is set to auto, which automatically matches the width of the parent block according to the above rules, such as 7 properties and must be 400 pixels, no padding or margins (default = 0) and right margin and width is set to 100px and the left margin is auto, then the width of the left margin is 200px. You can use auto to compensate for the difference between the actual value and the required synthesis. Note: If the 3 can be set to auto, is not set to auto, and the width is not enough to add the width of the parent block area, the default will be set Margin-right to Auto to meet the sum of the parent block equal requirements.
If the two margins are set to auto, they will be equal, so the element is centered in its parent element.
If these 3 properties are set to auto, the margin will be 0 and the width as long as possible.
Percentages can be used, but the width of the border cannot be a percentage.
Vertical layout
7 large attributes, Margin-top, Border-top, padding-top, height, padding-bottom, Border-bottom, Margin-bottom, again, the sum of the values of these 7 attributes is the parent element The height value.
Among them, margin-top, height, margin-bottom can also be set to auto. (If Margin-top, Margin-bottom is set to auto, then they are automatically set to 0).
3. Floating and positioning (confirm basic layout)1) Floating
When an element floats, the other content "wraps around" the element, and the floating element is set to a width.
Float (left, right, none), none is generally used inside the document, used to override the style sheet, and rarely use none.
Floating elements automatically generate a block-level box.
Floating element rule
A floating element cannot exceed the left and right boundaries of the block that contains it. (1, 2 or so border restricted)
Floating element must be after the floating element (cannot be overwritten) if a floating element is present (2 left Limited)
If the floating elements are too wide together, they will automatically go down. (Width Limited)
The vertical direction of the head cannot exceed the block area, nor can it exceed the floating element above it. (Upper Boundary Limited)
After the first floating element, the second one is below it, because they, 3rd, are on its right. (2 Upper Limited)
The top of a floating element cannot be higher than the top of any previously floating element or block level element (top constrained)
Floating elements can not be overwritten between the left and right boundaries, as follows: No overlay between the elements (the element is limited)
Floating elements are placed as high as possible
Floating elements are left and right as far as possible
Clear, which prevents floating elements from being specified on either side of the clear element
2) Positioning
With positioning, you can define exactly where the element box should appear relative to its normal position, or relative to the parent element, another element, or even a browser window.
position:static | Relative | Absolute | Fixed
Static: Element box is generated normally
Relative: Element box offsets a distance
Absolute: The element box is completely removed from the document flow and is set relative to its containing block. The containing block may be another element in the document or an initial containing block.
Fixed: Similar to absolute, but its containing block is the window itself.
Include Block:
The root element (HTML or body), the initial containing block is a window-sized rectangle.
Non-root elements:
-Non-root element, if its position is relative or static, the containing block is composed of the most recent block-level box, table cell, or inline block.
-Non-root element, if its position is absolute, contains a block for the nearest position value is not a static ancestor element
It is important to note that an element can be positioned outside its containing block.
CSS Layout Basics
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
