box-sizing
content-box:默认,宽高包不含边框和内边距
border-box:也叫怪异盒子,宽高包含边框和内边距
动画:移动translate,旋转、transform等等
走马灯:利用动画实现animation:from... to...
隐藏元素:
visibility:hidden 占位
display:none 不占位
画页面前重置浏览器自带样式
清除浮动
css
//清除边框
* {
* padding:0;
* margin:0;
* }
* //左浮动
* .leftfix{
* float:left;
* }
* //右浮动
* .rightfix{
* float:right;
* }
* //若子元素有浮动,则给父元素添加清除浮动,来解决一些问题
* .clearfix::after{
* content:'';
* display:block;
* clear:both;
}
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
// 扩展各种文件加载模块 - 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,//当导入的模块最小是多少字节才会进行代码分割
}
},