HTML 布局

• 

  HTML布局

  

  尝试一下
• 

  HTML布局元素

  网站通常以像杂志报纸那样的排版来设计行列之间的显示。 HTML5提供了定义网页不同部分的新语义元素：

  • <header> - 定义文档或小节的标题
  • <nav> - 定义导航链接的容器
  • <section> - 定义文档中的部分
  • <article> - 定义一个独立的自包含文章
  • <aside> - 定义除内容之外的内容（如侧边栏）
  • <footer> - 为文档或部分定义页脚
  • <details> - 定义其他详细信息
  • <summary> - 定义<details>元素的标题
• 

  HTML布局技术

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

  • HTML表格（不推荐）
  • CSS浮动属性
  • CSS flexbox
  • CSS框架

  我们要选哪一个呢？

  HTML表格

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

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

  CSS框架

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

  CSS浮动

  使用CSS浮动属性执行整个Web布局是很常见的。浮动易于学习，您只需要记住浮动和清除属性的工作原理。 缺点：浮动元素与文档流相关联，这可能会损害灵活性。你可以在CSS教程的相关章节学习。 本章开始那个例子就用了CSS浮动来实现。

  CSS Flexbox

  Flexbox是CSS3中的一种新布局模式。当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，使用flexbox可确保元素的行为可预测。 缺点：在IE10及更早版本中不起作用。可以在我们的CSS教程的相关章节学习。