小技巧

css 长度计算-calc

height: calc(100vh - 80px);

如何让浏览器支持小字体

将文字缩放显示

使用z-index设置元素堆叠顺序

z-index:100;

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

元素可拥有负的z-index 属性值。
Z-index 仅能在定位元素上奏效。

使用flex布局解决圣杯布局问题

方式一：子元素中左右盒子设置固定宽高,中间子盒子利用flex: 1瓜分父元素留下来的空间。
方式二：完全利用flex属性设置子元素份额，中间所占份额最多

CSS 选择器及优先级

选择器

id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)

优先级

!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高；样式表的来源相同时：

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

盒模型

什么是盒模型?

盒模型.webp

盒模型包含了margin（外边距）、border（边框）、padding（内边距）、content（内容）这四个部分。

Margin(外边距) ：清除边框外的区域，外边距是透明的（可以为负值）。

Border(边框) ：围绕在内边距和内容外的边框。

Padding(内边距) ：清除内容周围的区域，内边距是透明的（不允许负值）。

Content(内容) ：盒子的内容，显示文本和图像。

所有HTML元素都可以看作盒子。

图片、表单元素一律看作是文本，它们并不是盒子，因为一张图片里面并不能放东西，它自己就是自己的内容。

padding与margin有什么不同？

作用对象不同：padding作用于自生， margin作用于外部。

常规盒模型

常规盒模型.webp

width = content
总宽度 = margin + border + padding + width

怪异盒模型/IE盒模型

怪异盒模型.webp

width = content + border + padding
总宽度 = margin + width

css设置标准模型：Box-sizing:context-box (也是浏览器默认的盒模型)；

css设置Ie模型：box-sizing:border-box; 设置box-sizing:inherit;表示继承父元素的 box-sizing 值。

设置盒模型边框

border-style: solid;  //边框类型  solid-实线 dashed-虚线
border-color: #ffffff;  //边框颜色
border-width: 2px;    //边框宽度

border-left: 100px solid transparent;//使用transparent隐藏边框

border-radius: 10%;//设置圆角

获取盒模型对应的宽和高

1) dom.style.width/height【只能取到内联元素】
2) dom.currentStyle.width/height【只有IE支持】
3) document.getComputedStyle(dom,null).width/height  
4) dom.getBoundingClientRect().width/height 

5) dom.offsetWidth/offsetHeight【常用】

盒模型外边距重叠

外边距重叠是指两个【垂直】【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）

只有普通文档流中块框的垂直外边距才会发生外边距合并。
行内框、浮动框或绝对定位之间的外边距不会合并。

嵌套块（父子）元素垂直外边距的合并

即：父子元素上外边距合并

对于两个嵌套关系的块元素，如果父元素没有上内边距或上边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

『解决办法』

1、为父元素定义上外边框或上内边距。
2、为父元素添加overflow:hidden（隔离大法）。
3、子元素或父元素设置display:inline-block。即触发BFC
4、父元素加前置内容（::before，即在父元素的前面添加伪元素）。（推荐）

相邻块（兄弟）元素垂直外边距的合并（外边距塌陷）

当上下相邻的两个块元素相遇时，如果

上面的元素有下外边距margin-bottom，
下面的元素有上外边距margin-top，

则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。 『解决办法』

1）为了达到想要的间距，最好在设置margin-top/bottom值时统一设置上或下；

2）通过触发BFC解决。

BFC

------块级格式化上下文

简单的说:BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

怎样触发BFC

常见的能够能够触发BFC的CSS属性：

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的特性

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠（盒模型高度塌陷的罪魁祸首）
计算BFC的高度时，浮动元素也参与计算（所以可以使用BFC清除浮动）

BFC解决了的问题

使用BFC清除浮动

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
    </div>
    <style>
        #box{
            background-color: grey;

            /* 在父元素触发BFC清除浮动 */
            display: inline-block;
        }
        #box div{
            margin: 20px;
            background-color: green;
            height: 100px;
            width: 100px;

            /* 设置子元素浮动 */
            float: left;
        }
    </style>
