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

                  广告

                  transform改变定位元素的包含块

                  2018-11-29 00:23| 作者: admin| 查看: 741| 评论: 0|来自: 蚂蚁部落

                  css3之前绝对定位元素的包含块规则可以参阅以下两篇文章:

                  (1).CSS absolute绝对定位一章节。

                  (2).CSS fixed固定定位一章节。

                  特别说明:一个元素会根据矩形盒计算自身定位和大小,此矩形盒就是包含块。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  #relative {
                    position: relative;
                    width: 100px;
                    height: 100px;
                    background: green;
                  }
                  #absolute {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 0;
                    right: 0;
                    background: blue;
                  }
                  #transform {
                    background: red;
                    width: 50px;
                    height: 50px;
                  }
                  </style>
                  </head>
                  <body>
                    <div id="relative">
                      <div id="transform">
                        <div id="absolute"></div>
                      </div>
                    </div>
                  </body>
                  </html>

                  上面的代码中,绝对定位的div元素是以外层相对定位的元素(准确的说是产生的包含块)为参考对象的。

                  再来看一段代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  #relative {
                    position: relative;
                    width: 100px;
                    height: 100px;
                    background: green;
                  }
                  #absolute {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 0;
                    right: 0;
                    background: blue;
                  }
                  #transform {
                    background: red;
                    width: 50px;
                    height: 50px;
                  }
                  #transform {
                    transform: scale(1);
                  }
                  </style>
                  </head>
                  <body>
                    <div id="relative">
                      <div id="transform">
                        <div id="absolute"></div>
                      </div>
                    </div>
                  </body>
                  </html>

                  上面的代码为中间的div元素应用如下代码:

                  [CSS] 纯文本查看 复制代码
                  transform: scale(1);

                  所以内部绝对定位的div元素就会以中间的div元素为参考对象;对position:fixed定位也是同样的道理。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                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>

                                                            山东十一运夺金走势图 湖北11选5走势图牛 好运快3计划 云南高频彩11选5 湖北11选5技巧稳赚 江西时时彩投注软件怎样下载软件怎样下载 下载福建快3开奖结果子 pk10技巧之冠军杀号 香港赛马会北京会所 开乐彩视频教学 cba官方网站 一点红一波中特大赢家 加拿大三分彩直播开奖 河北11选5第18061145期 青海11选5今日开奖结果走试图