zoukankan      html  css  js  c++  java
  • CSS float浮动

    一、定义:

      block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性;

      inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。inline元素设置width、height属性无效

    • 常见的块级元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
    • 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

    脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位

          假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。此外,浮动的框之后的block元素元素会认为这个框不存在,但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素,会为这个框空出位置,然后按顺序排列。

    二、实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
            }
    
            .r1{
                width: 300px;
                height: 100px;
                background-color: #7A77C8;
                float: left;
            }
            .r2{
                width: 200px;
                height: 200px;
                background-color: wheat;
                /*float: left;*/
    
            }
            .r3{
                width: 100px;
                height: 200px;
                background-color: darkgreen;
                float: left;
            }
        </style>
    </head>
    <body>
    
    <div class="r1"></div>
    <div class="r2"></div>
    <div class="r3"></div>
    
    
    
    </body>
    </html>

      

     

  • 相关阅读:
    IT asset register
    微前端
    强缓存和弱缓存(协商缓存)
    比较运算规则 == 、 ===、Object.is 和 ToPrimitive 方法 [[DefaultValue]] (hint)
    事件冒泡、事件捕获、事件委托
    mysql服务没有响应控制功能
    React 项目中有哪些细节可以优化?实际开发中都做过哪些性能优化
    算法的时间复杂度与空间复杂度
    算法:42.接雨水
    解决每次git pull、git push都需要输入账号和密码的问题
  • 原文地址:https://www.cnblogs.com/liuxiaowei/p/7574107.html
Copyright © 2011-2022 走看看