</body>

解决外边距重叠问题

解决父子元素间边距塌陷：

<body>
    <div id="box">
        <div>1</div>
    </div>
    <style>
        #box{
            background-color: grey;
            height: 200px;
            width: 200px;
        }
        #box :nth-child(1){
            margin: 50px;
            background-color: green;
            height: 100px;
            width: 100px;

            /* 使父元素或子元素其中一个触发BFC，解决外边距塌陷问题 */
            display: inline-block;
        }
    </style>
</body>

解决兄弟元素间边距合并：

<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
    </div>
    <style>
        #box{
            background-color: grey;
        }
        #box div{
            margin: 20px;
            background-color: green;
            height: 100px;
            width: 100px;
        }
        #box :nth-child(1){
            /* 让其中一个元素触发BFC */
            display: inline-block;
        }
    </style>
</body>

IFC

------内联(行级)格式上下文

参考

盒模型盒模型 BFC

居中

水平居中

行内元素

设置text-align: center;属性

块级元素

设置margin: 0 auto;属性

使用flax布局
display: flex;
justify-content: center;

将子元素设置为浮动元素

父元素：
width:fit-content;
margin:0 auto;

子元素：
float: left;

绝对定位+margin负值：
position: absolute; //绝对定位
left: 50%;
margin-left: -0.5*宽度

绝对定位+变形：
position: absolute;
left: 50%;
transform: translate(-50%);

绝对定位+margin设置auto：
position: absolute; //绝对定位
left: 0; 
right: 0; 
margin: 0 auto;

垂直居中

行内元素

在单行文本中设置子元素 line-height 值等于父元素 height 值。

块级元素

使用display: table布局
display: table;

使用flax布局
display: flex;
align-items: center;

绝对定位+margin负值：
position: absolute; //绝对定位
top: 50%;
margin-top: -0.5*宽度

绝对定位+变形：
position: absolute;
top: 50%;
transform: translate(0,-50%);

绝对定位+margin设置auto：
position: absolute; 
top: 0; 
bottom: 0; 
margin: auto 0;

小技巧

快速实现水平垂直居中：父元素设置使用flex布局，子元素设置margin:auto;

参考

居中方法

前端开发常用单位

px-像素

在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素。
不会随着视口大小的变化而变化, 像素是一个相对固定的单位

%-百分比

永远都是以当前元素的父元素作为参考进行计算。
百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)

不能用百分比设置元素的 border

em

相对于【最近元素字体】大小的单位

em 是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

rem

相对于【根元素字体】大小的单位

rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)

vh

是一个相对于网页视口高度的单位,1vh 就占用视口高度的百分之一。

vm

是一个相对于网页视口宽度的单位,1vw 就占用视口宽度的百分之一。

消灭元素，使其不显示

opacity

参数：0-1之间的小数，0为全透明
设置透明度-包括文字等所以内容的透明度。

附：通过rgba设置背景透明度：background: rgba(245,245,245,0.5);

visibility

元素被隐藏，但是会被渲染不会消失，占据空间

display

使用display属性确定素的类型。

传送门：CSS 属性篇(七)：Display属性

display:none

将元素与其子元素从普通文档流中移除，移除和反移除过程会触发重排。

对比

结构：

display:none: 会让元素完全从dom中消失，渲染的时候不占据任何空间, 不能点击（即：无法进行 DOM 事件监听）
visibility: hidden:不会让元素从dom中消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从dom中消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：

display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：

display:none : 修改元素会造成文档重排,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ：修改元素会造成重绘，性能消耗较少

CSS定位属性-position

四种定位类型

.静态定位-static

static为position属性的默认值，在不设置position属性时就是static；
元素按照标准流进行排布；
对于static，设置left、right、top、bottom是没有任何效果的；

相对定位-relative

元素按照标准流进行排布；
定位参照对象是元素自己原来的位置，可以通过left、right、top、bottom来进行位置调整；
相对定位应用场景：在不影响其它元素位置的前提下，可以对当前元素位置进行微调；

