前端基础(一)--CSS布局基础
WalkerO49
8年前
<h2>盒模型</h2> <p>CSS中， Box Model叫盒模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。这种方式基本类似于Android开发中的布局方式，所以对于Android developer学习前端布局方式可以很快的入门。但是有一点，在Android中设置margin和padding的顺序是left、top、right、bottom，比如<code>setMargin(10, 20, 30, 20)</code>分别代表左上右下的间距分别为10px,20px,30px,20px;但是在CSS中的顺序是top、right、bottom、left，比如<code>margin: [10px, 20px, 30px, 20px]</code>分别代表左上右下间距分别为20px,10px,20px,30px。<br> 概述图如下</p> <p><a href="https://simg.open-open.com/show/8f5bdbeee42ef7c880aa395bcd35ae16.png" rel="group"><img alt="前端基础(一)--CSS布局基础" src="https://simg.open-open.com/show/fa348488f9006d97122d746d69e8370c.png" width="994" height="1026"></a></p> <p>定位基础</p> <h2><code>position</code>定位</h2> <p><code>position</code>包括以下几种类型的定位</p> <ul> <li> <p>static 默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。</p> </li> <li> <p>relative 相对布局，在原有基础上偏离使框偏离某个方向固定距离。跟Android中的布局方式很像<br> 例子</p> </li> </ul> <table> <tbody> <tr> <td> <pre> 1 2 3 4 5 6 7 </pre> </td> <td> <pre> .relative2 { position: relative; top: -20px; //在原有top位置上向上偏移-20px left: 20px; //在原有left位置上向左偏移20px background-color: white; width: 500px; } </pre> </td> </tr> </tbody> </table> <ul> <li>absolute 绝对布局，向上寻找使用过<code>position</code>定位过(除了默认值static外)的祖先元素，然后依据该元素进行定位。</li> </ul> <table> <tbody> <tr> <td> <pre> 1 2 3 4 5 6 7 8 9 10 11 12 </pre> </td> <td> <pre> .relative { position: relative; width: 600px; height: 400px; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; } </pre> </td> </tr> </tbody> </table> <p>如图</p> <p><a href="https://simg.open-open.com/show/6bb4fd836e4ed3a95ada22251cb4df1d.png" rel="group"><img alt="前端基础(一)--CSS布局基础" src="https://simg.open-open.com/show/b1c8ae5d5184fe5934eb415284b9a07f.png" width="1196" height="796"></a></p> <ul> <li>fixed 固定定位，相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。相当于在Android开发中<code>FrameLayout</code>中的某个元素指定<code>layout_gravity</code>使其固定在根布局的某个固定的位置。<br> 例子</li> </ul> <table> <tbody> <tr> <td> <pre> 1 2 3 4 5 6 7 </pre> </td> <td> <pre> .fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; } </pre> </td> </tr> </tbody> </table> <p>该元素的位置始终在右下角保持不变。</p> <h2><code>float</code>浮动</h2> <blockquote> <p>浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</p> </blockquote> <p>可以这样理解，比如<code>float: left</code>就是向左移动，直到坐边缘碰到根元素或者另外一个佛洞的边框的边缘。也就是说，如果好好几个向左浮动的元素，那么它们是从左到右依次排列的。<br> 如下面的图</p> <p><a href="https://simg.open-open.com/show/dcce6fdf19b04166214408bef2afa06b.png" rel="group"><img alt="前端基础(一)--CSS布局基础" src="https://simg.open-open.com/show/dcce6fdf19b04166214408bef2afa06b.png" width="1168" height="532"></a><br> <a href="https://simg.open-open.com/show/6435cf8e7d84ea2e9bedcf15caefe2f9.png" rel="group"><img alt="前端基础(一)--CSS布局基础" src="https://simg.open-open.com/show/6435cf8e7d84ea2e9bedcf15caefe2f9.png" width="1184" height="542"></a><br> <a href="https://simg.open-open.com/show/3aaa733c37bc9d247a0ec42db9729a07.png" rel="group"><img alt="前端基础(一)--CSS布局基础" src="https://simg.open-open.com/show/3aaa733c37bc9d247a0ec42db9729a07.png" width="1184" height="542"></a></p> <h2><code>clear</code>清除浮动</h2> <p>clear 属性定义了元素的哪边上不允许出现浮动元素。<br> 具体的例子参考<a href="/misc/goto?guid=4959673171623281764" rel="external">这里</a></p> <p>三栏式布局</p> <p>ife其中的一个任务<a href="/misc/goto?guid=4959673171712166324" rel="external">三栏式布局</a><br> 就是通过CSS的布局基础知识来写的。包括position和float。</p> <p>代码在这里<a href="/misc/goto?guid=4959673171795720607" rel="external">三栏式布局</a><br> demo <a href="/misc/goto?guid=4959673171874506083">demo</a></p> <p>参考</p> <ul> <li><a href="/misc/goto?guid=4958870312011368568" rel="external">learnlayout</a></li> <li><a href="/misc/goto?guid=4959673171987624635" rel="external">w3school</a></li> </ul> <p>via:http://w4lle.github.io/2016/04/17/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80-%E4%B8%80-CSS%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%80/ </p>