CSS positioning, css relative positioning

CSS positioning, css relative positioning
Overview

To master CSS technology, the core is to master element positioning. Only in this way can CSS be used to create a professional page layout. The main factors that determine the element position include the box model, position, display, float, and clear.
The so-called box model is the Rectangular Box generated by the browser for each HTML element in the page. These boxes must be arranged on the page according to the visible layout model. The visible page layout is mainly controlled by three attributes: position, display, and float. The position attribute controls the location relationship between elements on the page. The display attribute controls whether the elements are stacked, side by side, or are not displayed on the page at all. The float attribute provides control methods, in order to make the elements into a multi-column layout.

What is a box model

The CSS Box Model specifies how the element content, padding, border, and padding are processed by the element Box. The inmost part of the element box is the actual content. The content is directly surrounded by the inner margin, the inner margin is the border, and the outer margin is the outer margin.

In CSS, width and height indicate the width and height of the content area. Increasing the padding, border, and margin does not affect the size of the content area, however, the total size of the element box is increased. If width and height are not set for the element, width and height are equal to the width and height of the parent node element minus the outer margin, border, and internal margin-here we do not discuss the weird IE mode.

Explanation of Box Model attributes

CSS attributes that determine the size of the box model mainly include width, height, padding, border, and margin, netizens sorted out a detailed CSS Reference Manual, listing the available elements, default values, optional values, inheritance, and compatibility of each CSS attribute. When learning or having doubts, please refer to this manual directly.

• Dimensions
  
  • Width
  • Min-width
  • Max-width
  • Height
  • Min-height
  • Max-height
• Padding
  
  • Padding
  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left
• Border
  
  • Border
  • Border-width
  • Border-style
  • Border-color
  • Border-top
  • Border-top-width
  • Border-top-style
  • Border-top-color
  • Border-right
  • Border-right-width
  • Border-right-style
  • Border-right-color
  • Border-bottom
  • Border-bottom-width
  • Border-bottom-style
  • Border-bottom-color
  • Border-left
  • Border-left-width
  • Border-left-style
  • Border-left-color
  • Some other attributes that do not affect the size of the box model are not described here.
• Margin
  
  • Margin
  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left
• Box-sizing

The box model attribute does not necessarily apply to all elements. Some attributes only apply to a certain type of elements. In addition, the box model sizes of different types of elements are calculated in different ways. Some occupy one row, while some occupy one row horizontally. The following describes the main types of elements:

• Replacement element and non-replacement element
  
  • Replacement element: the browser determines whether to display specific content based on the tag elements and attributes, such as input
  • Non-replacement element: Most HTML elements are non-replaceable elements. They directly tell the browser to display the content.
• Block-level and intra-row Elements
  
  • Block-level elements: the most obvious feature is to occupy a single row and automatically fill the content area of the parent element. This will never allow others to "invade" (of course, they can be changed in other ways)
  • Line Element: omitted

Browser compatibility, IE box model, weird Mode

According to W3C standards, the space occupied by element content is set by the width attribute, and the padding and border values around the content are calculated separately. Once an appropriate DTD is set for the page, most browsers will follow this rule to render the content, but the rendering of IE 5 and 6 is incorrect-if the page contains some HTML file type descriptions, internet Explorer 6 and later versions are not affected by this vulnerability. Unfortunately, IE5.X and 6 use their own non-standard models in the weird mode. The width attribute of these browsers is not the width of the content, but the sum of the width of the content, padding, and border.
For more details, refer to IE box model defects.

Border property value

