Shulou(Shulou.com)06/02 Report--

This article shows you how to understand the dark horse web front-end development, the content is concise and easy to understand, can definitely make your eyes bright, through the detailed introduction of this article, I hope you can get something.

The composition of Dark Horse web front-end development positioning

Positioning layout: positioning mode + edge offset (direction change)

Edge offset: top, bottom, left, right attribut

The essence of positioning: using English to change direction to set the position

Dark Horse web front-end development positioning mode

Static positioning: position:static

Relative positioning: position:relative

Reference: move the position relative to yourself

Relative positioning characteristics: relative to the displacement of the reference object, it belongs to the occupying position, and the box is still in the standard stream.

Relative positioning will not change the display mode of the box.

Absolute positioning: position:absolute

Reference: the reference for absolute positioning is based on the parent by default. If the parent does not have a location, look up one layer at a time. If you cannot find the ancestor box for location, take the browser as a reference.

Note: absolute positioning is completely out of the document stream.

Characteristics of absolute positioning: absolute positioning is completely separated from the standard stream and does not occupy space, and the reference object is dominated by the parent by default. If the parent does not locate one layer at a time, if the ancestor box cannot be found, the location will be based on the browser.

The son and the father.

When we lay out, we usually lay out the top and bottom layouts. If the upper box uses absolute positioning, it will deviate from the document stream, which will affect the layout below, so we use the child absolute parent phase and relative positioning to locate the original position of the parent will not change.

The child is absolute, the parent is relative, and the parent box is located, but it still occupies space, which will not affect the layout of other boxes.

Dark Horse web front-end development fixed positioning: position:fixed

Reference: computer screen (visual window)

Note: fixed positioning is completely separated from the standard flow, and the reference object is the visual window, which has nothing to do with the parent. IE6 does not support fixed positioning, but we do not need to worry about it now, we can use it directly.

Absolute positioning of the box center alignment (very important)

Absolute positioning and fixed positioning boxes cannot be set horizontally using margin:auto;. If we want to center, we need the following settings:

Set the left of the positioning box: 50%; set half of the width of the box's margin-left:- to center the box horizontally.

Set the top of the positioning box: 50%; set half of the height of the box's margin-top:- to center the box vertically.

Z-index stacking order

Z-index is the z-axis display of positioning, and can only be used for relative positioning, absolute positioning and fixed positioning. The larger the value is, the higher the value is, and the value has no unit.

Z-index does not take effect if there is no positioning attribute

Positioning changes the display attribute

Relative positioning does not change the display mode of the box.

Absolute positioning and fixed positioning convert the display mode of the box into the properties of inline block elements.

Note: if the element positioning attribute is given, the default width is supported by the content, so it is recommended to set the width as much as possible when writing the positioning element; the floating box will also change the display mode of the box to have the characteristics of inline block elements.

The above content is how to understand the dark horse web front-end development, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.