绝对定位-absolute

元素脱离标准流（脱标）；
定位参照最近一级拥有定位的祖先元素，可以通过left、right、top、bottom来进行位置调整；
如果一直往上层元素找不到有定位的元素，那么最终的参照对象为视口；
拥有定位的祖先元素：position的值不为static的元素；子元素设置为绝对定位，父元素设置为相对定位，达到子元素位置依赖父元素的效果。

固定定位-fixed

元素脱离标准流（脱标）；
定位参照对象是视口（即：浏览器所能展示的区域，viewport），可以通过left、right、top、bottom来进行位置调整；
当画布滚动时，元素的位置是固定不动的；

浮动相关

什么是浮动

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素

浮动最初设计只是用来实现文字环绕排版的。浮动存在盖住普通元素的风险。

浮动实现：float: left;

浮动的三个特点很重要。

脱离文档流。
向左/向右浮动直到遇到父元素或者别的浮动元素。
浮动会导致父元素高度坍塌。

使用场景

文字环绕效果

清除浮动

失败的清除方法：

将父级也设置成浮动：虽然解决了父元素高度坍塌问题，但是父级元素上层受到了影响，又塌了一个。
将父级元素设置为绝对定位：父元素绝对定位脱离了文档，影响了整体布局。
给父级设置overflow:hidden：出现了滚动条，过大的内容被隐藏。
给父级设置对应的高度：如果子元素不定宽，就显得非常不灵活。

成功的清除方法：

末尾增加空元素进行clear（空元素中添加：clear: both;）：缺点是多了一个标签。
给父级添加伪元素进行clear：使用伪元素代替了空div元素。
利用BFC清除浮动：触发BFC达到清除浮动的效果（让父元素触发BFC，一般将父元素设置成行内块级元素）。

伪类和伪元素

伪类表示被选择元素的某种状态，例如:hover。
伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after。

核心区别在于，是否创造了新的元素。

常用伪类

状态类伪类：

link-----正常状态
visited-----点击后
hover-----悬停时
active-----被激活时
focus-----聚焦时

结构类伪类：

p:not(.p1) {} -----表示不是.p1的其他元素

p:first-child {} -----表示第一个
p:last-child{} -----表示最后一个

p:only-child{} -----表示只有一个

p:nth-child(n){} -----表示第n个
p:nth-last-child(3){} -----表示倒数第n个

注：在:前加标签名称表示，满足:的条件且属于此类标签的元素。（:前可无标签名称）

表单类伪类：

input:checked{}  -----选中
input:disabled{} -----禁用
input:enabled{}  -----启用

常用伪元素

::before 在目标元素之前添加伪元素。
::after 在目标元素之后添加伪元素。

content 属性

对于伪元素，content 属性是最主要的，默认情况下，内容设置为无。如果不添加该属性则相当于没有伪元素。

content 属性功能强大，可以添加各种类型的内容，使用这个属性可以在伪元素上显示任何东西，可以是文本、图片等。

content 默认显示为 display:inline ，而不是 display:block；
content 为字符串时，用户将无法选择，意味着用户将无法使用鼠标选择复制它。

p::before { 
    display:block; //默认显示为 `display-inline`
    content: ""; //即使不想添加任何文本，`content` 属性仍然需要使用 `""`
    
    width: 100%; 
    height: 100%; 
    background-color: #ff0000; 
    }

行内元素和块级元素

行内元素

常见的行内元素： disply：inline

<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo>

块级元素

常见的块级元素： display：block

<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video>

区别

是否换行

默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
行内元素在一行内排不下的时候才会换行，行内元素的宽度随着元素的内容而变化，块级元素右外边距默认撑满。宽高设置
块级元素可以设置 width, height属性（块级元素即使设置了宽度，仍然独占一行）。
行内元素设置width, height无效。内外边距
行内元素竖直方向的外边距无效

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

p标签中不能嵌套div标签。

行内块级元素

display ：inline-block

可设置宽高外边距，不独占一行。

