开心学习
当前位置：Web前端 > > 正文

cssfloat和position功能（理解CSS浮动float、定位position）

时间：2021-10-30 10:05:25类别：Web前端

cssfloat和position功能

理解CSS浮动float、定位position

一 . 浮动float

I . 定义及规则

float默认为none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。

II . 演示规则

准备代码

  • XML/HTML Code复制内容到剪贴板
    1. <html xmlns="http://www.w3.org/1999/xhtml">  
    2. <head>  
    3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    4.     <title></title>  
    5.     <style>  
    6.         body   
    7.         {   
    8.             margin: 0;   
    9.             padding: 0;   
    10.         }   
    11.   
    12.         #father   
    13.         {   
    14.             background-color: cyan;   
    15.   
    16.             /*父级li 没有定位 造成子li的margin-top传递给父级*/   
    17.             position: absolute;   
    18.         }   
    19.   
    20.             #father *   
    21.             {   
    22.                 margin: 10px;   
    23.                 padding: 10px;   
    24.                 border: 1px dashed red;   
    25.             }   
    26.   
    27.         #son1   
    28.         {   
    29.         }   
    30.   
    31.         #son2   
    32.         {   
    33.         }   
    34.   
    35.         #son3   
    36.         {   
    37.         }   
    38.     </style>  
    39. </head>  
    40. <body>  
    41.     <li id="father">  
    42.         <li id="son1">#son1</li>  
    43.         <li id="son2">#son2</li>  
    44.         <li id="son3">#son3-son3son3son3</li>  
    45.         <p>  
    46.         这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字   
    47.         </p>  
    48.     </li>  
    49. </body>  
    50. </html>  

    • 1、中间给#father加上position:absolute,是为了消除未定位父li的margin-top传递问题,相关内容如下

    嵌套li中margin-top转移问题的解决办法

    在这两个浏览器中，有两个嵌套关系的li，如果外层li的父元素padding值为0，那么内层li的margin-top或者margin-bottom的值会“转移”给外层li。

  • XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title>无标题文档</title>  
    6. </head>  
    7.   
    8. <body>  
    9. <li style="background-color:#FF0000;width:300px; height:100px">上部层</li>  
    10.   
    11. <li style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->  
    12.      <li style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</li>  
    13. </li>  
    14.   
    15. </body>  
    16. </html>  
    17.   

    • 原因：盒子没有获得 haslayout  造成 margin-top无效
     
    解决办法：
    1、在父层li加上：overflow:hidden；
    2、把margin-top外边距改成padding-top内边距 ；
    3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
        父层li加： padding-top: 1px;
    4、让父元素生成一个 block formating context，以下属性可以实现
        * float: left/right
        * position: absolute
        * display: inline-block/table-cell(或其他 table 类型)
        * overflow: hidden/auto
       父层li加：position: absolute;

    显示效果为

    cssfloat和position功能（理解CSS浮动float、定位position）

    2、1,2的float分别为left right时,有

    cssfloat和position功能（理解CSS浮动float、定位position）

    可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合

    3、当1,2,3全都float left时

    cssfloat和position功能（理解CSS浮动float、定位position）

    文字围绕着float过的li

    4、1,2左浮动，3右浮动，当窗口宽度减小时，3会被挤下来

    cssfloat和position功能（理解CSS浮动float、定位position）

    当3左浮动，2右浮动的时候，显示为

    cssfloat和position功能（理解CSS浮动float、定位position）

    当浏览器窗口宽度减小时，猜猜谁会被挤下来，son2么？

    cssfloat和position功能（理解CSS浮动float、定位position）

    答案还是son3，规则为 ： 写在html文件中后面的会被挤下来，在html文件中，son3在son2后面，因此总是son3先挤下来。

    5、增加son1高度，son3挤下来时会卡在那里

    cssfloat和position功能（理解CSS浮动float、定位position）

    6、删除盒子中的文字，3个子li全部左浮动
    显示为

    cssfloat和position功能（理解CSS浮动float、定位position）

    父li中的三个子li全部脱离标准流了,父li就缩成一条线了,可以用clear来修正
    加一个margin-padding-border全为0,clear为both的空li,来撑大父li

    cssfloat和position功能（理解CSS浮动float、定位position）

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

    二 . 定位position

    position取值有static absolute relative fixed

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

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

  • CSS Code复制内容到剪贴板
    1. <li id="backToTop">   
    2.     回到顶部   
    3. </li>   
    4. #backToTop   
    5. {   
    6.     width: 100px;   
    7.     height: 50px;   
    8.   
    9.   
    10.     background-color: red;   
    11.     color: white;   
    12.     cursor: pointer;   
    13.     border-radius: 25px 0 0 25px;   
    14.     padding-left: 20px;   
    15.   
    16.   
    17.     text-align: center;   
    18.     line-height: 50px;   
    19.   
    20.     position: fixed;   
    21.     bottombottom: 80px;   
    22.     rightright: 0;   
    23. }   
    24.   

    • 显示效果

    cssfloat和position功能（理解CSS浮动float、定位position）

    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教程有所帮助。

    原文网址：http://www.cnblogs.com/shouce/archive/2016/04/21/5415502.html

    标签：
    float 浮动 Position 定位 css
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习