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 分钟前
React-组件和props
前端·javascript·react.js
懒羊羊我小弟5 分钟前
React Router v7 从入门到精通指南
前端·react.js·前端框架
DC...36 分钟前
vue滑块组件设计与实现
前端·javascript·vue.js
Mars狐狸44 分钟前
AI项目改用服务端组件实现对话?包体积减小50%!
前端·react.js
H5开发新纪元1 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.3响应式革新与TypeScript高效开发实战指南》
前端·后端
恋猫de小郭1 小时前
腾讯 Kuikly 正式开源,了解一下这个基于 Kotlin 的全平台框架
android·前端·ios
2301_799404911 小时前
如何修改npm的全局安装路径?
前端·npm·node.js
(❁´◡双辞`❁)*✲゚*1 小时前
node入门和npm
前端·npm·node.js
韩明君1 小时前
前端学习笔记(四)自定义组件控制自己的css
前端·笔记·学习