在需要触发BFC的地方，不如就把其设置成为行内块级元素吧，简洁高效。

script 标签中 defer 和 async 的区别？

script标签的三种解析模式

在 HTML 中会遇到以下三类 script：

<script src='xxx'></script>
<script src='xxx' async></script>
<script src='xxx' defer></script>

没有属性-同步解析

遇到就同步发送请求，然后立即执行

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。

script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。

有async属性-异步解析-JS无序执行

遇到就异步发送请求，请求回来后立即执行

当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析。
如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就啥事没有，立即执行 JS 代码。
所以 async 是不可控的，因为执行时间不确定，你如果在异步 JS 脚本中获取某个 DOM 元素，有可能获取到也有可能获取不到。而且如果存在多个 async 的时候，它们之间的执行顺序不确定，完全依赖于网络传输结果，谁先到执行谁。

有defer属性-异步解析-JS有序执行

遇到就异步发送请求，请求回来后不会立即执行，而是等待HTML解析完毕再执行

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待HTML解析完毕再执行。
如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。TML 解析完毕再执行 JS 代码。

总结

script 标签	JS 执行顺序	是否阻塞解析 HTML
`<script>`	在 HTML 中的顺序执行	阻塞
`<script async>`	网络请求返回顺序执行	可能阻塞，也可能不阻塞
`<script defer>`	在 HTML 中的顺序执行	不阻塞

HTML语义化

为什么要使用HTML语义化标签

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。
有利于不同设备的解析满是div的页面这些设备如何区分那些是主要内容优先阅读？
有利于构建清晰的机构，有利于团队的开发、维护。

使用注意

尽可能少的使用无予语义的标签div和span；
在语义不明显时，既可以用div又可以用p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置；
需要强调的文本，可以包含在strong或者em标签中；
使用表格时，标题要用caption，表头要用thead，主体部分用tbody包围，尾部用tfoot包围；表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且为input设置id属性。

HTML5新增的语义化标签

header元素：header 元素代表“网页”或“section”的页头。
footer元素：footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
hgroup元素：
nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

常用布局实现

实现两栏布局

flex布局实现

<body>
    <div id="box">
        <div></div>
        <div></div>
    </div>
    <style>
        #box{
            display: flex;
            justify-content: space-between;
        }
        #box div{
            height: 200px;
        }
        #box :nth-child(1){
            width: 200px;
            background-color: aqua;
        }
        #box :nth-child(2){
            background-color: chocolate;
            flex: 1;
        }
    </style>
</body>

grid布局实现

<body>
    <div id="box">
        <div></div>
        <div></div>
    </div>
    <style>
        #box{
            display: grid;
            grid-template-columns: 200px auto;
            grid-template-rows: auto;
            grid-template-areas: "div1 div2";
        }
        #box div{
            height: 200px;
        }
        #box :nth-child(1){
            grid-column: div1;
            background-color: aqua;
        }
        #box :nth-child(2){
            grid-column: div2;
            background-color: chocolate;
        }
    </style>
</body>

实现圣杯布局

flex布局实现

<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <style>
        #box{
            display: flex;
            justify-content: space-between;
        }
        #box div{
            height: 200px;
        }
        #box :nth-child(1){
            width: 200px;
            background-color: aqua;
        }
        #box :nth-child(2){
            background-color: chocolate;
            flex: 1;
        }
        #box :nth-child(3){
            width: 200px;
            background-color: bisque;
        }
    </style>
</body>

grid布局实现

<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <style>
        #box{
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: auto;
            grid-template-areas: "div1 div2 div3";
        }
        #box div{
            height: 200px;
        }
        #box :nth-child(1){
            grid-column: div1;
            background-color: aqua;
        }
        #box :nth-child(2){
            grid-column: div2;
            background-color: chocolate;
        }
        #box :nth-child(3){
            grid-column: div3;
            background-color: bisque;
        }
    </style>
</body>

HTML5相关

音视频

<div>
    <h3>一个媒体源的写法</h3>
    <audio src="......" controls ></audio>
    <video src="......" controls></video>
