CSS3与HTML5

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,//当导入的模块最小是多少字节才会进行代码分割

}

},

相关推荐
无尽夏_1 小时前
HTML5(前端基础)
前端·html·html5
Jagger_1 小时前
敏捷开发流程-精简版
前端·后端
FIN66682 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing2 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1272 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿2 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66682 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy2 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴2 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc3 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构