侯策《前端开发核心知识进阶》读书笔记—

侯策《前端开发核心知识进阶》读书笔记——html与css要点

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;
}