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

}

},

相关推荐
前端Hardy2 分钟前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
cnsxjean3 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5673 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海3 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆3 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
彪8254 小时前
第十章 JavaScript的应用
css·html5
莘薪4 小时前
JQuery -- 第九课
前端·javascript·jquery
好青崧4 小时前
CSS 样式入门:属性全知晓
前端·css·tensorflow
光头程序员4 小时前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件
蒜蓉大猩猩5 小时前
Vue.js --- Vue3中其他组合式API
前端·javascript·vue.js·前端框架·node.js·html