Introduction to CSS3 positioning and floating-CSS Tutorial-php.cn

Introduction to CSS3 positioning and floating

不言

Release： 2018-07-02 10:51:46

Original

1711 people have browsed it

This article mainly introduces the concepts of CSS3 positioning and floating in detail, as well as the example code to explain the use of CSS3 positioning and floating. Interested friends can refer to it

This article is shared with everyone The basic concepts and usage of CSS3 positioning and floating are for your reference. The specific content is as follows

1. Positioning

1. css positioning ：

Change the position of the element on the page

2. css positioning mechanism:

Ordinary flow:

Floating:

Absolute layout:

3. CSS positioning attributes:

position puts the element in a static, relative, absolute, or fixed position
top/left/right/bottom offset of the element up/left/right/bottom
overflow sets the overflow of the element What happens in its area
clip sets the shape of the element display
vertical-align sets the alignment of the element display
z-index sets the stacking order of the element/is used to set the stacking order of the element, the larger the Attributes of the above/

position
static static (default)
relative relative layout (default)
absolute absolute layout (not related to other tags)
fixed Fixed (will not move with the scrolling of the page)

Example code:

<body>   
    <p id="position1"></p>   
    <p id="position2"></p>   
    <script>   
        for (var i=0;i<100;i++){   
            document.write(i+"<br/>")   
        }   
    </script>   
</body>   
#position1{   
    width: 100px;   
    height: 100px;   
    background-color: blue;   
    position: relative;   
    left: 20px;   
    top: 20px;   
    /*用来设置元素的堆叠顺序，越大越在上方*/
    z-index: 2;   
}#position2{   
    width: 100px;   
    height: 100px;   
    background-color: red;   
    position: relative;   
    left: 30px;   
    top: 10px;   
    z-index: 1;   
}

Copy after login

2. Floating

Values available for the float attribute:
left/right/none/inherit: left or right, not floating, inherited from the parent.
* float

1. After floating, break away from the normal flow and arrange it in the floating flow. Any element is displayed as a block element, the width and height can be set, and the content expands the width.
2. When many floating blocks are together, they always find the nearest block with the same floating direction to determine their position. If they are forced to wrap, the height of the nearest element will be used as the basis for the new position. Line

clear attribute: Remove floating attributes (including inherited ones)
The meaning is the same as the corresponding one above

Situation where floating properties need to be cleared:

After the child label is floated, the height of the parent label cannot be expanded, so it needs to be cleared;
If the newly added label is not affected by the previously floating elements, it needs to be cleared;

1 .clear:both; height:0; overflow:hidden;
2.overflow:hidden; Trigger layout is often used to clear inner floats;
3.after pseudo-object: set
.aa:after for the current object {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
Find a way to trigger the layout rendering mechanism of ie6, and solved many bugs by luck. zoom: 1 can be triggered! ! !
inline-block is for internal blocks and external lines;
4. The parent tags float together;
5.position:absolute; clear the floats

display
display: block is displayed as a block element;
display: none, the content disappears and does not take up space;
display: inline is displayed as an inline element, which can solve the double BUG of IE6;
display: inline-block is for internal blocks and external lines.

visibility: none
Hide, but still takes up space and affects the layout

The above is the entire content of this article, I hope it will be useful to everyone Learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of CSS floating float and positioning

Use css3 to set a list without upper and lower edges How to space lines

The above is the detailed content of Introduction to CSS3 positioning and floating. For more information, please follow other related articles on the PHP Chinese website!