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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了侯策《前端开发核心知识进阶》读书笔记——html与css要点，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4753字，纯文字阅读大概需要7分钟。

内容图文

HTML 语义化 

根据结构化的内容，选择合适的标签。

为什么要做到语义化？

“合适的标签”是内容表达的高度概括，这样浏览器爬虫或者任何机器在读取 HTML 时，都能更好地理解，进而解析效率更高。这样带来的收益如下：

  • 有利于 SEO
  • 开发维护体验更好
  • 用户体验更好（如使用 alt 标签用于解释图片信息）
  • 更好的 accessibility，方便任何设备解析（如盲人阅读器）
            if
             (导航) {
  
            return <nav />
}
elseif (文稿内容、博客内容、评论内容...包含标题元素的内容) {
  return <article />
}
elseif (目录抽象、边栏、广告、批注) {
  return <aside />
}
elseif (含有附录、图片、代码、图形) {
  return <figure />
}
elseif (含有多个标题或内容的区块) {
 return <section />
}
elseif (含有段落、语法意义) {
  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;
}

 

原文：https://www.cnblogs.com/fmyao/p/12815681.html

内容总结

以上是互联网集市为您收集整理的侯策《前端开发核心知识进阶》读书笔记——html与css要点全部内容，希望文章能够帮你解决侯策《前端开发核心知识进阶》读书笔记——html与css要点所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1322567.html

来源：【匿名】