The CSS Recommendation Standard does not specify the exact width of the text values thin, medium, and thick of border-width. The actual display width may vary with the browser. In addition to the solid value (solid line), the CSS specification is not clearly defined for the border style (border-style. Therefore, the dashed value (dotted line) may have different dash lengths and line spacing in different browsers.

FAQs

• Width and height
  
  • For an img object, only one attribute in width and height is specified, and the other value is scaled according to the image source size and other proportions.
  • If the value of the min-width attribute is greater than the value of the max-width attribute, the max-width will automatically use the value of min-width as its own value, min-heigth and max-height are the same.
  • When the value units of width and height are percentages, refer to the width and height that contain blocks.
• Internal and external margins
  
  • Short rule for internal and external margins
    
    • One Value
    • Two values
    • Three values
    • Four values
  • The inner margin is not a negative value, but the outer margin can be a negative value. In many cases, a negative value must be used.
  • When you use percentages to define the padding and margin, in the horizontal (default) writing mode, you can calculate the value based on the block width. In other cases, refer to the height mode and do not allow negative values. Reference example padding-percentage
  • What is the difference between top/bottom and left/right with auto margin?
    The value of margin-top/margin-bottom is 0. The value of margin-left/margin-right depends on the available space.
  • You can use the margin attribute to set the outer margins on both the left and right sides of a non-replacement line element. To set the outer patches on the top and bottom sides, the object must first be displayed as a block or Inline block.
  • Margin unit selection
    Pixels can be used for the left and right margins of a paragraph, so that the text of the paragraph remains at a fixed distance with the boundary of the containing element, regardless of the size of the text or the size of the text. For the top and bottom margins, the unit of em allows the segment spacing to increase or decrease as the font size changes.
  • Margin folding rules
    
    • Only occurs on block-level elements;
    • The horizontal margin is the sum of the adjacent horizontal margin for horizontally adjacent elements;
    • The wide margin determines the final distance between the two elements;
    • The margin of the floating element is not folded with any margin;
    • The margin of the absolute positioning element is not folded with any margin;
    • If a block-level element with the overflow Attribute Set and the value is not visible, it is not folded with its child element;
    • The root element's margin is not folded with any other margin;
• Box Model size calculation rules
  
  • Non-replace Row Element
    
    • Width = content width + Left and Right padding + border + left and right margins
    • Height = content height + top and bottom margins + border (the top and bottom margins are invalid)
      Content width or height plus padding and margin (the top and bottom of margin are invalid)
  • Replace Row Element with no configured size/intra-row block-level element with no configured size
    
    • Width = content width + Left and Right padding + border + left and right margins
    • Height = content height + top and bottom margins + border + top and bottom margins
  • No block-level elements are set.
    
    • Width = content width of the parent node
    • Height = content height + top and bottom margins + border + top and bottom margins
  • Element with SET SIZE
    
    • Default box model/box-sizing = content-box
      
      • Content width = width
      • Content height = height
      • Width = width + left and right margin + border + Left and Right padding
      • Height = similar width
    • IE weird mode/box-sizing = border-box
      
      • Content width = width property-left and right margins-border-left and right margins
      • Content Height = width of similar content
      • Width = width
      • Height = height
• What will trigger the quirks mode of IE-the weird mode of the Box Model
  

Floating and clearing recognition floating and clearing

Float and clear are the swords used to organize the layout. the blades of this sword are the float and clear attributes. After the floating element is set out of the regular document stream, the element that follows it will be raised up to the level of the floating element when the space permits. If there are two paragraphs behind the floating element, and you just want to associate the first paragraph with the floating element, use the clear attribute to clear it.

Floating and clearing attributes

• Float
• Clear

Floating application scenarios

• Text wrap picture
• Special Effect on the first letter of a paragraph
• Horizontal menu
• Multi-Column Layout
• ...

Use clear

The Application of clearing will be mentioned in the following FAQs.

FAQs

• Floating element nesting
• The floating element is out of the document stream, and its parent element cannot be seen, so it will not be surrounded. This will affect the layout of Adjacent Elements of the parent element, so how can we enclose floating child elements?
  
  • Problem example
  • Solution 1: overlow = hidden
    Overflow = hidden the real purpose is to prevent the inclusion of elements from being extended by large content (beyond the display). In addition, it has another role: it reliably forces a parent element to include its floating child element.
  • Solution 2: Floating parent element at the same time
    When the parent element is set to floating, it will closely enclose the child element without the tube element floating. Because after the floating parent element, the box model size calculation rules have changed (not to automatically expand the parent element), so you need to manually set the width. In addition, to prevent the elements after the parent element from being pushed to the top, the clear
  • Solution 3: add clear elements
    Add a non-floating child element to the parent element, and then clear the child element. Because the parent element will certainly enclose the non-floating child element, the parent element will also enclose the floating child element. Adding sub-elements is a little redundant. We can use the magic clearfix rule to solve this problem. Refer to clearfix. This clearfix rule was first invented by programmer Tony Aslett.
  • Conclusion: The clearfix rules are strongly recommended for three different solutions.
• Box Model of floating Element
  
  • Display: the calculation rules for the display attribute of floating elements are as follows:
    
    • Flex/inline-flex: flex
    • Inline-table/table: table
    • List-item: list-item
    • Others: block
  • Even if the value calculated by display is equal to block, but different from block-level elements, the default width of a floating element does not automatically fill the parent element, but depends on the width of the content, if the percentage width is set, the parent element is referenced.

Positioning recognition and positioning attributes

The core of CSS layout is the position attribute. You can apply this attribute to the element box and reposition it relative to its position in the conventional Document Stream.

Detailed description of positioning attributes

• Postion
• Z-index
• Top
• Right
• Bottom
• Left

FAQs

• Set the top, right, bottom, and left attributes of the static positioning element to determine whether the element positioning will be affected.
  No. For more information, see static-position-with-offset.
• Whether the relative positioning element affects the box model of the parent Element
  Although the relative element is offset relative to the original position (which may be out of the range of the parent element), the space occupied by the original position still exists, therefore, the relative element does not affect the box model of the parent element. When calculating the location of a relative element, you must first consider setting the element box model before relative, and then calculate the offset based on the element box model to obtain the relative location of the element.
• Absolute positioning Context
  The positioning context of the absolute positioning element-the offset reference element, which is not necessarily her parent node element. If the parent node is relatively located or decides to locate or fix the positioning element, the parent element is the positioning context of the absolute positioning element. If not, search for qualified elements from the parent node based on the DOM tree structure. If you know that the body is not found, the body is to locate the context.
• Effect of position on the default width of block-level elements
  
  • Static: Content width of the parent Element
  • Relative: Content width of the parent element. If top and left are set for the relative element, the element is out of the range of the parent element.
  • Absolute: Content width
  • Fixed: Content width
  • Conclusion: position does not affect the display final value of the block-level element, but affects its default width. For details, refer to the example of auto-width.
• Effect of position on element width and height percentage
  
  • Static positioning: reference the parent Element
  • Relative positioning: Reference parent Element
  • Absolute positioning: Refer to positioning Context
  • Fixed positioning: reference window
  • Example: percentage-width
• Top/left/bottom/right percentage calculation rule
  
  • Relative positioning: reference the width or height of the parent element, and it can be a negative value.
  • Absolute positioning: refer to the width or height of the positioning context, and it can be a negative value.
  • Fixed positioning: The width or height of the reference window, which can be a negative value
• Position = relative/absolute/fixed, who has a higher priority when top and bottom or left and right exist?
  If top and left are not equal to auto, top and left have a higher priority. For more information, see relative-priority.

Application Cases

• ...

Display

Display

Overflow Property

• Overflow
• Overflow-x
• Overflow-y

FAQs

• Influence of the scroll bar on the box model
  
  • Default box model/box-sizing = content-box
    
    • Content width = width-vertical scroll bar width
    • Content height = height-horizontal scroll bar width
    • Width = width + left and right margin + border + Left and Right padding
    • Height = height + margin + border + margin
    • Sub-element available width: Content width
    • Sub-element available height: Content height
    • Summary: the scroll bar occupies the width or height of the content, and the scroll bar appears between the inner margin and the border. Therefore, when an element has a scroll bar, the overall size of the element box model does not change, and it does not affect other elements except the box model, but the content size changes, the box model size of its child elements is affected. Reference example scroll-bar-and-box-model
  • IE weird mode/box-sizing = border-box
    
    • Content width = width-left and right margin-border-left and right padding
    • Content Height = width-top/bottom margin-border-top/bottom margin
    • Width = width
    • Height = height
    • Sub-element available width: Content width-scroll bar width
    • Sub-element available height: Content height-scroll bar height
    • Conclusion: the overall size of the box model will not be affected by the scroll bar, and will not affect other elements other than the box model. Note that the display of the scroll bar overlaps with the padding. Although the content size of the box model is not affected by the scroll bar (the scroll bar is regarded as its own child element), it affects the box model of the child element. If the width or height of the child element is auto or percentage, the width or height of the content of the parent element is not directly referenced, the actual reference value must be the content width or height of the parent element minus the width or height of the scroll bar. Reference example: scroll-bar-and-box-model-in-border-box
• ...

Background

TODO...

References

• Learn CSS layout

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.