Web基础之CSS盒模型和CSS布局
一、CSS盒模型:
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:内容(content)、填充(padding)、边框(border)、边界(margin);
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒模型示意图:
理解盒模型对我们今后网页布局提供了基础;因为一个网页的布局牵扯到很多元素的排列,怎样排列才能让整个页面美观;而且,我们常用DIV去包裹一些元素,这就是我们常说的DIV+CSS;接下来的CSS实战案列就会见识到DIV+CSS的厉害之处;我们写网页的时候一定要记得这个盒模型;例子见后面;盒模型对理解今后的网页布局真的非常重要;
二、CSS布局:
CSS布局主要用到布局相关的属性,主要属性有position(定位属性)、display(显示属性)、float(浮动属性)、clear(清除属性)、overflow(溢出属性)
1.CSS定位(position)详解
1.1 Static定位
HTML元素定位属性的默认值,即没有定位,元素出现在正常的流中。注意:静态定位的元素不会受到top, bottom, left, right影响。
1.2 Fixed(固定)定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
注意:
Fixed 定位在 IE7 和IE8下需要描述!DOCTYPE才能支持。
Fixed定位使元素的位置与文档流无关,因此不占据空间。