CSS基础-体验CSS

　　所有CSS布局技术依赖于三个基本概念：定位，浮动和空白边操作。　　　　1、设计居中的两种方式，一种是使用空白边，另一种是使用定位和负值空白边。　　　　使用空白边是指将页面内容放入一个div容器，位于里面，接着定义div容器的宽度并且将其水平空白边设置位auto。　　　　代码：

#wrapper {

     width:800px;

     margin:0 auto;

}

　　　　使用定位和负值空白边：首先定义容容器宽度，将容器position属性设置位relative，将left属性设置位50%。这样容器的左边缘就定位在页面中间。最后对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半，这样就可以让容器居中。

#wrapper {

     width:800px;

     position:relative;

     left:50%;

     margin-left:-400px;

}

　　　　经尝试，将浏览器缩小的时候，使用第二种方法时部分内容会不可见，第一种方式更佳。　　　　2、基于浮动的布局，主要是两列布局和三列布局　　　　基于浮动的布局主要是应用float属性。两列布局中，左列向left浮动，右列向right浮动，计算好width可以让两列中间有视觉上的隔离。如果两列都向left浮动，并且利用margin或padding建立中间隔离带，在一些浏览器可能打乱布局。　　　　如果有页脚，为了保证页脚正确的在两个浮动的元素下面，需要用clear：both清理页脚。

#wrapper { width:720px;}

#contentleft {width: 520px; float:left;}

#contentright {width: 180px;  float:right;}

#footer {clear:both;}

　　　　Contentleft和contentright的width属性总共为700，小于父容器wrapper720，所以中间有20作为中间的隔离带。　　　　三列布局与两列布局类似，主要将原本contentright列分为两列，从而形成三列的效果。　　　　两列中仍旧一列向左浮动，一列向右浮动，总宽度不应该超出父列的宽度。　　　　3、固体宽度，流体和弹性布局　　　　固定宽度布局是指以像素为单位定义宽度，比如{width：100px;}，是最常用的布局方式。固定宽度布局意味着网页内容的宽度不随字体大小和屏幕分辨率变化而变化，比如设计一个800600的布局，在640480分辨率中会有水平滚动，在1024*768中会缩小出现在屏幕中间。　　　　流体布局是指尺寸用百分数而不是用像素设置的，比如{width：50%}，所以能够相对于浏览器进行伸缩。在在窗口宽度过小或者设计跨越浏览器整个宽度时都会造成很难阅读的现象。　　　　弹性布局是相对于字号好设置元素的宽度，比如{width:15em;}。跟固定宽度一样缺点是不能从分利用空间。在文本字号增加时布局会加大，可能导致水平滚动条的出现。大多数浏览器的默认字号是16px，即1em = 16px。为了方便计算，技巧是让1em 约等于10px，因为10/16=62.5%，在添加body {font-size:62.5%;}即可。接着在布局时就可以用1em=10px进行计算。