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

}

},

相关推荐
蜗牛快跑2135 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy6 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
帅帅哥的兜兜2 小时前
CSS:导航栏三角箭头
javascript·css3
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss