HTML前端入门归纳—

　　本人一直在从事.net的开发，界面都是采用的WPF，近期花了一个多月进行HTML前端的学习，在这里呢进行学习总结和归纳。

　　本系列将主要分为4个模块：

　　　　控件

　　　　样式

　　　　布局

　　　　JavaScript

　　根据多年WPF的开发经验，界面就是控件及样式与布局的组合，再加上代码来控制交互逻辑，本期先对HTML常用布局方法进行归纳。

　　控件元素

　　块元素

　　块元素的显示通常会以新起一行的方式进行展示吗，比如<h><ul><p>

  <body>

     <h1>这里我演示是块元素</h1>

     <p>这里我演示是块元素</p>

     <ul>这里我演示是块元素</ul>

   </body>

　　内联元素

　　内联元素通常会在一行内进行显示，比如<b><a><img>

<b>这里我演示是块元素</b>

<a>这里我演示是块元素</a>

<img src="pika.png"></img>

显然这些默认元素并不能满足我们对控件元素布局的要求，下面我们就以最常用的容器<div>来讲解如何灵活的进行布局。

　　通过float进行<div>布局

　　首先需要知道，<div>是块级元素，在页面上会独占一行，自上而下排列，这种排列方式被称为流，或标准流。

　　需要了解的另一个概率就是float(悬浮),悬浮属性可以让块元素脱离标准流，悬浮在标准流之上。

 <div id="prat1">块1</div>

 <div id="prat2">块2</div>

 <div id="prat3">块3</div>

 <div id="prat4">块4</div>

 #prat1 {

   width: 100px;

   height: 100px;

   background: blue;

 }

 #prat2 {

   width: 100px;

   height: 100px;

   background: red;

 }

 #prat3 {

   width: 200px;

   height: 200px;

   background: yellow;

 }

 #prat4 {

   width: 100px;

   height: 100px;

   background: green;

 }

　　此处将块3变大是为了更好的看到悬浮效果，我们将块2添加float:left 或者float:right,将得到如下两种结果

　　如图，块1和块3块4还在流里按照块元素进行显示，但块2已经脱离流，但所处行位置未发生变化。

　　清除浮动的关键字是clear，官方定义如下：

语法：

clear : none | left | right | both

取值：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

　　在div2的css样式中添加clear:right,理解为不允许div2的右边有浮动元素，如果div3也是浮动元素，div3会自动下移一行来满足规则。但这种理解是不对的，这样做没有任何效果，原因如下：

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

　　我们用例子来讲解。

首先我们可以给<div>加上float属性

 #prat1 {

   width: 100px;

   height:100px;

   background: blue;

   float:left;

 }

 #prat2 {

   width: 100px;

   height: 100px;

   background: red;

   float: left;

 }

 #prat3 {

   width: 100px;

   height: 100px;

   background: yellow;

   float: left;

 }

 #prat4 {

   width: 100px;

   height: 100px;

   background: green;

   float:left;

 }

现在我们可以尝试以下clear属性，比如让第二块清除浮动clear:left，会怎样呢

　　如果我们给第二块清除浮动clear:right会怎样，我们看看效果

　　没有任何效果，就是因为块2的clear不会对块3产生影响。

　　那我们如何让块1块2块3块4按照2*2的方阵进行显示呢，方法如下：

　　① 块1、块2、块3、块4 Float:left 块3clear:left 或者

　　① 块1块2块3块4 float:right 块3clear:right

　　另外还有其他方式进行布局，比如适用于父容器的flex，这里就不进行讲解。

　　页面布局

　　看到这里大家可能会问，前面将的都是将几个小方块进行布局，要怎样才能实现对一个网页的布局，其实非常简单，width/height属性除了可以赋值为数字比如100px外，还可以赋值百分号比如10%，这个即所在容器长或宽的百分比。我们可以通过这个还实现将整个网页撑满。

　　就以前面的块1块2块3块4为例，比如显示4行，第一行高占10%，第二行高20%，第三行高30%，第四行高40%，宽度设100%，即可得到如下效果

 #prat1 {

   width: 100%;

   height: 10%;

   background: blue;

 }

 #prat2 {

   width: 100%;

   height: 20%;

   background: red;

 }

 #prat3 {

   width: 100%;

   height: 30%;

   background: yellow;

 }

 #prat4 {

   width: 100%;

   height: 40%;

   background: green;

　　奇怪了为什么height设置百分比没有效果呢，原因是因为百分比是相对父控件的比例，父控件默认尺寸是0，会被撑到所有子控件的尺寸。

　　所以要解决这个问题，首先要处理父控件<body>的尺寸问题，采用绝对定位能够让父控件占满整个页面。如下

 body {

   position: absolute;

   top:;

   bottom:;

   left:;

   right:;

 }

　　再运行到的效果如下：

　　如果要做成顶部固定高度header,左边20%宽度guider,右边80%宽度content,下边固定高度bottom的形式，即实现下面这种布局，可以这么做

　　首先，先将块2悬浮左，块3右悬浮，块4左悬浮并清除左右两边的悬浮属性（实现单独起一行的作用）。

 #prat1 {

   width: 100px;

   height: 100px;

   background: blue;

 }

 #prat2 {

   width: 100px;

   height: 100px;

   background: red;

   float:left;

 }

 #prat3 {

   width: 100px;

   height: 100px;

   background: yellow;

   float:right;

 }

 #prat4 {

   width: 100px;

   height: 100px;

   background: green;

   clear:both;

 }

　　现在来设置宽高，先将<body>占满整个窗体，假设块1的高度为200px,块2的宽度为20%，块3宽度80%，块4的高度为250px.则可进行如下设置，注意：块2块3在同一行，如果宽度之和超过100%，会导致块3另起一行

　　块4因为块2块3的高度与整个页面一致所以需要滚动到下面才可显示。

　　通常情况下height较少使用百分数来设置，一般会根据内容来进行动态调整。

　　布局就讲到这里，到现在为止我们已经可以进行网站页面的布局已经控件的布局了，后面我将对控件如何调用后台接口来进行讲述。