CSS3秘笈：第十二章&第十三章

第十二章

1.网页布局类型

（1）固定宽度

（2）流式

（3）响应式Web设计

2.CSS布局的方法

通过给元素设置一个宽度，将它浮到左侧或右侧，就可以创建一个列（元素后面的文本会环绕浮动的元素，仿佛是另外一个列一样）。如果给多个div或者其他标签使用float属性，就能够实现对多列的布局。进一步使用这种技术，把浮动的div放在浮动的div里面，就能快速创建复杂、多列的布局。

另一种CSS方法：绝对定位，它允许你把元素放在网页的任何位置上，并且可以精确到像素级。一般来说，这种方法适合于比较小的任务，例如将logo定位在网页的特殊位置上。

3.布局策略

（1）从内容入手

（2）Mobil First（移动设备优先）

（3）先设计草图

（4）找出方框

（5）顺应页面流

（6）记住背景图片

（7）拼图中的小部件

（8）给元素设计层次

（9）别忘了margin和padding

第十三章

1.float属性能把网页元素移到网页（或者其他外围快）的某一侧。出现在浮动元素之后的所有HTML都能在网页中上移，环绕在浮动元素的周围。

float属性接受以下3种不同的值：left（左）、right（右）和none（无）。假设要把一张图片移到网页的右侧，可以创建下面这个类样式，并把它应用到<img>标签上：

.floatRight  {  float:  right;  }

将该属性应用到一个装满内容的<div>标签上时，还可以创建一个侧边栏：

.sidebar  {

float:  left;

width:  170px;