box-sizing
content-box：默認(rèn)，寬高包不含邊框和內(nèi)邊距
border-box：也叫怪異盒子，寬高包含邊框和內(nèi)邊距
動畫：移動translate，旋轉(zhuǎn)、transform等等
走馬燈：利用動畫實現(xiàn)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
快格式化上下文，默認(rèn)關(guān)閉
開啟后：
1、其子元素不會再產(chǎn)生margin塌陷問題
2、自己不會被其他元素所遮蓋
3、就算其子元素浮動，自身高度也不會塌陷
如何開啟BFC：
根元素
浮動元素
絕對定位，固定定位的元素
行內(nèi)塊元素
表格單元格
over-flow的值不為visible的時候
display的值設(shè)為flow-root
WebPack
//設(shè)置是開發(fā)與生產(chǎn)模式
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文件中，方便在瀏覽器中查看應(yīng)用程序。
CleanWebpackPlugin：
在每次構(gòu)建前清理打包目錄，避免舊文件對新文件的影響。文章來源：http://www.zghlxwxcb.cn/news/detail-727470.html
MiniCssExtractPlugin：
將CSS文件從JavaScript中分離出來，形成單獨的CSS文件，提高瀏覽器加載CSS文件的效率。
// 擴(kuò)展各種文件加載模塊 - css模塊
module: {
rules:[…]
}
//還可配置代理等
devServer
熱替換、懶加載（import）、預(yù)加載（preload、prefetch）
rel: “preload”, // preload瀏覽器加載的時候已經(jīng)提前被加載
rel: “prefetch”, // prefetch瀏覽器已初始化之后空閑的時候加載
也可在package.json的 script 中配置打包命令，簡化命令
開發(fā)階段配置devtool: ‘source-map’,定位錯誤源代碼所在位置，安全起見上線后移除
分割分包
optimization: {
splitChunks: {
chunks: ‘a(chǎn)sync’,//三選一：“initial” 初始化，“all”(默認(rèn)就是all)，“async”（動態(tài)加載）
minSize: 20000,//當(dāng)導(dǎo)入的模塊最小是多少字節(jié)才會進(jìn)行代碼分割
}
},
文章來源地址http://www.zghlxwxcb.cn/news/detail-727470.html
到了這里，關(guān)于CSS3與HTML5的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
