提取Vue项目的中单个的CSS/LESS/SASS并压缩的配置方法

提取Vue项目的中单个的CSS/LESS/SASS并压缩的配置方法

可提取单个 CSS 的插件有两个,分别为 extract-text-webpack-plugin 和 mini-css-extract-plugin, 前者再配置一个 minimize 即可实现压缩功能,后者配置另一个插件 optimize-css-assets-webpack-plugin  即可实现压缩功能。extract-text-webpack-plugin 
浏览:312 分类:Vuejs 标签: less css sass vue
css3中transform 2d转换

css3中transform 2d转换

transform 2d 样式:rotate、skew、scale、translatetransform-origintransform的执行顺序
浏览:247 分类:HTML5/CSS3 标签: transform css3
CSS盒子模型理解

CSS盒子模型理解

        前言        盒子模型,英文即box model。无论是div、span、还是a都是盒子。        但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。        盒子中的区域        一个盒子中主要的属性就5个:width、height、padding、borde
浏览:517 分类:HTML/CSS 标签: 盒子模型 css
css阻塞与js阻塞

css阻塞与js阻塞

        js 的阻塞        所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载 JS,但是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。  由于浏览器为了防止出现 JS 修改 DOM 树
浏览:375 分类:前端干货 标签: js阻塞 css阻塞
css加载方式link和@import的区别

css加载方式link和@import的区别

        有 4 种方式可以在 HTML 中引入 CSS。        1、内联方式:内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。<divstyle="background: red"></div>        这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <div> 拥有相同的样式,你不得不重复地为每个 <di
浏览:510 分类:HTML/CSS 标签: css link @import
渐进增强和优雅降级含义及区别

渐进增强和优雅降级含义及区别

        渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以导致了工作流程上的不同。        渐进增强的例子.transition {/*渐进增强写法*/
浏览:362 分类:前端干货 标签: 渐进增强 优雅降级 css3
css3响应式布局

css3响应式布局

        响应式布局        一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。        媒体类型        在何种设备或者软件上将页面打开all:所有媒体braille:盲文触觉设备embossed:盲文打印机print:手持设备projection:打印机预览screen:彩屏设备speech:'听觉'类似的媒体类型tty
浏览:374 分类:CSS3 标签: 响应式 css3 media 媒体查询
弹性盒模型-box/flex

弹性盒模型-box/flex

        1、注意在使用弹性盒模型的时候,父元素必须要加上 display:box 或者 display:inline-box。flex:display:flex; /*新版弹性盒模型 */box:display:-webkit-box;/* 老版弹性盒模型 */        新/旧版弹性盒模型布局<!DOCTYPE html><html>    <head>  
浏览:357 分类:CSS3 标签: box css3 flex
怪异盒子模型:css3 box-sizing布局

怪异盒子模型:css3 box-sizing布局

        盒子模型        关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如:padding + border + width= 盒子的宽度padding+ border + height =
浏览:414 分类:CSS3 标签: box-sizing css3
移动端开发去除默认css样式/overflow问题

移动端开发去除默认css样式/overflow问题

        清除点击阴影:-webkit-tap-highlight-colora,input,button{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}        清除按钮圆角 (ios上):-webkit-appearanceinput,button {-webkit-appearance: none;border
浏览:402 分类:移动开发 标签: 移动端 css
用css里的 viewport-fit 标签应对iphone x的刘海

用css里的 viewport-fit 标签应对iphone x的刘海

        iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个 background-color 就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕
浏览:415 分类:CSS3 标签: viewport-fit css iphone
css3实现超出指定文本以省略号显示效果

css3实现超出指定文本以省略号显示效果

css3实现超出指定文本以省略号显示效果:一种是单行显示省略号;另一种是自己可以控制几行,最后一行末尾才显示省略号。css样式.text01 {width:200px;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text
浏览:395 分类:特效/功能 标签: css3 省略号

邮箱快速注册

忘记密码