distribution patterns :浏览器如何对网页中的元素进行排版的。
1.标准流（文档流）：浏览器默认的排版方式；两种 一种是垂直排版，一种是水平排版。
补充：块级元素可以设置width,height属性；行内元素设置width,height属性无效.
块级元素：div,p,form,ul,li,ol, dl,form,address,hr, menu, table and so forth
行内元素：span,strong,em,br,img ,input(表格标签),label,select and so on
如果是行内元素/行内块级元素，那么就会水平排版。
display:block; /*转换为块级*/
display:inline; /*转换为行内*/
2.浮动流：他是一种“半脱离标准流”的排版方式；只有水平排版，只能设置某元素左对齐或者右对齐，没有居中对齐（center）。
Notice：margin:0 auto;在浮动流中是无效的。
characters：浮动流中不区分块级/行内/行内块级元素；无论谁又可以被设置宽高。
浮动元素的脱标：当某个元素浮动之后看上去就像从标准流中删除了一样，影响：如果前面一个元素浮动了后面一个元素没有浮动，前者会掩盖后者。
3.定位流
浮动元素排序规则：
1：相同方向上的浮动元素，先浮动的元素显示在前面；后浮动的显示在后面。
2：不同放上上的浮动，左浮动找左浮动，右浮动找右浮动。
3：浮动元素浮动后的位置，由浮动之前在标准流中的位置来确定。
网页布局的字围现象和贴靠现象是需要注意的
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字围现象</title>
<style>
div{
float: left;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000;
}
p{
width: 500px;
height: 500px;
background-color: pink;
}
img{
float: left;
}
</style>
</head>
<body>
<!--<div class="box">-->
<img src="../../西电.jpg" height="133" width="300"/>
<p>西安电子科技大学（Xidian University）简称“西电”或“西军电”，是中央部属高校，直属教育部，工信部共建，是1959年中央确定的首批20所全国重点大学，国家首批“211工程”、“985工程优势学科创新平台”、“2011计划”（牵头建设信息感知技术协同创新中心）、“111计划”、“卓越工程师教育培养计划”重点建设高校，56所获批设立研究生院的重点大学之一，我国最早的2所国防工业重点军校之一（哈军工、西军电并称），中国电子信息领域科学研究和人才培养的核心基地，中国雷达、信息论、密码学、电子对抗、微波天线等学科的发源地。
学校电子信息特色鲜明、优势显著，为民族电子工业的创建和发展建立了不朽的功勋，是中国电子信息领域、邮电领域唯一的“2011计划”牵头高校，先后入选首批2所国家网络空间安全人才培养基地、首批5所科技部拨付专项经费的国家集成电路人才培养基地、首批9所国家示范性微电子学院、首批35所国家示范性软件学院、北京高科大学联盟创始成员[1-2] 。
学校坐落于举世闻名的世界四大古都之一的十三朝古都西安，前身是1931年诞生于江西瑞金的中央军委无线电学校，历经中央军委工程学校、解放军通信工程学院、中国人民解放军军事电信工程学院等历史时期。[1]
建校80余年来，学校为国家培养了20万电子信息领域的高级人才，产生了120多位解放军将军，成长起了17位两院院士（其中恢复高考以来毕业生中有9位当选两院院士），为国家建设和社会进步做出了重要贡献。</p>
</body>
</html>
2017-04-07