HTML 语义化
根据结构化的内容，选择合适的标签。
为什么要做到语义化？
“合适的标签”是内容表达的高度概括，这样浏览器爬虫或者任何机器在读取 HTML 时，都能更好地理解，进而解析效率更高。这样带来的收益如下：
- 有利于 SEO
- 开发维护体验更好
- 用户体验更好（如使用 alt 标签用于解释图片信息）
- 更好的 accessibility，方便任何设备解析（如盲人阅读器）
if (导航) { return <nav /> } else if (文稿内容、博客内容、评论内容...包含标题元素的内容) { return <article /> } else if (目录抽象、边栏、广告、批注) { return <aside /> } else if (含有附录、图片、代码、图形) { return <figure /> } else if (含有多个标题或内容的区块) { return <section /> } else if (含有段落、语法意义) { return <p /> || <address /> || <blockquote /> || <pre /> || ... } else { return <div /> }
语义化中的Microformats
Microformats，翻译为微格式，是 HTML 标记某些实体的小模式，这些实体包括人、组织、事件、地点、博客、产品、评论、简历、食谱等。它们是在 HTML 中嵌套语义的简单协议，且能迅速地提供一套可被搜索引擎、聚合器等其他工具使用的 API。
BFC 背后的布局
BFC 是 Block Formatting Context 的简写，我们可以直接翻译成“块级格式化上下文”。它会创建一个特殊的区域，在这个区域中，只有 block box 参与布局。而 BFC 的一套特点和规则就规定了在这个特殊的区域中如何进行布局，如何进行定位，区域内元素的相互关系和相互作用。这个特殊的区域不受外界影响。
block box 是指 display 属性为 block、list-item、table 的元素。
相应地，我们有 inline box，它是指 display 属性为 inline、inline-block、inline-table 的元素。
如何形成 BFC
- 根元素或其他包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML 表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
- 具有 overflow 且值不是 visible 的块元素
- display: flow-root 的元素
- column-span: all 的元素
关键要点：
- float的值不为none
- overflow的值不为visible
- display的值为table-cell、tabble-caption和inline-block之一
- position的值不为static或则releative中的任何一个
BFC 决定了什么
- 内部的 box 将会独占宽度，且在垂直方向，一个接一个排列
- box 垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象
- 每个 box 水平方向上左边缘，与 BFC 左边缘相对齐，即使存在浮动也是如此
- BFC 区域不会与浮动元素重叠，而是会依次排列
- BFC 区域内是一个独立的渲染容器，容器内元素和 BFC 区域外元素不会形成任何干扰
- 浮动元素的高度也参与到 BFC 高度的计算当中
关键要点：
- 边距折叠
- 清除浮动
- 自适应多栏布局
看一个case：
<style> body { width: 600px; position: relative; } .left { width: 80px; height: 150px; float: left; background: blue; } .right { height: 200px; background: red; } </style> <body> <div class="left"></div> <div class="right"></div> </body>
得到如下布局：
根据 BFC 布局规则：“每个 box 水平方向上左边缘，与 BFC 左边缘相对齐。即使存在浮动也是如此”，因此 .left 和 .right 的左边相接触。
再想想 BFC 布局规则：“BFC 区域不会与浮动元素重叠，而是会依次排列”，因此我们可以使 .right 形成 BFC，来实现自适应两栏布局。
.right { overflow: hidden; }
可以得到：
再看一个case：
<style> .root { border: 5px solid blue; width: 300px; } .child { border: 5px solid red; width:100px; height: 100px; float: left; } </style> <body> <div class="root"> <div class="child child1"></div> <div class="child child2"></div> </div> </body>
因为 .child 为浮动元素，因此造成了“高度塌陷”现象，.root 的高度为 0：
BFC 规则：“浮动元素的高度也参与到 BFC 高度的计算当中”，因此使 .root 形成 BFC，就能解决高度塌陷的问题：
.root { overflow: hidden; }
再看一个case：
<style> p { color: blue; background: red; width: 400px; line-height: 100px; text-align:center; margin: 40px; } </style> <body> <p>paragraph 1</p> <p>paragraph 2</p> </body>
BFC 规则：“box 垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象”。两段之间的垂直距离为 40px。
我们可以在 p 标签再包裹一个元素，并触发该元素形成一个BFC。那么这两个 p 标签，不再属于同一个 BFC，从而解决问题。
<style> p { color: blue; background: red; width: 400px; line-height: 100px; text-align:center; margin: 40px; } .wrapper { overflow: hidden } </style> <body> <p>paragraph 1</p> <div class="wrapper"> <p>paragraph 2</p> </div> </body>
实现居中的方式
仅适用于居中元素定宽高
- absolute + 负 margin
.wp { position: relative; } //绝对定位的百分比是相对于父元素的宽高 .box { position: absolute;; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
- absolute + margin auto
.wp { position: relative; } .box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
- absolute + calc
.root { position: relative; } .textBox { position: absolute;; top: calc(50% - 50px); left: calc(50% - 50px); }
- absolute + transform
.wp { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- lineheight
//把 box 设置为行内元素，通过 text-align 也可以做到水平居中，同时通过 vertical-align 做到垂直方向上的居中 .wp { line-height: 300px; text-align: center; font-size: 0px; } .box { font-size: 16px; display: inline-block; vertical-align: middle; line-height: initial; text-align: left; /* 修正文字 */ }
- table
<table> <tbody> <tr> <td class="wp"> <div class="box">test</div> </td> </tr> </tbody> </table> .wp { text-align: center; } .box { display: inline-block; }
- css-table
.wp { display: table-cell; text-align: center; vertical-align: middle; } .box { display: inline-block; }
- flex
.wp { display: flex; justify-content: center; align-items: center; }
- grid
.wp { display: grid; } .box { align-self: center; justify-self: center; }