CSS3秘笈：第十三章

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

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

.floatRight  {  float:  right;  }

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

.sidebar  {

float:  left;

width:  170px;

（1）把每一列都包在一个带有ID或class属性的<div>标签里面。

（2）把侧边栏<div>浮到右侧或左侧。

（3）给浮动的侧边栏设定一个宽度。

（4）给正文添加一个left margin。

2.多种方法解决叛逆浮动元素。

（1）在外围div的底部添加一个清除元素。

（2）浮动外围元素。

（3）利用overflow：hidden。

（4）使用Micro Clear Fix。

3.CSS的box-sizing属性可以让Web浏览器用一种不同的模式来计算元素的实际屏幕宽度。它接受以下3个值之一：

（1）content-box值是浏览器正常的计算方式，即屏幕上元素的宽度为left/right border厚度、left/right padding以及CSS width属性值得总和。

box-sizing：content-box；

（2）padding-box值是让浏览器要包含left/right padding。换句话说，元素的显示宽度为CSS width以及left/right padding的总和。它不包括元素周围的任何border

box-sizing：padding-box；

（3）最后一个border-box属性，包含padding、border以及CSS的width。一般来说，这回是你想要使用的那一个。它使这个算术变得很简单，有助于防止float drop，当你使用基于百分比的宽度，并且给border宽度和padding使用基于pixel单位的时候，尤其如此：

box-sizing：border-box；

4.搭建HTML结构

（1）在文本编辑器中打开start.html文件，并单击HTML注释(<!--first sidebar goes here-->)后面的空行。

（2）给侧边栏添加一个开始的<aside>:  <aside class="sidebar1">.

（3）打开未见sidebar1.txt，复制所有的内容，然后回到start.html文件

（4）立即在你刚刚粘贴上的代码后面输入</aside>。

（5）把光标放在这个HTML注释（<!--main content goes here-->）后面的空行上，然后输入<article>标签后面。

（6）打开文件main.txt，复制所有的内容，返回start.html文件，然后把代码粘贴到刚创建的<article>标签后面。

5.创建布局样式

（1）在文本编辑器中，打开styles.css文件。

（2）将光标滚动到CSS文件的底部，你会看到一条CSS注释，写道：/*add tutirial styles below here */。在它下方添加以下样式：

.sidebarl  {

float: left;

width: 20%;

}

（3）保存HTML和CSS文件，并在Web浏览器中预览start.html文件。

（4）给第2个列创建一个样式：

.main  {

margin-left: 22%;

}

再添加一列

（1）打开文件sidebar2.txt。从文件中复制所有的HTML，然后返回start.html文件。

（2）在文件底部附近找到HTML的注释<!--  second sidebar goes here -->

（3）输入<aside class="sidebar2">,按回车键，然后粘贴在第1步中复制的HTML代码。

（4）在文本编辑器中打开styles.css文件。

（5）保存所有文件，并在Web浏览器中预览start。html文件。

（6）编辑.main样式，使它看起来像这样：

.main  {

float: left;

width: 60%;

}

（7）在.sidebar2样式的后面再添加一个样式：

footer  {

clear：both；

}

6.添加一些空间

（1）在.sidebar1、 .main和.sidebar2样式中添加padding，使样式像这样：

.sidebar1  {

float:  left;

width:  20%;

padding:  0  20px  0  10px;

}

.main  {

float:  left;

width:  60%;

padding:  0  20px  0  20px;

}

.sidebar2  {

float:  right;

width:  20%;

padding:  0  10px  0  20px;

}

（2）在样式表中再添加一个样式：

*  {

-moz-box-sizing:  border-box;

box-sizing:  border-box;

}

（3）在.main样式中添加一个left/right border，像这样：

.main  {

float:  left;

width:  60%;

padding:  0  20px;

border-left:  dashed  1px  rgb（153,153,153）；

border-right： dashed  1px  rgb（153,153,153）；

}

7.将流式布局和固定宽度设计混合

（1）在styles.css文件中，删除刚才创建的.pageWrapper样式。

（2）在styles.css文件中，再添加一个样式：

nav ul， header  h1， footer  p  {

max-width： 1200px；

margin：0  auto；

}

（3）在文本编辑器中打开start.html文件。

（4）向下滚动到HTML文件的底部。

（5）在群组选择器中添加新的类，像这样：

nav ul，  header  h1，  footer  p，  .contentWrapper  {

max-width:  1200px;

margin:  0  auto;

}