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;
}
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:
在每次构建前清理打包目录,避免旧文件对新文件的影响。文章来源:https://www.toymoban.com/news/detail-727470.html
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,//当导入的模块最小是多少字节才会进行代码分割
}
},
文章来源地址https://www.toymoban.com/news/detail-727470.html
到了这里,关于CSS3与HTML5的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!