HTML布局元素

 

　　nav

 

　　定义导航链接的容器

 

　　section定义文档中的节article定义独立的自包含文章aside定义内容之外的内容（比如侧栏）footer定义文档或节的页脚details定义额外的细节summary

 

　　定义 details 元素的标题

 

　　HTML 布局 - 使用表格

 

　　使用HTML

 

　　标签是创建布局的一种简单的方式。

 

　　HTML布局技术

 

　　创建多列布局有四种不同的方法。每种方式都有其优点和缺点：

 

　　HTML表格（不推荐）

 

　　CSS浮动属性

 

　　CSS flexbox

 

　　CSS框架

 

　　我们要选哪一个呢？

 

　　HTML表格

 

　　元素不是设计为布局工具！

 

　　元素的目的是显示表格数据。所以，不要使用表格进行页面布局！它们会给你的代码带来麻烦。想象一下几个月后重新设计网站会有多难。

 

　　提示：请勿使用表格进行页面布局！

 

　　CSS框架

 

　　如果要快速创建布局，可以使用Bootstrap等框架。

 

　　CSS浮动

 

　　使用CSS浮动属性执行整个Web布局是很常见的。浮动易于学习，您只需要记住浮动和清除属性的工作原理。

 

　　缺点：浮动元素与文档流相关联，这可能会损害灵活性。你可以在CSS教程的相关章节学习。 本章开始那个例子就用了CSS浮动来实现。

 

　　CSS Flexbox

 

　　Flexbox是CSS3中的一种新布局模式。当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，使用flexbox可确保元素的行为可预测。

 

　　缺点：在IE10及更早版本中不起作用。可以在我们的CSS教程的相关章节学习。

 

　　HTML 布局 - 有用的提示

 

　　Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

 

　　Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。