• 浮动元素的特点(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