• <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 max-width/min-width设置元素尺寸

                  2018-8-6 00:34| 作者: admin| 查看: 1473| 评论: 0|来自: 蚂蚁部落

                  使用CSS设置元素的尺寸是最为简单基础的操作,估计也是初学者最先掌握的技能之一。

                  使用width和height属性设置极为简单,因为这两个属性功能非常直观。

                  max-width和max-height等属性相较而言稍微难一点。

                  下面分别通过代码实例对几个属性分别做一下介绍。

                  一.width和height属性:

                  通过width和height个属性即可实现设置元素的长度和宽度:

                  代码实例:

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

                  上面的代码设置元素的宽度为100px,高度为50px。

                  特别说明:元素的宽度默认是100%,也就是会在横向上填满父元素。

                  二.max-width和min-width属性:

                  用来设置元素的最大宽度和最小宽度。

                  看如下代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  #box {
                    max-width:900px;
                    min-width:700px;
                    height:120px;
                    background-color:#ccc;
                  }
                  #ant {
                    background:#F00;
                    width:700px;
                    height:100px;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="box">
                    <div id="ant"></div>
                  </div>
                  </body>
                  </html>

                  设置元素最大宽度为900px,最小宽度为700px,这意味着什么?

                  (1).宽度可以在横向上尽量填满父级元素,但会被限定在max-width之内,所以如果父元素足够宽,外层div元素表现为900px。

                  (2).当父元素宽度介于700px-900px,那么宽度自?#35270;Α?/p>

                  (3).如果父元素宽度小于700px,它的宽度保持在700px。

                  三.max-height和min-height属性:

                  用来设置元素的最大高度和最小高度。

                  看如下代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  #box {
                    width:500px;
                    max-height:600px;
                    min-height:300px;
                    background-color:#ccc;
                  }
                  #ant {
                    background:#F00;
                    width:400px;
                    height:400px;
                  }
                  </style>
                  <script>
                  window.onload = function () {
                    var ant = document.getElementById("ant");
                    var rang = document.getElementById("range");
                    rang.onmousemove = function () {
                      ant.style.height = this.value + "px";
                    }
                  }
                  </script>
                  </head>
                  <body>
                  <div id="box">
                    <div id="ant"></div>
                  </div>
                  <input type="range" min="0" max="700" value="400" id="range"/>
                  </body>
                  </html>

                  上述代码设置最大高度为600px,最小高度为300px,这意味着:

                  (1).与宽度不同,高度?#25442;?#22312;垂直?#36739;?#19978;尽可能填满父元素,不过同样最大高度被限定在max-height。

                  (2).如果元素内容介于300px-600px之间,那么高度会自?#35270;Α?/p>

                  (3).如果内容高度小于300px,那么高度会保持在min-height规定的值。

                  拖动滑动轴可以查看效果,外层div的高度能够自?#35270;?#20869;部元素的高度,但是被限定在min-height和max-height属性规定的值之间。

                  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>

                                                            湖南幸运赛车综合 排列三走势图带连线1000期 河南11选5多少钱一柱 极速十一选五龙虎技巧 上海时时彩多长时间 福建11选5开奖直播 香港特码开奖结果 双色球走势图号码 体彩排列5走势图带连线坐标 足彩进球彩预测 微信北京28加拿大28 中彩网时时彩开奖预测 双色球开奖直播2019011 湖北11选5选号技巧 云南快乐十分开奖公告