给一个HTML元素设置css属性，如var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block";这样写太罗嗦了，为了简单些写个工具函数，如function setStyle(obj,css){for(var atr in css){obj.style[atr] = css[atr];} } var head= document.getElementById("head"); setStyle(head,{width:"200px",height:"70px",display:"block"})发现Google API中使用了...
[CSS all 属性实例修改所有元素或其父元素的属性为初始值： div{??? background-color: yellow;??? color: red;??? all: initial;}定义和使用all 属性用于重置所有属性，除了 unicode-bidi 和 direction。默认值:none继承:无动画:no。 阅读 animatable 版本:CSS3JavaScript 语法:object.style.all="initial"浏览器支持The numbers in the table specify the first browser version that fully supports the property. 表格中的数字...
1.水平对齐(text-align)text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性，是让盒子里面的内容水平居中， 而不是让盒子居中对齐。其可用属性值如下：left：左对齐（默认值）right：右对齐center：居中对齐 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style> 7 div { 8 background-color: pink; 9 text-align: center;10}1...
CSS属性属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性。属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。文本属性文本大小font-size属性值为数值型时，必须给属性值加单位，属性值为0时除外。单位还可以是pt，9pt=12px。为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0....
1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值$("img").attr("src");返回文档中所有图像的src属性值$("img").attr({ src: "test.jpg", alt: "Test Image" });为所有图像设置src和alt属性$("img").attr("src","test.jpg");为所有图像设置src属性$("img").attr("title", function() { return this.src });把src属性的值设置为title属性的值2.removeAttr(name)从每一个匹配的元素中删除一个属性$("img").removeAtt...
zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题，功能相当于overflow:auto，同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto；zoom:1; 。这样，子元素浮动，父元素再也不会不自动跟子元素扩大了。Zoom的使用方法：复制代码代码如下:zoom :? normal | numbernormal : 默认值。使用对象的实际尺寸number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相...
CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值。不过在我们与这几个新属性亲密接触之前需要知道3个重要的盒子。 三个盒子 假设现在有个容器，容器里面有些内容，虽然我们看不见，但是这些内容的外面是有一个盒子的，这个盒子...
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>慕课七夕主题</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style type="text/css">* {padding: 0;margin: 0;}ul,li {list-style-type: none;}#content {width: 100%;height: 100%;/* top: 20%;left: 20%; */overflow: hidden;position: absolute;}.content-wrap {position: rela...
CSS代码编写的过程中，代码数量非常庞大，许多属性会被反复使用，这样来来回回地敲打同样的属性名称会占用不少的时间。作为一名优秀的web前端人员，应当了解记忆各种属性的简写方式，用以提高自身的工作效率，缩减代码数量，增强可读性。作为一名刚接触不久的初学者，在网上搜集资料，整理了常用属性的简写模式，供大家参考。1、颜色color简写在颜色值采用16进制，且每两位的值相同，可以简写一半。1 color:#113366;简写为1 color:...
CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明: transform 从字面来看transform的释义为改变，使…变形；转换 。这里我们就可以理解为变形。那都能怎么变呢？none 表示不进行变换；rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。skew 扭曲 tra...
什么是属性前缀 为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 例如：transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */使用插件来帮助我们进行前缀的自动添加，会大大提升我们的开发效率，提供编码效率。 此次是关于如何通过po...
Flex布局display:flex 指定当前盒子为伸缩盒flex-direction:column 把盒子内容垂直从上往下排列row 把盒子内容垂直从左往右排列flex-wrap: wrap; 如果内容放不下就会换行排列，类似浮动justify-content: space-between; 水平对齐方式align-items:center; 垂直对齐方式 对齐方式（顶部，底部，中间，基线对齐） 推荐链接：阮一峰：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html菜鸟教程：http://www.runoob.com/w3cnot...
如果你不是一名csser新手，想必你对z-index的用法应该有个大致的了解了吧，z-index可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序，本文不去讲述基本的API如何使用，而是去更深入的了解z-index是如何工作的，使用z-index的时候有哪些问题，以及z-index在日常开发中的使用。 下面我们通过一个例子来引入今天的正文，代码示例：<style type="text/css">.red, .green, .blue {position: absolute;width: 100px;height: 100p...
1.display属性<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>08display属性</title><style>.c1 {background-color: red;/*display: none; !* 让其在页面上不显示 *!*//*display: inline; !* 让其变成一个行内标签 *!*/display: inline-block;/* 让其具有块级标签和内联标签（行内标签）特点，就是可以设置长和宽的行内标签 */}.c2 {width: 100px;height: 100px;background-color: green;/*display: b...
border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。把这些基本的图形进行组合，还可以描绘成不同的图案，真的很棒。以下只是简单的几个举例，更多的...