《简单学习CSS实现网页布局的基础》由会员分享，可在线阅读，更多相关《简单学习CSS实现网页布局的基础（3页珍藏版）》请在金锄头文库上搜索。
1、简单学习简单学习 CSS 实现网页布局的基础实现网页布局的基础使用 CSS 布局非常简单，如果你习惯使用 tables 布局，可能开始时有点困难，但其实很容易，事实上只是观念的不同。你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。Positioning 定位定位positon 属性可以指定元素为 absolute,relative,static 或是 fixed。static 是元素默认属性，按 HTML 出现的先后顺序。relative 比较像 static，但元素可以使用 top,right,bottom 和 left 设定初始属性。absolute 把元素从 HTML 里面拉
2、出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left 定位在任何地方。fixed 行为像 absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed 元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为 IE7 以下的浏览器不支持。使用绝对定位布局使用绝对定位布局可以使用绝对定位创建传统的两列布局，如下：ThisThatThe OtherRa ra banjo banjoWelcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banj
3、o. Ra ra banjo banjo.(Ra ra banjo banjo)上面加上 CSS：#navigation position: absolute;top: 0;left: 0;width: 10em;#content margin-left: 10em;上面导航条设定在左边，宽度是 10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边 margin 等于导航条的宽度。真是简单。你没有限制这两列的距离，使用聪明的布局，你可以随心所欲安排许多块。如果你想添加第三列，比如：#navigation position: absolute;top: 0;left:
4、0;width: 10em;#navigation2 position: absolute;top: 0;right: 0;width: 10em;#content margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */最后阶段去绝对定位元素，因为它们独立存在，无法正确了解它们哪里结束。如果你使用上面的例子，所有的页面有小的导航条和大的内容区域到可以，但是，特别是宽度和大小使用相对值，你必须经常放弃定位的希望，比如位于元素最下面的底部布局。如果你想定位底部，采用浮动模式
5、比绝对定位好。Floating 浮动浮动浮动元素可以在一条线上移动。浮动一般使用在定位页面里的小型元素，但也可使用在大块里，比如导航。上面的 HTML 例子使用下面 CSS：#navigation float: left;width: 10em;#navigation2 float: right;width: 10em;#content margin: 0 10em;如果你不希望接下来的元素包围浮动对象，可以使用 clear 属性。clear:left 清除浮动在左边的元素，clear:right 清除浮动在右边的元素，clear:both 清除所有。如果你想添加底部 footer，可以像下面：#footer clear: both;footer 将在所有列下面，不管它们的长度如何。这篇介绍了定位和浮动的基本情况，强调页面的大块，但记住，上面方法可以运用到块里面的任何元素。通过组合使用 position,floating,margins,padding 和 border，你可以表现出任何网页设计，table 布局能做的 CSS 没有什么不能做。使用表格布局的理由就是考虑古老的浏览器。CSS 的优势在于拥有很高的可用性，而且体积上只有使用 table 布局的部分大小。
