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

This article mainly shows you "what kinds of CSS positioning", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the types of CSS positioning" this article?

I. what is positioning?

Change the position of the element on the page

Second, the classification of positioning 1, ordinary flow positioning 2, floating positioning 3, relative positioning 4, absolute positioning 5, fixed positioning 3, ordinary flow positioning

Default positioning of elements on the page, default document stream, from top to bottom, left to right

1. Each element has its own space on the page

2. Each element is displayed from the upper left corner of the parent element

3. Block-level elements are arranged line by line from top to bottom, and each element has a unique line.

4. Inline elements are multiple elements displayed in a row, arranged one by one from left to right

4. Floating positioning

1. When the element is set to float, the element deviates from the default document stream, and the following elements are prefixed. The current element is arranged on the current line, left or right

Float:left 、 right 、 none

Features:

(1) once the element floats, it deviates from the document stream and does not occupy the page space.

(2) floating elements are docked to the left / right side of the parent element, or the edges of other floating elements

(3) floating is to solve the problem that multiple block-level elements are displayed on one line.

2. Special circumstances caused by floating

A, (1) when the parent element shows no less than all the floating elements, the few that are displayed will wrap, and the rule of the newline display: float first, then align left / right

(2) the floating element occupies a place, and the floating element will occupy the position in the direction according to the floating direction, and will not be occupied by other later floating elements.

B. Once the element floats, if the width is not defined, the width will be based on the content.

C. Once the element floats, it becomes a block-level element, and the width and height can be set, and the upper and lower margins can be set.

D, text, inline elements, inline block elements are not pressed below by floating elements. Instead, it skillfully avoids all floating elements and displays the floating elements around them.

E. Clear floating: once the element floats, it will have a certain impact on the subsequent elements (the subsequent elements will be prefixed). If the subsequent elements do not want to go forward, set clear to the subsequent elements to clear the impact of the previous floating elements.

Clear:left/right/both

F, height collapse, if the height of the block-level element is not set, the height is based on the content of the internal element, but if the internal element is all floating elements, the floating element does not occupy the page space, and the height of the parent element is gone.

Solution: 1, directly set the height of the parent element, disadvantages: do not know that the parent element height 2, the parent element is also floating, disadvantages: floating will affect the subsequent elements 3, overflow:hidden, disadvantages: when the element really needs to display overflow content, it will not be displayed 4. Append an empty block-level element to the parent element, and set clear:both3, display

1. Display mode

Display

The display of elements on the page (block level, inline block)

Value:

(1) none: hide, do not show elements, do not occupy positions

(2) block: let elements behave in the same way as block-level elements. Features: exclusive row, width and height can be set, vertical margin

(3) inline: make elements the same as inline elements. Features: multiple elements share a common line, and width, height and vertical margin cannot be set.

(4) inline-block: let elements behave in the same way as inline blocks. Features: multiple elements are displayed in a row, but width, height and vertical margin can be set.

(5) table: let elements behave in the same way as table. Features: dimensions are subject to content, each element has a unique line, and dimensions are allowed to be modified.

2. Display effect

Visibility

Take a value

Visible: visible by default hidden: hidden

The difference between display:none and visibility:hidden: display hides, breaks away from the document flow, does not occupy page space, and visibility does not break away from the document flow and occupy page space.

3. Transparency

Opacity

Value: 0: 1, the smaller, the more transparent.

The difference between opacity and rgba: opacity acts on an element. As long as the colors associated with the element are transparent, it can be applied to child elements. Rgba only changes the transparency of the current element and does not affect other elements.

4. Vertical alignment

Vertical-align

Value: top/middle/bottom

Where to use:

(1) in the table tag, control the vertical alignment of the text. Value: top/middle/bottom (2) img tag, control the vertical alignment of the picture with the front and back text. Value: top/middle/bottom/baseline

5. Cursor

Cursor:

Value:

(1) default: arrow (2) pointer: hand (3) text:I (4) crosshair: cross (5) wait: hourglass or circle (6) help: question mark five, location

1. Attributes of positioning

Position:

Value:

(1) static: default, static, default document stream (2) relative: relative positioning (3) absolute: absolute positioning (4) fixed: fixed location specially established learning Q-q-u-n ⑦⑧④-⑦⑧③-zero ①② sharing learning methods and small details, constantly updating the latest tutorials and learning skills (from zero foundation to front-end project practical tutorials, learning tools Full stack development learning route and planning)

The position of the element is set to any value in relative/absolute/fixed, and the element is called a positioned element

Offset attribute

Top/bottom/right/left

Moving left:100px to 100px

2. Relative positioning

The element is offset by a certain distance from the original position, it does not deviate from the default document flow, and the position on the page will not be filled by other elements.

Syntax: position:relative; must be used with the offset attribute

Usage: ancestral elements as absolute positioning

(1) position fine-tuning

3. Absolute positioning

The absolutely positioned element will deviate from the default document flow, and the later element will be padded forward, and the absolutely positioned element will be positioned relative to the nearest positioned ancestor element. If all ancestral elements are not already positioned, the positioning will be realized relative to body.

Attribute: position:absolute; is used with offset attribute

Usage: when there is a cascading effect

4. Fixed positioning

Fix the element in a certain position on the page, the element will not change with the scroll bar, but will always be fixed in the area

Syntax:

Position:fixes; is used with offset attribute

Note:

(1) fixed positioning deviates from the document stream and does not take up page space. (2) fixed positioning elements become block-level elements. (3) offset from body implementation position.

Stacking order

Elements become positioned elements, there may be stacking, want to change the stacking order

Z-index

Value: for unitless numbers, the larger the number is, the higher the element is displayed. The z-index between parent and child elements is invalid. The child element is always on top of the parent element. Only positioned elements can use z-index.

These are all the contents of this article entitled "what are the categories of CSS positioning". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.