HTML 布局
 
网页布局对改善网站的外观非常重要。
 
请慎重设计您的网页布局。
 

 
在线实例
 
使用 
 

   元素的网页布局
  
如何使用 
  

    元素添加布局。
   
使用 
   
如何使用 
   
网站布局
   
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
   
大多数网站可以使用 
   

     或者 
    

    
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
    
HTML 布局 - 使用
    

      元素
     
div 元素是用于分组 HTML 元素的块级元素。
     
下面的例子使用五个 div 元素来创建多列布局：
     
实例
jQuery中文网(jquerycn.cn)主要的网页标题
    
    菜单
    
HTML
    
CSS
    
JavaScript内容在这里版权 © jquerycn.cn
    
尝试一下 »
    
上面的 HTML 代码会产生如下结果：
    

    
HTML 布局 - 使用表格
    
使用 HTML 
    
大多数站点可以使用 
    

      或者 
     

     
即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
     
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
     
实例
jQuery中文网(jquerycn.cn)
     
主要的网页标题
     菜单
     
HTML
     
CSS
     
JavaScript内容在这里版权 © jquerycn.cn
     
尝试一下 »
     
上面的 HTML 代码会产生以下结果：
     

     
HTML 布局 - 有用的提示
     
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。
     
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局，并优化它们)。
     
HTML 布局标签标签描述
     
定义文档区块，块级(block-level)
     
定义 span，用来组合文档中的行内元素。
    
   
  
 

 

 
html布局的常见类型有哪些？html中的布局方式有三种：流动布局、浮动布局以及层模型，html的这三种布局各有个的特点，本篇文章就给大家简单的说说html的三种布局方式的特点。
 
1、流动布局(html网页默认的布局方式)
 
特点：
 
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
 
2、内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
 
2、浮动布局(float)
 
特点：默认布局下，块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。
 
如下div{
 
width:200px;
 
height:200px;
 
border:2px red solid;
 
float:right;
 
}
 
3、层模型
 
特点：如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed
 
绝对定位(absolute)
 
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，
 
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
 
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
 
相对定位(relative)
 
如果想为元素设置层模型中的相对定位，需要设置position:relative(表示相对定位)，
 
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
 
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，
 
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
 
固定定位(fixed)
 
fixed：表示固定定位，与absolute定位类型类似，
 
但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。
 
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，
 
除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，
 
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，
 
这与background-attachment:fixed;属性功能相同。
 
注意：
 
在使用z-index属性的时候，只有元素使用了position属性的，才具有z-index属性。没有使用position的属性的元素是没有z-index属性的，设置了也没有用
 
相关文章推荐：
 
html+css布局的三种方式(自然布局/流动布局/定位布局)_HTML/Xhtml_网页制作
 
利用HTML和HTML实现常见的布局_html/css_WEB-ITnose

 
网站布局
 
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
 
大多数网站可以使用 
 

   或者 
  

  
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
  
HTML 布局 - 使用
  

    元素
   
div 元素是用于分组 HTML 元素的块级元素。
   
下面的例子使用五个 div 元素来创建多列布局：
   
实例
菜鸟教程(runoob.com)主要的网页标题
  
  菜单
  
HTML
  
CSS
  
JavaScript内容在这里版权 ? runoob.com
  
尝试一下 ?
  
上面的 HTML 代码会产生如下结果：
  

  
HTML 布局 - 使用表格
  
使用 HTML 
  
大多数站点可以使用 
  

    或者 
   

   
即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
   
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
   
实例
菜鸟教程(runoob.com)
   
主要的网页标题
   菜单
   
HTML
   
CSS
   
JavaScript
   
内容在这里
版权 ? runoob.com
   
尝试一下 ?
   
上面的 HTML 代码会产生以下结果：
   

   
HTML 布局 - 有用的提示
   
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。
   
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局，并优化它们)。
   
HTML 布局标签
   
标签描述
   
定义文档区块，块级(block-level)
   
定义 span，用来组合文档中的行内元素。
  
 

一、HTML布局元素是什么？
 
     html的一些常见的元素有div、span、a、b、em 、h1--h6、input、textare、li 、ul、br等等，这些元素标签上都有着自己的默认的display属性，不同的display属性值有不同的
 
     用处，对于布局元素来说主要分为三种inline(内联元素)、block（块状元素）、inline-block（内联块状元素）
 
二、三种布局元素的说明
 
     1、inline(内联元素)：
 
           常见的内联元素有:span、a、b、string、input、textarea等，他们本身的属性是display：inline;
 
           和其他行内元素从左到右的在一行上面显示，不能够直接设置元素的宽啊高啊等相关属性，但可以设置padding与margin的左右边距值，上下也没用。
 
           他的宽高是由他本身内容决定的，并且内联元素中只能放文本或其他内联元素；
 
     2、block(块状元素)：
 
          常见的内联元素有:div、p、h1--h6、ol、ul、li、table等，他们本身的属性是display：block;
 
          独占一行，每个元素都是会从新的一行开始，从上到下排布，支持css的高宽属性，支持padding与margin的所有属性；
 
          在不设置宽度的情况下，块状元素的宽度是他父级元素的宽度，不设置高度的情况下，他的高度是他本身内容的高度；
 
    3、inline-block（内联块状元素）
 
         结合了inline与block的一些特点，使元素变成行内元素，拥有行内元素的特性。又可以改变他的宽高与padding、margin等css属性，但又不独占一行，从左到右显示
 
 
                                                                                         （inline与block的简单展示）
 
三、三种布局元素的适用场景
 
      1、内联元素适合，不指定宽高，宽高由内容指定。2、块状元素合适，指定宽高，占满一行的时候。3、内联块状元素适合，指定宽高，不占满一行的时候。