HTML

1.1 HTML标签语义化

1. 增加代码可读性
2. 利于SEO

1.2 src与herf的区别

src表示引入，指向的内容会嵌入到文档当前标签所在位置。常用于js脚本、img图片。
href表示引用，指向网络资源所在位置（超链接）。

1.3 script标签的async和defer

script：会阻碍HTML解析，只有下载好并执行完毕才会继续解析HTML
async script：解析HTML过程中脚本异步下载，下载完成后立即执行。下载过程异步并不阻碍HTML解析，执行过程阻碍HTML解析
defer script：完全不阻碍HTML解析，下载过程是异步的，下载完成不会立即执行，等到HTML解析完之后按顺序执行

css加载会阻塞DOM解析和渲染吗？
1. css加载不会阻塞DOM树的解析
2. css加载会阻塞DOM树的渲染
3. css加载会阻塞后面的js语句的执行

CSS

1.1 CSS盒模型

盒模型的构成：content+padding+border+margin

盒模型分为两种，标准盒模型和IE(替代)盒模型

两种盒模型的区别在于，其计算的宽度、高度方式不同

标准盒模型：只包含content
IE(替代)盒模型：content + padding + border

通过box-sizing来设置元素的盒模型类型

box-sizing: content-box：标准盒模型
box-sizing: border-box：IE(替代)盒模型

1.2 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选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1.3 BFC

什么是BFC？

W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context，即块级格式上下文）。

BFC可以理解为一个元素创建的BFC，那么它就是一个独立的容器，容器内有自己的布局规则，且不会影响的外面元素的布局。

如何触发BFC

根元素（<html>）
浮动元素（元素的float不是none）
绝对定位元素（元素的position为absolute或fixed）
行内块元素（元素的display为inline-block）
表格单元格（元素的display为table-cell,HTML表格单元格默认为该值）
表格标题（元素的display为table-caption,HTML表格标题默认为该值）
匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group(分别为HTML table、row、tbody、thead、tfoot的默认属性)或inline-table）
overflow值不为visible的块元素
网格元素（display为grid或inline-grid元素的直接子元素）

BFC的布局规则

BFC垂直方向边距重叠
BFC的区域不会与浮动元素的box重叠
BFC是一个独立的容器，外面的元素不会影响里面的元素
计算BFC的高度时，浮动元素也参与计算高度

BFC的作用

避免外边距重叠

<div class="cube"></div>
<div class="cube"></div>

.cube{
    width: 100px;
    height: 100px;
    background: blue;
    margin: 100px;
}

外边距_1.png 两个外边距都为100px的两个box，实际上两个box的中间距离并不是200px。而是100px，这是因为块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，其大小为单个边距的最大值，如果两个值相等，则仅为其中一个，这就是外边距重叠现象。

解决办法：利用BFC 将两个box放置在不同的container中，利用overflow:hidden触发container的BFC。

<div class="container">    
    <div class="cube"></div>
</div>
<div class="container">
    <div class="cube"></div>
</div>

.container{
    overflow: hidden;
}
.cube{
    width: 100px;
    height: 100px;
    background: blue;
    margin: 100px;
}

外边距_2.png

清除浮动 防止浮动导致父元素高度塌陷

<div class="container">    
    <div class="cube"></div>
</div>

.container{
    border: 1px solid red;
}
.cube{
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
}

高度塌陷_1.png 因为我们对子元素添加了浮动，使它脱离了文档流，所以只剩下2px的边距高度。通过overflow: hidden属性触发父容器的BFC，父容器将包裹着子容器，达到了清除浮动的作用

.container{
    border: 1px solid red;
    overflow: hidden;
}
.cube{
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
}

高度塌陷_2.png

防止元素被浮动元素覆盖

<div class="floatDiv"></div>
<div class="normalDiv"></div>

.floatDiv{
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}
.normalDiv{
    width: 200px;
    height: 200px;
    background-color: red;
}

浮动覆盖_1.png 可以看到，设置了浮动的元素覆盖了没有设置浮动的元素。如果想要避免覆盖可以触发正常元素的BFC属性。

.normalDiv{
    width: 200px;
    height: 200px;
    background-color: red;
    overflow: hidden;
}

浮动覆盖_2.png

1.4 inline、block和inline-block

行内元素：与其他元素在同一行上，高度为内容的高度，宽高和marigin/padding不可设置
块级元素：独占一行，宽高和margin/padding可设置
行内块元素：与其他的行内块级元素会排列在同一行，宽高和margin/padding可设置

块级元素可以嵌入行内元素或者块级元素
行内元素只能容纳行内元素或者行内块元素

1.5 px、em、rem、%

px：绝对单位，表示像素
em：相对单位，表示相对于父元素的大小
rem：相对单位，表示相对于根节点的大小
%：相对于父元素的宽高

1.6 position 定位

static：默认值。没有定位
fixed：固定定位。相对于浏览器窗口的位置，不占据空间
relative：相对定位。相对于自身的起点，仍占据原来的空间。
absolute：绝对定位。相对于最近的已定位的父元素。脱离文档流，不占据空间。
sticky：粘性定位。依赖于用户的滚动，开始表现为relative（相对定位），当滚动出目标区域时，表现为fixed（固定定位）

1.7 transition、transform、animation的区别

transform：用作平移、缩放、旋转、倾斜等效果
transition：用作简单的动画过渡效果。无法对动画效果和关键帧等进行控制
animation：用作于复杂动画效果。可以设置动画的关键帧，产生暂停、变速等效果。

