CSS floating float, positioning-CSS Tutorial-php.cn

CSS floating float, positioning

高洛峰

Release： 2017-02-27 09:33:12

Original

1473 people have browsed it

1. Floating float

I. Definition and rules

float defaults to none, corresponding to the standard stream. When float: left;, the element will move closer to the left side of its parent element and break away from the standard flow. At the same time, the width will no longer stretch to fill the parent container, but will be determined based on its own content.

II. Demonstration rules

Preparation code

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title></title>  
    <style>  
        body   
        {   
            margin: 0;   
            padding: 0;   
        }   
  
        #father   
        {   
            background-color: cyan;   
  
            /*父级p 没有定位 造成子p的margin-top传递给父级*/   
            position: absolute;   
        }   
  
            #father *   
            {   
                margin: 10px;   
                padding: 10px;   
                border: 1px dashed red;   
            }   
  
        #son1   
        {   
        }   
  
        #son2   
        {   
        }   
  
        #son3   
        {   
        }   
    </style>  
</head>  
<body>  
    <p id="father">  
        <p id="son1">#son1</p>  
        <p id="son2">#son2</p>  
        <p id="son3">#son3-son3son3son3</p>  
        <p>  
        这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字   
        </p>  
    </p>  
</body>  
</html>

Copy after login

1. Add position:absolute to #father in the middle to eliminate unpositioned parent p The margin-top transfer problem, the relevant content is as follows

Solution to the margin-top transfer problem in nested p

In these two In the browser, there are two nested ps. If the padding value of the parent element of the outer p is 0, then the margin-top or margin-bottom value of the inner p will be "transferred" to the outer p.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
<p style="background-color:#FF0000;width:300px; height:100px">上部层</p>  
  
<p style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->  
     <p style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</p>  
</p>  
  
</body>  
</html>

Copy after login

Cause: The box does not obtain haslayout, causing margin-top to be invalid

Solution:
1. Add: overflow:hidden;# to the parent layer p ##2. Change the margin-top outer margin to padding-top inner margin;
3. The side where the margin overlaps the parent element has padding that is not 0 or a border that has a width that is not 0 and a style that is not none. .
Add p to the parent layer: padding-top: 1px;
4. Let the parent element generate a block formatting context. The following attributes can be implemented
* float: left/right
* position: absolute
* display: inline-block/table-cell (or other table type)
* overflow: hidden/auto
Add parent layer p: position: absolute;

The display effect is

CSS floating float, positioning

When the floats of 2, 1, and 2 are left and right respectively,

CSS floating float, positioning

can be seen that 1 and 2 are out of standard stream, son3 in the standard stream is treated as if they do not exist, so son3 replaces the original position of son1, and the left border of son1, the right border of son2 coincide with the left and right borders of son3

3. When 1,2,3 When all float left

CSS floating float, positioning

, the text surrounds the floated p

4, 1, 2 float left, 3 floats right, when the window width is reduced, 3 will be squeezed down

CSS floating float, positioning

When 3 floats to the left and 2 floats to the right, it will be displayed as

CSS floating float, positioning

when browsing When the width of the browser window is reduced, guess who will be squeezed out, son2?

CSS floating float, positioning

The answer is still son3. The rule is: What is written at the end of the html file will be squeezed out. In the html file, son3 comes after son2, so it is always son3 squeezes down first.

5. Increase the height of son1. When son3 is squeezed down, it will get stuck there

CSS floating float, positioning

6. Delete the text in the box and float all three sub-p's to the left

Displayed as

CSS floating float, positioning

The three child ps in the parent p are all out of the standard stream, and the parent p shrinks into a line. You can use clear to correct it

Add an empty p with margin-padding-border all 0 and clear both to support the parent p

CSS floating float, positioning

III . clear清除浮动
如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static
这个是默认的,即标准流排下来,就是static定位方式.

2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩

<p id="backToTop">   
    回到顶部   
</p>   
#backToTop   
{   
    width: 100px;   
    height: 50px;   
  
  
    background-color: red;   
    color: white;   
    cursor: pointer;   
    border-radius: 25px 0 0 25px;   
    padding-left: 20px;   
  
  
    text-align: center;   
    line-height: 50px;   
  
    position: fixed;   
    bottombottom: 80px;   
    rightright: 0;   
}

Copy after login

显示效果

CSS floating float, positioning

3. relative相对定位

相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

4. absolute绝对定位

根据别的已定位元素进行定位,应用absolute规则的脱离标准流

1）、这个别的元素:
离它最近的已定位的祖先元素或者浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
2）、已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
Trick

只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

三 . display

display取值有inline block none

设置为none，即可将其隐藏，像inline-block等新添加的

以上就是本文的全部内容，希望对大家学习CSS教程有所帮助。

更多CSS floating float, positioning相关文章请关注PHP中文网！