- 计算 BFC 的高度时，需要计算浮动元素的高度。
- BFC 区域不会与浮动的容器发生重叠。
- BFC 是独立的容器，容器内部元素不会影响外部元素。
- 每个元素的左 margin 值和容器的左 border 相接触。
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
创建BFC条件
- 设置浮动：float有值并不为空
- 设置绝对定位： position（absolute、fixed）
- overfilow值为：hidden、auto、`scroll
- display值为：inline-block、table-cell、table-caption、flex等
BFC作用：
- 解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
- 创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
- 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。
水平垂直居中
- 利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
height: 100px;
width: 100px;
}
- 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
}
- flex布局，该方法可以不定宽高。
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
- table布局，设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
两栏布局
两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在
实现思路：
- 使用 float 左浮左边栏
- 右边模块使用 margin-left 撑出内容块做内容展示
- 为父级元素添加BFC，防止下方元素飞到上方内容
<style>
.box{
overflow: hidden; 添加BFC
}
.left {
float: left;
width: 200px;
background-color: gray;
height: 400px;
}
.right {
margin-left: 210px;
background-color: lightgray;
height: 200px;
}
</style>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
- flex弹性布局， 为了让两个盒子高度自动，需要设置: align-items: flex-start
.box{
display: flex;
}
.left {
width: 100px;
}
.right {
flex: 1;
}
flex弹性布局
flex布局是CSS3新增的一种布局方式，能够根据不同屏幕尺寸的变化来自适应大小。
常用的容器属性：
- flex-direction属性决定主轴的方向（即项目的排列方向）。
- flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
容器成员属性如下：
- order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow：定义项目发大比例，默认为0，即存在剩余空间，也不放大。
- flex-shrink：定义项目收缩比例，默认为1，即空间不足，也会进行缩小。
- flex-basis：定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。
- flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，flex：1也表示flex： 1 1 auto。
- align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
grid网格布局
Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。
擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系
容器属性：
- display：创建一个块级行内网格容器
- grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
- grid-row-gap 属性、grid-column-gap 属性分别设置行间距列间距。grid-gap 属性是两者的简写形式
- grid-template-areas：用于定义区域，一个区域由一个或者多个单元格组成
- grid-auto-flow：排列方式，默认为行
- justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下，place-items属性是align-items属性和justify-items属性的合并简写形式
- justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
- grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高
项目属性：
- grid-column-start 属性：左边框所在的垂直网格线
- grid-column-end 属性：右边框所在的垂直网格线
- grid-row-start 属性：上边框所在的水平网格线
- grid-row-end 属性：下边框所在的水平网格线
- grid-area 属性指定项目放在哪一个区域
link和@import的区别
- link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等，标签引入的CSS被同时加载
- @import是CSS提供等语法规则，只有导入样式表带作用。引入的CSS将在页面加载完毕后被加载
隐藏元素方法
- display：none：元素在文档中不存在，不会占据位置。
- visibility： hidden：元素在文档中的位置还保留，仍然占据空间。
- opacity：0：将透明度设置为0。
- z-index：负值：直接将元素放置在最下层，利用其他元素来遮盖。
- position：absolute：将元素定位到可视区域以外。
- 设置height、width模型属性为0
CSS3动画有哪些
transition 实现渐变动画
属性如下：
- property:填写需要变化的css属性
- duration:完成过渡效果需要的时间单位(s或者ms)
- timing-function:完成效果的速度曲线
- delay: 动画效果的延迟触发时间
transform 转变动画
包含四个常用的功能：
- translate：位移
- scale：缩放
- rotate：旋转
- skew：倾斜
animation 实现自定义动画
响应式设计
响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
属性对应如下：
- width=device-width: 是自适应手机屏幕的尺寸宽度
- maximum-scale:是缩放比例的最大值
- inital-scale:是缩放的初始化
- user-scalable:是用户的可以缩放的操作
实现响应式布局的方式有如下：
- 媒体查询
- 百分比
- vw/vh
- rem
CSS提高性能的方法
css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序
- 内联首屏关键CSS：内联css关键代码能够使浏览器在下载完html后就能立刻渲染
- 异步加载CSS
- 资源压缩：利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩
- 合理使用选择器：不要嵌套使用过多复杂选择器，使用id选择器就没必要再进行嵌套
- 减少使用昂贵的属性：发生重绘的时候，昂贵属性如box-shadow会降低浏览器的渲染性能
- 不要使用@import：@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟
文本溢出的省略样式
单行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
whtie-space: nowrap; //规定段落中的文本不进行换行
多行
- 基于行数截断
overflow:hidden
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
- 基于高度截断
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
CSS预处理器
扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便
本质上，预处理是Css的超集
包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件
三大优秀的预编处理器：
- sass
- less
- stylus
区别：
- 三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同，区别只是 Sass 和 Stylus 可以用没有大括号的方式书写
.a {
&.b {
color: red;
}
}
- less声明的变量必须以@开头，sass 声明的变量名前面使用$开头,stylus声明的变量没有任何的限定，但变量与变量值之间需要使用=
@red: #c00;
strong {
color: @red;
}
//----------
$red: #c00;
strong {
color: $red;
}
//----------
red = #c00
### 文末
js前端的重头戏，值得花大部分时间学习。
推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
**这是288页的前端面试题**
2656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
