首页 前端知识 CSS3与HTML5

CSS3与HTML5

2024-03-03 11:03:55 前端知识 前端哥 765 750 我要收藏

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:

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

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.qianduange.cn//article/3124.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!