• 浮动元素的特点（2）

    （3）标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。（脱标的元素，是没有行、块、行内块这种方法）。

    （4）浮动元素（脱标元素），可以使用盒模型的5大属性。

    1.   <style>
    2.         /* 标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。 */
    3.         .uname{
    4.             float: left;
    5.             width: 300px;
    6.             height: 60px;
    7.             line-height: 60px;
    8.             outline: 1px dashed yellow;
    9.         }
    10.         /* 浮动元素（脱标元素），可以使用盒模型的5大属性。 */
    11.         .aname{
    12.             float: left;
    13.             width: 300px;
    14.             height: 300px;
    15.             border: 3px solid skyblue;
    16.             padding: 20px 30px 40px 10px;
    17.             margin-bottom: 20px;
    18.             margin-right: 20px;
    19.         }
    20.     </style>
    21. </head>
    22. <body>
    23.     <span class="uname">你好</span>
    24.     <span class="uname">你好</span>
    25.     <br><br><br><br><br>
    26.     <a href="" class="aname">小李先生</a>
    27.     <a href="" class="aname">小李先生</a>
    28.     <a href="" class="aname">小李先生</a>
    29. </body>

    效果预览图

    1.     <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .parent{
    7.             width: 600px;
    8.             height: 400px;
    9.             outline: 1px dashed red;
    10.             margin: 20px auto 0;
    11.         }
    12.         .son{
    13.             width: 200px;
    14.             height: 200px;
    15.         }
    16.         .son1{
    17.             background-color: skyblue;
    18.             float: right;
    19.         }
    20.         .son2{
    21.             background-color: pink;
    22.             float: right;
    23.         }
    24.     </style>
    25. </head>
    26. <body>
    27.     <div class="parent">
    28.         <div class="son son1"></div>
    29.         <div class="son son2"></div>
    30.     </div>
    31. </body>

     效果预览图

     

     （5）浮动的元素有“字围”效果

    注意：这个效果是单个元素浮动。

    1.     <style>
    2.         body,div,img,p{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .parent{
    7.             width: 790px;
    8.             margin: 20px auto 0;
    9.             outline: 1px dashed skyblue;
    10.         }
    11.         /* 浮动的元素有“字围”效果 */
    12.         .pic{
    13.             width: 220px;
    14.             float: left;
    15.             margin-right: 10px;
    16.         }
    17.     </style>
    18. </head>
    19. <body>
    20.     <div class="parent">
    21.         <!-- 我们让 包裹图片的这个.pic 盒子浮动 -->
    22.         <div class="pic">
    23.          <img src="./img/1.webp" alt="" width="220">
    24.         </div>
    25.         <div class="content">
    26.             <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
    27.             <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
    28.             <p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>
    29.             <p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>
    30.             <p>夜梦极可怪。见一淡绿百合花，颈弱而花柔，花身略有斑点青渍，倚立门边微微动摇。在不可知的地方好像有极熟悉的声音在招呼：</p>
    31.             <p>“你看看好，应当有一粒星子在花中。仔细看看。”</p>
    32.             <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
    33.             <p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p>
    34.         </div>
    35.     </div>
    36. </body>

    效果预览图

     

  • 相关阅读:
    在Linux部署Docker并上传静态资源（快速教程）
    BUUCTF-PWN-第一页writep(32题)
    NOIP 2007 普及组初赛试题 第21题
    Java：Java中的堆栈和堆内存
    linux精通 4.1
    猫12分类：使用多线程爬取图片的Python程序
    编写一个GStreamer插件
    SpringBoot保姆级教程（六）SpringBoot访问静态资源 & 整合JSP
    Node.Js编码注意事项
    SpringBoot 中使用布隆过滤器 Guava、Redission实现
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/125633856