HTML 布局

HTML 布局元素

网站通常以多列(如杂志或报纸)显示内容。

HTML5提供了定义网页不同部分的新语义元素：

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

HTML 布局技术

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

• HTML 表格(不推荐)
• CSS float(浮动)
• CSS framework(框架)
• CSS flexbox

哪一个选择？

HTML表格

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

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

CSS 框架

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

CSS 浮动

使用CSS浮动属性执行整个Web布局是很常见的。Float易于学习 – 您只需要记住浮动和清除属性的工作原理。 缺点:浮动元素与文档流相关联，这可能会损害灵活性。在我们的CSS 浮动与清除浮动章节中了解有关float的更多信息。

CSS Flexbox

Flexbox是CSS3中的一种新布局模式。

当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，使用flexbox可确保元素的行为可预测。 缺点：在IE10及更早版本中不起作用

在我们的 CSS Flexbox章节中了解有关flexbox的更多信息 。

亲自试一试