</div>

<div>
    <h3>多个媒体源的写法</h3>
    <audio controls>
        <source src="......">
        <source src="......">
    </audio>
    <video controls>
        <source src="......">
        <source src="......">
    </video>
</div>

标签的属性

width/height-----视频显示区域的宽高-视频标签独有
controls-----显示用户控制界面
poster-----视频封面-视频标签独有
autoplay-----自动播放
muted-----是否静音
loop-----循环播放

自动播放在IE下可以正常使用，chrome，edge只有在静音下可以使用。

音视频对象的方法

play()----播放
psuse()-----暂停
load()-----重新加载

音视频标签自带事件

在媒体不同状态，或者在用户交互中触发的一些事件。。。。。。。

参考

H5-Video和audio标签（音视频）

新增表单功能

表单控件属性

placeholder： 设置提示文字；用于文本输入类的表单控件（如文本输入框、密码输入框、文本域等）。
autofocus： 自动获取焦点，无需给值；适用于所有的表单控件。
autocomplete： 设置表单控件是否记录输入历史；值是 on 后者 off；适用于文本输入类的表单控件。
required： 设置该表单控件必填或必选；无需设置值；如果设置了 required 又没有填写，提交的时候会提示且无法提交。适用于除按钮外其他表单控件。
pattern： 表单校验，指定正则验证表单控件的格式，适用于文本输入类表单控件。当表单提交的时候进行验证，验证不通过会提示且无法提交表单；空的输入框不会验证，往往与 required 配合。
multiple: multiple属性用于设置input元素是否可以有多个值。

input的type属性值

文本输入框
- email： 邮箱。
- url： URL网址。
- number： 数字；可以设置数 max、min、step。
- search： 搜索框。
- tel： 电话号码；移动端弹出数字键盘。
范围选择框
- range 范围选择框
<input type="range" name="range" value="80" max="100" min="0"/>
颜色选择框
- color 颜色选择框

<input type="color" name="color">

时间日期选择类
- date： 选择日期（年月日）。
- month： 选择哪一年哪一月。
- week： 选择哪一年的第几周。
- time： 选择时间（时分）。
- datetime-local： 选择日期和时间。
form 标签新增属性 (一般不使用)
- novalidate 属性： 如果给 form 标签设置了该属性，表单提交的时候不再进行验证；该属性无需给值。

HTML/CSS---杂记

小技巧

css 长度计算-calc

如何让浏览器支持小字体

使用z-index设置元素堆叠顺序

使用flex布局解决圣杯布局问题

CSS 选择器及优先级

选择器

优先级

盒模型

什么是盒模型?

常规盒模型

怪异盒模型/IE盒模型

设置盒模型边框

获取盒模型对应的宽和高

盒模型外边距重叠

嵌套块（父子）元素垂直外边距的合并

相邻块（兄弟）元素垂直外边距的合并（外边距塌陷）

BFC

怎样触发BFC

BFC的特性

BFC解决了的问题

使用BFC清除浮动

解决外边距重叠问题

IFC

参考

居中

水平居中

垂直居中

小技巧

参考

前端开发常用单位

px-像素

%-百分比

em

rem

vh

vm

消灭元素，使其不显示

opacity

visibility

display

display:none

对比

结构：

继承：

性能：

CSS定位属性-position

四种定位类型

.静态定位-static

相对定位-relative

绝对定位-absolute

固定定位-fixed

浮动相关

什么是浮动

使用场景

清除浮动

失败的清除方法：

成功的清除方法：

伪类和伪元素

常用伪类

状态类伪类：

结构类伪类：

表单类伪类：

常用伪元素

content 属性

行内元素和块级元素

行内元素

块级元素

区别

行内块级元素

script 标签中 defer 和 async 的区别？

script标签的三种解析模式

没有属性-同步解析

有async属性-异步解析-JS无序执行

有defer属性-异步解析-JS有序执行

总结

HTML语义化

为什么要使用HTML语义化标签

使用注意