今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、过渡(transition)和动画(animation)等CSS3技术。首先我们先来了解一下变形(transform),transform就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们来看一看它们是如何使用，先从我们的transform语法开始： <!--它其中的值为：旋转rotate、扭曲skew、缩放scale和移动...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-Canvas画布（线条）</title> <script> window.onload=function () { var canvas=document.getElementById("canvas");//获取canvas对象 var ctx=canvas.getContext("2d"); //创建二维的绘图上下文对象 //通过上下文对象调用属性或方法来绘图 ctx.beginPath();// “beginPath()” 表开始一条路径或者重置当...
margin 与 padding 翻译分别为：margin: 边缘，极限；padding : 垫子，材料； 在CSS中，margin： 指从自身边框到另一个容器边框之间的距离，即容器外距离；padding: 指从自身边框到自身内部容器边框之间的距离，即容器内距离。 下面讲解 padding和margin常用的用法一、padding1、语法结构（1）padding-left:10px; 左内边距（2）padding-right:10px; 右内边距（3）padding-top:10px; 上内边距（4）padding-bottom:10px; 下...
function css(target,styles){ for (var k in styles){ target.style[k]=styles[k]; }}示例：var div = document.querySelector("div");css(div,{width:300+"px",height: 400+"px",backgroundColor:green});原文：http://www.cnblogs.com/f-y-z/p/5772384.html
像下面图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。 现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。 下面是inline-block兼容的代码： 复制代码代码如下:display:inline-block;*display:i...
文本超出一定宽度让其隐藏，以省略号替代width:200px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;如下图原文：https://www.cnblogs.com/theblogs/p/9941118.html
jQuery中使用 $ ，可以通过元素的id, css class或 tag name很容易的获取到相应的元素。这让之前取节点的繁琐变的简单、简短、简洁。并且为了更加方便的可以选择到相应的元素，提供了筛选的功能。例：$(“p:gt(2)”) //2以上的元素$("p:lt(10)”) // 0-9 $(“p:empty”) //没有子孩子的p 还在匹配的元素中，设置一个样式属性的值例：$("p").css("color","red");就这样，就可以像是在css里面写一样，改变样式，非常好操作。原文：...
1、css（层叠样式表）样式主要目的（让页面更好看些）css尽量不要写内联样式，保证结构和样式分离原则；html专门负责结构，css专门负责样式。2、css写法规范选择器 { 属性 ：值 ； }内联样式 写在标签里 style=“”属性：值“”内部样式 写在head标签里的style标签里 外部样式 通过链接导入样式表 link3、font-size（字号大小）4、浏览器默认字体font-family 微软雅黑 ，字体大小一般默认为16px 一般不想写中文是可以用un...
https://www.cnblogs.com/liwenzhou/p/7999532.html 1. CSS语法 选择器 {属性1:值1;属性2:值2;} 2. CSS导入方式 1. 直接将样式写在标签内部的style属性 2. 在head标签中写style标签 3. 将样式写在单独的css文件中，通过link标签的href属性导入（项目中多用这种） 3. CSS选择器 ***** jQuery选择器类似 1. 基本选择器 元素选择器、...
css闲谈之css简写 简写能有效的提高工作效率，但是有时候简写会让我们忘记原有的属性，所以简写是要采纳的方法，但不要去依赖它。 font 字体属性总共有一下几种 font简写属性。作用是把所有针对字体的属性设置在一个声明中。font-family设置字体系列。font-size设置字体的尺寸。font-size-adjust当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）font-stretch对字体进行水平拉伸。（CSS2.1 已...
CSS选择器命名及常用命名CSS选择器命名及常用命名规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义了两个div，一个 id 命名为“div1”，另外一个命名为“News”，肯定第二个比较易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名（语义化命名）！ 说个题外话，规范化命名的代码，会显着你更加专业！ 关于CSS命名法，和...
说cssSprites之前，先简单说一下什么是http请求。HTTP------超文本输送协议。http 负责web服务器与web浏览器之间的通信，用于从web客户端向服务端发送请求，并从服务器向客户端返回内容（网页）。 cssSprints 也叫 css 精灵，有人也翻译为 css 雪碧。它是一种网页图片应用处理方式。它允许将一个页面的零星图片包含到一张大图中，访问该页面时减少了http请求。 csssprites原理：把网页中一些背景图片整合到一张图片文件...
关于css中的长度单位，我们用的最多就是px，因为他简单直接。但是当一套方案匹配不同终端时，px就会显得过于生硬，不容易变通。 然而rem，em，vh，vw就可以有效的解决这一问题。让我们来看看这些东西是个啥？ 首先是rem，W3C官网描述是“font size of the root element”，即rem是相对于根元素。概念不好理解接咋们就直接直接看demo:DOM结构如下： CSS 代码如下： 效果如下： ...
<style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px #808080 solid; background-color: #fff; } #talkbubble:before { content: " "; position: absolute; top: 100%; left: 50px; width: 0; height: 0; border-left: 15px solid transparent; border-to...
1、static（静态定位）： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。2、relative（相对定位）： 定位为relative的元素脱离正常的文本流，但其在文本流中的位置依然存在，所以它本身并没有脱离文档流。 通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。<style type="text/css">.static1{height:80px...