ui培训之流式布局弹性盒模型(一)

更新时间:2016年05月06日15时25分来源:传智播客UI培训学院浏览次数:

一、流式布局

手机网站一般没有版心，这是因为手机的屏幕已经很小了，寸土寸金。
流式布局：盒子的width、padding、margin用百分比的形式来进行定义。

如果一个盒子，没有其他父元素（body标签是它的父标签）的时候，这个盒子如果用百分比来指定宽度，就是相对于浏览器窗口的宽度。

<body>
<div></div>
</body>

如果一个盒子，有父标签（不是body），这个盒子如果用百分比来指定宽度，就是相对于父盒子的width值。

<div>
<p></p>
</div>

如果一个盒子，自己有用百分比写的padding、margin，那么都是相对于父盒子的width值。

<div>
<p>祝大家圣诞节快乐！</p> → 这个盒子有padding-left:10%; 相对于父盒子的width值
</div>

padding-top、padding-bottom虽然是竖直方向上的内边距，但是仍然参考的是父盒子的width。
这个性质非常有用，一会儿我们将看到这个性质可以用来解决盒子的高度等比例变化的问题。

【阶段小测试】看下面的代码，结构是 <div><p>祝大家圣诞节快乐！</p></div>，你能说出现在p标签真实的宽度，和高度是多少么？