• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  块级元素与内联元素相互转换

                  2018-11-15 15:09| 作者: admin| 查看: 679| 评论: 0|来自: 蚂蚁部落

                  块级元素与内联元素之间是可以相互进行,下面通过代码实例进行一下介绍。

                  关于内联元素与块级元素基本概念可以参阅CSS块级/内联元素一章节。

                  一.块级元素与内联元素:

                  首先总结一下块级元素与内联元素各自特点。

                  块级元素:

                  (1).默认情况下,块级元素比较霸气,独占一行。

                  (2).它可以容纳块级元素或者内联元素。

                  (3).块级元素尺寸和内外边距都是可控的。

                  (4).块级元素的宽度默认会铺满它的直接父级元素。

                  内联元素:

                  (1).内联元素比较怂,可以与其他内联元素共同占据一行。

                  (2).内联元素心胸也不行,只能容纳它同类内联元素。

                  (3).某些内联元素的尺寸和上下内外边距是不可控的。

                  (4).内联元素的尺寸?#21892;?#20869;容决定。

                  ?#34892;?#20869;联元素的尺寸和上下内外边距是可控的。

                  具体参阅HTML 替换元素与非替换元素一章节。

                  块级内联元素:

                  同时兼具内联元素与块级元素的特点。

                  (1).尺寸与内外边距都是可控的。

                  (2).可以出现在同一行。

                  二.内联元素转换为块级元素:

                  (1).通过display:block转换:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  span{
                    background-color:#ccc;
                    width:150px;
                    height:100px;
                    display:block;
                  }
                  </style>
                  </head>
                  <body>
                  <span></span>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/15/151000awyxrtdb7ikyya70.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  通过display:block将span元素转换为块级元素。

                  span元素的尺寸就是可控?#27169;?#21516;样的道理,内外边距也是可控的。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  span{
                    background-color:#ccc;
                    width:150px;
                    height:100px;
                    float:left;;
                  }
                  </style>
                  </head>
                  <body>
                  <span></span>
                  </body>
                  </html>

                  将内联元素浮动起来?#37096;?#20197;实现相同的效果。

                  但是更像是将元素转换为内联块级元素,因为转换后的元素宽度?#25442;?#33258;动铺满父元素。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  span{
                    background-color:#ccc;
                    width:150px;
                    height:100px;
                    position:absolute;
                  }
                  </style>
                  </head>
                  <body>
                  <span></span>
                  </body>
                  </html>

                  通过position将元素设置为定位,那么?#37096;?#20197;将其转换为块级元素。

                  与浮动方式相同,元素的尺寸无法自动铺满父元素。

                  需要注意的是,相对定位不能实现转换功能。

                  最后总结:

                  (1).只有dispaly:block转换成块级元素,才具有自动铺满父元素的特点。

                  (2).浮动和定位方式转变会改变文档流,所以使用的时候需要特别注意。

                  三.块级元素转换为内联元素:

                  通过display:inline可以将块级元素转换为内联元素。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div{
                    background-color:#ccc;
                    display:inline;
                  }
                  </style>
                  </head>
                  <body>
                  <div>蚂蚁部落</div>
                  <div>蚂蚁部落</div>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/15/151101mvyp1y6pzyrrzj96.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  可以看到div也低下了高傲的头,可以与其他?#20540;?#24179;起?#38454;?#20102;。

                  两个元素之间名模奇妙出现了空格,具体参阅删除内联元素之间的空隙一章节。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            福利彩票销售许可证书 湖北快3开奖20190817075 3g时时彩开奖结果 辽宁11选5怎么中奖 体彩p5开奖结果256期 彩票大奖图 pt电子游戏公司 南粤风釆36选7今天开奖结果 乌干达对埃及现场直播 江苏快3倍投计算器 广西快乐10分破解如何计算公式 广西快三开奖结果控 北京赛车10pk 淘宝广西快3遗漏走走势一定牛网 特码风云