第一章：css进阶【必备篇】

整理中高级前端系列,能够看成面试复习，也能够看成实战来看，分享一下 方便本身，方便他人。有不足的地方欢迎评论～

第一趴：css进阶

第二趴：js进阶

第三趴：vue框架 - 正在整理

第四趴：工程化

盒模型

诞生原因：默认盒模型实际占用空间为： margin+border+padding+width(height) 这种计算方式很是不方便，好比：对于非px为单位的宽高设置：

.div {
    width:50%;
    border: 1px solid #ccc;
}
复制代码

咱们想要宽度为50%，但实际大小倒是 50%+2px......

所以box-sizing有两个经常使用值：content-box标准盒模型和border-box怪异盒模型

• content-box(默认值):  border+padding+ width
• border-box(推荐用法)：宽高是包含 border和padding的

BFC-块级格式化上下文

• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具备 position 为 absolute 或 fixed)
• display: inline-block(内联块)、table-cell(表格单元格)、
• 具备overflow 且值不是 visible 的块元素，
• flex item 和 grid item

特色

• 块级盒的垂直方向距离由上下 margin 决定，同属于一个 BFC 中的两个或以上块级盒的相接的 margin 会发生重叠；
• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；
• 计算 BFC 的高度时，浮动元素也参与计算。

IFC-行内格式化上下文

• 水平方向上，当全部盒的总宽度小于匿名行盒的宽度时，那么水平方向排版由 text-align 属性来决定；
• 垂直方向上，行内级盒的对齐方式由 vertical-align 控制，默认对齐为 baseline；
• 行盒的高度由内部子元素中实际高度最高的盒子计算出来，值得注意的是，行内盒（inline boxes）的垂直的 border，padding 与 margin 都不会撑开行盒的高度。

**问题1：**item之间会产生水平间隙，是由于换行产生空白符。两种解决方案：

• 代码不换行
• 设置父元素font-size为0，重置子元素的font-size

问题2： 通常为了不这个垂直的间隙，在设置 inline-block 的时候，还须要顺手带个 vertical-align: middle;

双飞翼、圣杯

都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局：

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
// 主设置 padding
#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%; // 能作到自适应的关键
}

#left {
  width: 200px; // 固定宽度
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; // 固定宽度
  margin-right: -150px; 
}
复制代码

双飞翼布局

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

<div id="container" class="column">
    <div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

.container {
width: 100%;
}
.center {
margin-left: 200px;
margin-right: 300px;
}
.cloumn {
float: left;
}
.left {
margin-left: -100%;
width: 200px;
background-color: blue;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
复制代码

弹性布局flex

具体用法移步阮一峰的flex语法、flex实战，讲得很是通俗易懂.

注意点：

不肯定多少的列表展现，最后一行须要左对齐的时候，解决方案：

.list:after {
  content: "";
  flex: auto;
}
复制代码

网页生成的过程

1. HTML代码转化成DOM
2. CSS代码转换成CSSOM（CSS Object Model）
3. DOM和CSSOM结合，生成一颗渲染树(render tree)包含每一个节点的视觉信息
4. 生成布局（Layout）即将全部渲染树的全部节点进行平面合成
5. 讲布局绘制（paint）在屏幕上

以上五步里面，1-3都很是快，4-5是最耗时的。

生成布局（flow）和绘制（paint）这两步，合称为 渲染（render）

重绘(repaint)和重排(reflow)

如下三种状况会致使网页的从新渲染，此时就须要从新 布局和绘制

• 修改DOM
• 修改样式表
• 用户事件（鼠标悬停、页面滚动、输入框文字、改变窗口大小等）

重绘：全部对页面视觉表现属性的修改，好比：背景色、文字颜色。 重排：修改布局必然致使重绘，好比：DOM操做、元素大小、间距等。

详情可查看：：www.ruanyifeng.com/blog/2015/0…

link和@import的区别？

• link属于XHTML标签，而@import是CSS提供的。
• 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
• link方式的样式权重高于@import的权重。
• 使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的。

第一趴：css进阶

第二趴：js进阶

第三趴：vue框架 - 正在整理

第四趴：工程化

同窗以为有帮助的能够点个赞，以示鼓励～ 😊