网页设计学习笔记

摘要： CSS3 中的弹性盒布局（Flexible Box Layout）标准已经进入候选推荐阶段，大部分浏览器也开始支持这个标准了，这里我们来介绍下这个标准。在最新的 Chrome 中浏览下面的例子，可以看到父元素被横向分为三部分，而当鼠标移动到某一部分上面时，各部分的宽度会自动调整：​ one two three在上面的例子中首先我们设置了父元素的 display: flex; flex-direction: row; ，表示我们使用横向的弹性布局。display 也可以设为 inline-flex，这时候父元素就类似于 inline-block 的元素。接下来我们对三个子元素分析设置了 f... 阅读全文

摘要： 在 CSS2 的盒模型中，一个元素的渲染宽度（rendered width）等于 width + padding + border，渲染高度等于 height + padding + border。元素的渲染大小就是它在网页中实际占用的盒子大小。这种规定在很多时候让人很头疼。比如你想让子元素的 padding-width: 10px 和 border-width: 2px，然后填满父元素的所有空间，这时候简单地来一个 width: 100% 和 height: 100% 是会溢出的。当父元素的大小是固定的时候，我们很容易计算出正确的 width 和 height。但是，如果父元素的大小也不是固 阅读全文