transition可以通过js或者hover等方式被动触发；
animation可以主动触发

1.8 flex布局

设置为flex布局的元素，称之为flex容器，它的所有子元素称之为flex项目，容器内存在两个轴，主轴和交叉轴，它们互相垂直，默认水平方向的轴为主轴。

flex容器上的属性

flex-direction：定义主轴的方向。有四个取值，row(默认) | row-reverse | column | column-reverse
    1. row：水平方向，起点在左端
    2. row-reverse：水平方向，起点在右端
    3. column：垂直方向，起点在上端
    4. column-reverse：垂直方向，起点在下端
    
flex-wrap：定义换行方式。有三个取值，nowrap(默认) | wrap | wrap-reverse
    1. nowrap：不换行
    2. wrap：换行，第一行在上方
    3. wrap-reverse：换行，第一行在下方
    
flex-flow：flex-direction和 flex-wrap的简写形式。 形如：<flex-direction> || <flex-wrap>

justify-content：定义项目在主轴上的排列方式。flex-start(默认) | flex-end | center | space-between | space-around
    1. flex-start：起始对齐
    2. flex-end：终端对齐
    3. center：居中
    4. space-between：两端对齐，项目之间间隔相等
    5. space-around：表示所有项目之间的距离相等
                    所以第一个项目与左边框的距离+最后一个项目与右边框的距离=项目之间的距离
                    项目与边框的距离为项目与项目之间的距离的一半。
                    
align-items：定义项目在交叉轴上的排列方式。flex-start | flex-end | center | baseline | stretch(默认)
    1. flex-start：起点对齐
    2. flex-end：终点对齐
    3. center：居中
    4. baseline：基线对齐
    5. stretch：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content：定义了多根轴线的对齐方式。flex-start | flex-end | center | space-between | space-around | stretch
    1. flex-start：与交叉轴的起点对齐
    2. flex-end：与交叉轴的终点对齐
    3. center：与交叉轴的中点对齐
    4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
    5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
    6. stretch：轴线占满整个交叉轴

flex项目上的属性

order：定义项目的排列顺序，数值越小越靠前。默认为0
flex-grow：定义项目的放大比例，默认为0。
flex-shrink：定义项目的缩小比例，默认为1。
flex-basis：代替宽度使用，默认为auto，即项目本来的大小。flex-basis的优先级比width高。
            当同时设置flex-basis和width时,flex-basis会定义item的大小
flex：为flex-grow、flex-shrink和flex-basis的缩写，默认为 0 1 auto
       flex：1 === flex: 1 1 0%，表示多个内容不同的项目平分容器
align-slef：允许单个项目有与其他项目不一样的对齐方式。
            默认值为auto。表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1.9 实现水平垂直居中

水平居中

行内元素：text-align:center
给定宽度的块级元素：
1. margin:0 auto
2. 使用绝对定位，父元素使用相对定位， left: 父元素width/2，margin-left:-子元素width/2
未给定宽度的块级元素：
1. 子元素设置为display:inline-block或display:inline，父元素设置为：text-align:center
2. 父元素相对定位，子元素绝对定位，left:50%; transform: translateX(-50%)
3. flex布局使用justify-content:center

垂直居中

行内元素:line-height
给定高度的块级元素：使用定位，设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);
未给定高度的块级元素：
利用css3新增属性transform: translateY(-50%);
flex方案: align-items: center;

水平垂直居中

flex：设置父元素为flex定位，justify-content: center; align-items: center;
定位：

设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: -元素宽度的一半px; margin-top: -元素高度的一半px;
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

实现两栏布局

固定区域浮动，自适应区域不设置宽度但设置margin

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.box{
    overflow:hidden
}
.left{
    float: left;
    width: 200px;
    height: 200px;
    background-color: grey;
}
.right{
    margin-left: 200px;
    height: 200px;
    background-color: lightgrey;
}

固定区域使用定位，自适应区域不设置宽度但设置margin

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.box{
    position: relative;
}
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: grey;
}    
.right{
    height: 200px;
    margin-left: 200px;
    background-color: lightgrey;
}

实现圣杯和双飞翼布局

圣杯布局

左右宽度固定，中间宽度自适应

利用flex

<div class="header">这里是头部</div>
<div class="container">
    <div class="left">左边</div>
    <div class="middle">中间部分</div>
    <div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>

.header,
.footer {
    height: 40px;
    width: 100%;
    background: red;
}

.container {
    display: flex;
}

.middle {
    background: yellow;
    flex: 1;
}

.left {
    width: 200px;
    background: pink;
}

.right {
    width: 250px;
    background: aqua;
}

利用浮动

<div class="header">这里是头部</div>
<div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间部分</div>
</div>
<div class="footer">这里是底部</div>

.header,
.footer {
    height: 40px;
    width: 100%;
    background: red;
}

.container {
    overflow: hidden;
}

.middle {
    background: yellow;
}

.left {
    float: left;
    width: 200px;
    background: pink;
}

.right {
    float: right;
    width: 250px;
    background: aqua;
}

双飞翼布局

<article class="container">
    <div class="center">
        <div class="inner">双飞翼布局</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>

.container {
    min-width: 600px;
}

.left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
}

.center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
}

.center .inner {
    margin: 0 200px;
}

.right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
}

前端总结之HTML与CSS篇