-8、布局

一、浮动布局

(1)两列布局：

一个包含块包含两个部分。一个部分向左浮动，一个部分向右浮动，创建隔离带。或者两个都向左浮动，用外边距或者内边距创建隔离带。

实现这个布局非常简单，只需要为每个列设置想要的宽度，然后将次要内容左浮动，主要内容右浮动。

包含的两个块命名可以直接简单的命名，如：命名为primary和secondary而不需要命名为primary-content和secondary-content

实例：

 <div class="content">
<div class="primary" style="float:right;">
 main content goes here 
</div>
<div class="secondary" style="float:left;">
   navigation and content goes here 
</div>
</div>

(3)三列布局:

在两列布局的基础上操作，将主要内容块再分为两个部分，再分为主要内容和次要内容

主要内容的主要内容左浮动，主要内容的次要内容右浮动。

实例：

 <div class="content">
<div class="primary" style="float:right;">
  <div class="primary-pri">
 main content of primaryl goes here 
 </div>
 <div class="primary-sec">
 main content of secondary goes here 
 </div>
</div>
<div class="secondary" style="float:left;">
   navigation and content goes here 
</div>
</div>

固定宽度、流式、弹性布局

(1)固定宽度布局：所有宽度都以像素为单位

(2)流式布局：尺寸用百分数而不是像素设置。

原理：用百分数设置宽度，内边距和外边距，使之可以随着浏览器变化而变化。

line-height的百分数是根据字号来设置的

另：有必要设置以像素或者em为单位的min-width.对于div的高度设置百分数，则需要先将html和body设置height：100%；但是很容易出现问题，不建议使用。

html,body{height:100%;}

流式图像：设置百分数的宽度，并且将图像的原本宽度设置为他的max-width

(3)弹性布局：以em为单位来设置宽度（不推荐）

一、浮动布局

固定宽度、流式、弹性布局

Guess you like