zoukankan      html  css  js  c++  java
  • 使用浮动隐式转换为行内块元素

    情景:块元素和行内元素使用浮动以后,模式会发生什么变化?

    <body>
        <div>块元素</div>
        <span>行内元素</span>
    </body>
     <style>
            div {
                width: 300px;
                height: 300px;
                background: rgb(168, 118, 118);
                float: left;/*设置浮动以后,后面的元素已经在一行显示,并且宽高依然有用,说明已经隐藏转换为行内块*/
            }
            span {
                background: rgb(165, 28, 28);
                float: left;
                width: 300px;
                height: 300px;/*使用浮动以后,给行内元素设置宽高会起作用,并且和span在同一行显示,说明已经隐藏转换为行内块*/
            }
        </style>

    结论:块元素使用浮动,会默认转换成行内块元素,行内元素使用浮动,会默认转换成行内块元素。

    【注意】通过以上的设置,可以实现为行内非替换元素设置宽高及内外边距。但是替换时,还需要注意转换为块级元素只是float副作用,他们本身的作用还会干扰布局效果。
    块级元素的宽度会继承其父元素。但是,只有为行内元素设置display:block;才会有这样的效果,其他转换之后并不会默认带来这个效果。

    补充:有人说行内元素浮动之后会变成块级元素,可以参照文章:行内元素和块级元素使用浮动后的变化

  • 相关阅读:
    scrapy高级操作
    scrapy多url爬取
    scrapy基础使用
    selenuim
    数据解析
    python字典转为对象,用"."方式访问对象属性
    python AES.MODE_ECB(128位) pkcs5padding 加密算法
    maven
    maven在idea中的配置
    idea使用技巧
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8716199.html
Copyright © 2011-2022 走看看