• <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>

                  文章导航

                  CSS块级/内联元素

                  2018-8-4 09:26| 作者: admin| 查看: 813| 评论: 0|来自: 蚂蚁部落

                  一.块级元素:

                  块级元素通常用作容器,比如当前最为常见的div元素等,可以容纳如下元素:

                  (1).块级元素。

                  (2).块级内联元素。

                  (3).内联元素。

                  默认状态下,块级元素总是占据一整行,除非使用CSS控制。

                  使用display:inline可以把块级元素转换成内联元素。

                  块级元素的特点:

                  (1).块级元素既可以容纳内联元素?#37096;?#20197;容纳块级元素。

                  (2).块级元素在默认的情况下是独占一行的。

                  (3).块级元素大小是可以控制?#27169;琧ss可以设定高度和宽度。

                  (4).宽度默认值就是它所在容器宽度的100%。

                  实例代码:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  .ant-1{
                    height:200px;
                    background-color:green;
                  }
                  .ant-2{
                    width:200px;
                    height:200px;
                    background-color:red;
                  }
                  </style>
                  </head>
                  <body>
                    <div class="ant-1"></div>
                    <div class="ant-2"></div>
                  </body>
                  </html>

                  代码中有两个div,分别占据一行,并且设定了它们的长度和宽度。

                  二.内联元素:

                  内联元素名称有多种,比如内嵌元素、行内元素等等,无需纠结。

                  任何不是块级元素的可见元素都是内联元素。

                  内联元素只能够容纳文本或者内联元素。

                  内联元素的尺寸是不可以控制?#27169;?#20063;就是说CSS的height和width是不起作用的。

                  使用display:block语句可以把内联元素转换成块元素;内联元素浮动起来自动转换成块级元素。

                  内联元素的特点:

                  (1).内联元素只能容纳文本或者内联元素。

                  (2).内联元素默认情况下可以和其他内联元素元素在一行上。

                  (3).内联元素默认情况下的大小是不可以控制的。

                  (4).内联元素可以产生代码换行和空格。

                  实例代码:

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

                  代码中两个内联元素是在一行排列?#27169;?#20294;是无法给它们设定高度和宽度。

                  三.内联块级元素:

                  默认状态下,元素要么内联元素,要么块级元素。

                  使用display:inline-block可以将一个元素转换成内联块级元素。

                  顾名思义,就是使元素兼具内联元素和块级元素的特性。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  ul {
                    background: #ccc;
                    padding: 0;
                    margin: 0;
                    list-style: none;
                  }
                  li {
                    display: inline-block;
                    width: 80px;
                    height: 20px;
                    margin: 10px;
                    padding: 10px;
                    text-align: center;
                    background: #cfc;
                  }
                  </style>
                  </head>
                  <body>
                  <ul>
                    <li>蚂蚁部落一</li>
                    <li>蚂蚁部落二</li>
                    <li>蚂蚁部落三</li>
                    <li>蚂蚁部落四</li>
                  </ul>
                  </body>
                  </html>

                  li元素应用display:inline-block,它们就可以在同一行显示,也能够设置尺寸和内外边距。

                  1

                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  刚表态过的朋友 (1 人)

                  最新评论

                  返回顶部
                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历史记录查询 爱乐透篮彩让分胜负 青海淘宝快3 南国彩票论坛808网 爱彩网2018app下载 北京时时彩平台代理 体彩14场胜平负12114 天津11选5投注技巧 特单双中特