Css
css 禁止录入中文
1.情景展示 如何禁止输入框，输入中文字符？2.解决方案 IE浏览器，可以使用ime-mode来实现UpdateTime--2016年12月15日19:52:16 /*屏蔽输入法，可以用来禁止录入中文*/ ime-mode:disabled;//IE兼容，chrome不兼容 <inputty...
CSS3新特性
1.对于CSS3新特性，支持 淘宝手机端页面：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8"/>5<title>淘宝</title>6<metaname="viewp...
css zoom与scale区别
转自：http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/1、zoom的缩放是相对于左上角的；而scale默认是居中缩放；2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；所以二...
css实现九宫格
原理：浮动+margin负边距示例代码：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>css实现九宫格</title><styletype="text/css"...
CSS命名规范 BEM
良好的代码结构，HTML和css元素之间的关系，对于项目交付是很重要的！BEM解释：(1).block是BEM的区块(B)，包含内容和风格。如bootstrap框架的.container。 (2).block-element代表自子容器(E)。如bootstrap框架的轮播图，.carousel表示轮播图，c...
webpack css打包为一个css
1、安装npminstallextract-text-webpack-plugin--save-dev 2、项目目录：index文件夹下的index.css：body{background-color:#ccc;}.flex-div{display:flex;}index文件夹下的index2.css：p{t...
webpack 编译less/scss文件
1、安装插件处理less：npminstallless-loader--save-dev处理sass：npminstallsass-loader--save-dev2、项目目录： layer.less为：.layer{width:600px;height:200px;background-color:gree...
webpack 处理CSS
1、安装插件npmistyle-loadercss-loader--save-devnpmipostcss-loader--save-devnpmiautoprefixer--save-devnpminstallpostcss-import--save-devstyle-loader插件为：通过注入<style&...
CSS3 calc()函数使用
1、calc是什么？calc是英文单词calculate(计算)的缩写，用于动态计算长度值。calc()函数支持"+","-","*","/"运算；+和 -运算符的两边必须始终要有空白符。比如 calc(50%-8px)会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而calc(8px+...
CSS3 选择器浏览器兼容性汇总 IE8
1、css选择器css（包括css1、css2和css3）有哪些选择器？http://www.w3school.com.cn/cssref/css_selectors.asp 2、CSS3选择器因为CSS1和CSS2选择器浏览器兼容性很好，因此本文主要讲解CSS3选择器，CSS3选择器一共有21个，他们为：3...
css before和after伪元素应用
1、说明":before"伪元素可以在元素的内容前面插入新内容。":after"伪元素可以在元素的内容之后插入新内容。伪元素默认展示为inline，即display:inline; 必须写content属性，不然伪类不起作用！ 2、兼容性伪元素有2种写法，单冒号和双冒号，单冒号和双冒号作用是一样的。...
SCSS 实用知识汇总
1、变量声明$nav-color:#F90;nav{//$width变量的作用域仅限于{}内$width:100px;width:$width;color:$nav-color;}.a{//报错，$width未定义width:$width;}2、父选择器&scss代码：articlea{color:blue;&...
CSS实现水平垂直居中方式
1、定位核心代码实现请看示例代码中的注释：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>CSS水平垂直居中实现方式--定位实现</title><styletyp...
CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。示例代码：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF...
CSS编写规范
一、面向对象CSS（OOCSSS）OOCSS规则一：结构和皮肤分离如.btn， .btn-info，.btn-warning.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align...
