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

}

},

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作