css实现背景图片充满整个屏幕

css实现背景图片充满整个屏幕

css代码html{height:100%;}body{width:100%;height:100%;background:url("https://f.51fanbei.com/h5/app/activity/2018/07/buy_bg.png") center center no-repeat;background-attachment: fixed;backgroun
浏览:63 分类:插件/功能 标签: css
Nuxt.js将页面中css样式提取到一个css文件中

Nuxt.js将页面中css样式提取到一个css文件中

先看下未提取的css的部分源码实现将页面中css 提取到 link的方法比较简单:在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }即可。build: { extractCSS: { allChunks:true },}注意:npm run dev 启动项目后是没有任何变化,要先运行npm run
浏览:129 分类:Vuejs 标签: Nuxt css
css方法事项img图片自适应父元素大小并垂直水平居中

css方法事项img图片自适应父元素大小并垂直水平居中

之前写过一篇文章【jq实现图片在父级容器内等比例缩放且居中显示】,最终展示的效果与本文效果一样,具体代码可查看文章。本文是利用css代码实现img标签图片,再父元素中实现垂直居中的方法。<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=devi
浏览:166 分类:插件/功能 标签: 垂直水平 css
提取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 
浏览:1538 分类:Vuejs 标签: less css sass vue
css3中transform 2d转换

css3中transform 2d转换

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

CSS盒子模型理解

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

css阻塞与js阻塞

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

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

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

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

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

css3响应式布局

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

弹性盒模型-box/flex

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

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

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

邮箱快速注册

忘记密码