CSS3与HTML5

box-sizing
content-box：默认，宽高包不含边框和内边距
border-box：也叫怪异盒子，宽高包含边框和内边距
动画：移动translate，旋转、transform等等
走马灯：利用动画实现animation：from… to…
隐藏元素：
visibility：hidden 占位
display：none 不占位
画页面前重置浏览器自带样式

清除浮动

//清除边框
* {
* padding:0;
* margin:0;
* }
* //左浮动
* .leftfix{
* float:left;
* }
* //右浮动
* .rightfix{
* float:right;
* }
* //若子元素有浮动，则给父元素中after伪元素添加清除浮动，来解决一些问题
* .clearfix::after{
* content:'';
* display:block;
* clear:both;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

BFC

快格式化上下文，默认关闭
开启后：
1、其子元素不会再产生margin塌陷问题
2、自己不会被其他元素所遮盖
3、就算其子元素浮动，自身高度也不会塌陷
如何开启BFC：
根元素
浮动元素
绝对定位，固定定位的元素
行内块元素
表格单元格
over-flow的值不为visible的时候
display的值设为flow-root

WebPack

//设置是开发与生产模式
mode:development/production
// 配置打包入口文件
entry: path.resolve(__dirname, ‘src’, ‘index.js’),
// 配置打包输出位置，及文件名
output: {
path: path.resolve(__dirname, ‘dist’),
// 输出文件名
filename: ‘bundle.js’
}
// 配置各种插件
plugins

HtmlWebpackPlugin：

自动生成HTML文件，并将打包后的JavaScript和CSS文件自动引入HTML文件中，方便在浏览器中查看应用程序。

CleanWebpackPlugin：

在每次构建前清理打包目录，避免旧文件对新文件的影响。

MiniCssExtractPlugin：

将CSS文件从JavaScript中分离出来，形成单独的CSS文件，提高浏览器加载CSS文件的效率。
// 扩展各种文件加载模块 - css模块
module: {
rules:[…]
}
//还可配置代理等
devServer
热替换、懒加载（import）、预加载（preload、prefetch）
rel: “preload”, // preload浏览器加载的时候已经提前被加载
rel: “prefetch”, // prefetch浏览器已初始化之后空闲的时候加载
也可在package.json的 script 中配置打包命令，简化命令
开发阶段配置devtool: ‘source-map’,定位错误源代码所在位置，安全起见上线后移除
分割分包
optimization: {
splitChunks: {
chunks: ‘async’,//三选一：“initial” 初始化，“all”(默认就是all)，“async”（动态加载）
minSize: 20000,//当导入的模块最小是多少字节才会进行代码分割
}
},