Heim > Web-Frontend > HTML-Tutorial > 自己做简单自适应宽高 - gpfq

自己做简单自适应宽高 - gpfq

WBOY
Freigeben: 2016-05-20 13:46:27
Original
1496 Leute haben es durchsucht

自适应其实就是width,height都随着变化,

但是如果(父级是px固定)兄弟标签是以px为单位,那么再设置div100%就肯定超出范围了(多了兄弟标签px长度),

  box-sizing方案

  1. 外层box-sizing: border-box; 同时设置padding: 100px 0 0
  2. 内层100像素高的元素向上移动100像素,或使用absolute定位防止占据空间;
  3. 另一个元素直接<code>height: 100%;

    absolute positioning

    1. 外层position: relative
    2. 百分百自适应元素直接<code>position: absolute; top: 100px; bottom: 0; left: 0<br><br>我们以body为父级试试不同分辨率效果,我用的方法2,相对来说简单点<br>
      <span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html  </span><span style="color: #0000ff;">></span>
      <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html  </span><span style="color: #0000ff;">></span>
      <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>   <span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;"> 5</span>     <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span><span style="color: #0000ff;">/></span>
      <span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #800000;">        body,html</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
      <span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000;">            padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #ff0000;">            margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #ff0000;">            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">11</span> <span style="background-color: #f5f5f5; color: #ff0000;">            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">12</span> <span style="background-color: #f5f5f5; color: #ff0000;">            font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">13</span> <span style="background-color: #f5f5f5; color: #ff0000;">            text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">14</span>         <span style="background-color: #f5f5f5; color: #000000;">}</span>
      <span style="color: #008080;">15</span> <span style="background-color: #f5f5f5; color: #800000;">         .brother</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
      <span style="color: #008080;">16</span> <span style="background-color: #f5f5f5; color: #ff0000;">             background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">17</span> <span style="background-color: #f5f5f5; color: #ff0000;">             width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">18</span> <span style="background-color: #f5f5f5; color: #ff0000;">             height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">70px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">19</span> <span style="background-color: #f5f5f5; color: #ff0000;">             position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">20</span>          <span style="background-color: #f5f5f5; color: #000000;">}</span>
      <span style="color: #008080;">21</span> <span style="background-color: #f5f5f5; color: #800000;">        .sister</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
      <span style="color: #008080;">22</span> <span style="background-color: #f5f5f5; color: #ff0000;">            background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#0f0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">23</span> <span style="background-color: #f5f5f5; color: #ff0000;">            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">140px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #ff0000;">            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">25</span> <span style="background-color: #f5f5f5; color: #ff0000;">            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">70px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #ff0000;">            bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">27</span>         <span style="background-color: #f5f5f5; color: #000000;">}</span>
      <span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #800000;">        .my</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
      <span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #ff0000;">            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">30</span> <span style="background-color: #f5f5f5; color: #ff0000;">            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">70px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">top与上边对应-</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
      <span style="color: #008080;">31</span> <span style="background-color: #f5f5f5; color: #ff0000;">            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">140px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">left与左边对应-</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
      <span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #ff0000;">            bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #ff0000;">            right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">34</span> <span style="background-color: #f5f5f5; color: #ff0000;">            background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#00f</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
      <span style="color: #008080;">35</span>         <span style="background-color: #f5f5f5; color: #000000;">}</span>
      <span style="color: #008080;">36</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;">37</span> <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;">38</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;">39</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="brother"</span><span style="color: #0000ff;">></span>上边高度为PX的div<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;">40</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sister"</span><span style="color: #0000ff;">></span>左边宽度PX的div(高度不要定义)<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;">41</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="my"</span><span style="color: #0000ff;">></span>重点div!<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;">42</span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
      <span style="color: #008080;">43</span> <span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> </span></span></span></span></span></span></span></span></span></span>
      Nach dem Login kopieren
      View Code

       

      <br>初学者,见笑<br><br><br>
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage