摘要：一、“1-2-1”单列变宽布局： 对于变宽度的布局，首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化。这两种都是很常用的布局方式。然而对于等比方式而言，相对比较简单，和我上一篇博客中1-2-1的布局方式非常类似，因此这里只是介绍一列固定另一列变宽的case。 在实际的应用中，只有单列宽度变化，而其它保持固定的布局可能会更加实用。一般在存在多个列的页面中，通常比较宽的一个列是用来放置内容的，而窄列放置链接、导航等内容，这些内容一般宽度是固定的，不... 阅读全文

摘要：一、单列布局： 这是最简单的一种布局方式，之所以给出该示例，还是为了保证本篇博客的完整性。固定宽度布局 Page Header 这是一行文本，这里作为样例，显示在布局框中。 这是一行文本，这里作为样例，显示在布局框中。 Page Content 这是一行文本，这里作为样例，显示在布局框中。 这是一行文本，这里作为样例，显示在布局框中。 Page Footer 这是一行文本，这里作为样例，显示在布局框中。 从CSS代码可以看到，3个div的宽度都设置为固定值360像素，同时将m... 阅读全文

摘要：相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。以下为后面实验的基准代码。position属性 Box-1 这是一个很简单的标准流方式的两层的盒子，页面的效果如下图：实验一：一个子块的情况 下面的CSS样式代码中的Box-1处，将pos... 阅读全文

摘要：在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。 CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。准备基础代码 浮动的性质比较复杂，这里先制作一个基础的页面，代码如下。后面一系列的实验将基于下面的代码为基础，并根据不同的知识点添加不同的新代码。 Box-1 ... 阅读全文