双眸

display:block就是将元素显示为块级元素block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。display:inline就是将元素显示为行内元素...

自由缩放属性resize为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户...

webkit-animation动画有三个事件：开始事件: webkitAnimationStart结束事件: webkitAnimationEnd重复运动事件: webkitAnimationIterationcss3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd注意：transition 仅有这一个事件var o...

//三角形.money-ul li.active:after { content: ""; position: absolute; bottom: 0; right: 0; border-bottom: 13px solid red; border-left: 15px solid transparent;}//勾.money-ul l...

sass优点:用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；可编程能力比较强，支持函数，列表，对象，判断，循环等；相比less有更多的功能；Bootstrap/Foundation等使用scss；丰富的sass库：Compass/Bourbon；sass缺点:在公司内部安装node-sass会失败，需要使用cnpm或者手工安装less优点可以在浏览器中运行，...

概念介绍：1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名e...

强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地：word-wrap语法：word-wrap: normal(默认) | break-word各个浏览器均能识别参数：normal: 允许内容顶开指定的容器...

伪类伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。常见的几种伪类是::link , :visited , :hover , :active , :first-child 以及 :nth-child。这里还有很多，接下来我们将要逐一进行介绍。此外，伪类前面总是加一个冒号(

单行文本溢出显示省略号(…)text-overflow:ellipsis-----部分浏览器还需要加宽度width属性.ellipsis{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; display: inline-block;}多行文本溢出显示省略号● WebKit浏览器...

红包雨的功能相信大家都做过，不过一般都是用js计算的，闲着无聊用css的样式写了类似的，主要用的是css的transform和animation结合。大概代码逻辑：@keyframes startHB { 0% { transform: translateY(-300px); -ms-transform:translateY(-300px); -webkit-tran...

Media Queries——媒体类型（一）随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页...

伸缩布局（一）CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置...

Keyframes介绍Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}...

首先，学会使用sass：1.先下载和安装node-sass和一些加载器$ cnpm install sass-loader node-sass vue-style-loader --D2.配置webpake加载器:webpack.base.config.js //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass!{ test: /\.scss$/, loa...

什么是CSS3？CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前...

圆角效果 border-radiusborder-radius是向元素添加圆角边框。使用方法：border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百...

颜色之RGBARGB是一种色彩标准，是由红®、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。语法：color：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分...

text-overflow 与 word-wraptext-overflow：用来设置是否使用一个省略标记（…）标示对象内文本的溢出。语法：但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号...

background-origin设置元素背景图片的原始起始位置。语法：background-origin ： border-box | padding-box | content-box;参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。效果如下：需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。background-cl...

属性选择器在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：实例展示：html代码：<a hr...

:enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。示例演示通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。:disabled选择器...

变形–旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示：HTML代码：<div class="wrapper"> <div></div&am

slider轮播插件相信大家经常会用到，写法也是各种各样，大部分都是用的第三方提供的组件使用，如果想基于自己的业务特点封装个组件供自己使用的话就要自己封装组件了，网上看了大部分写法都是通过js控制dom节点位移的方法，这里就不多做介绍了，还有一些用纯css就能完成的写法也提供出来仅供。1，jquery-slider2，css-slider源码地址：https://github.com/...