2D 转换(须在style里面定义):位移,缩放,旋转,斜切(扭曲) 转换---关键字:transform; 属性有: 1, 位移:translate(0px,0px) 属性值:(0px,0px)括号里跟两个值,用逗号分割,使元素沿x轴,y轴坐标位移,第二个值可以不给,如果不给则默认为0。 2, 缩放:scale(.5, .5) 属性值:(.5 , .5)括号里跟两个小数(百分数),用逗号分割,元素中心点做为缩放基点, 使元素沿x轴,y轴坐标按比例...
z-index属性值为负数的作用: 在很多CSS代码中,可以看到z-index属性值被设置为负数的情况,下面就简单介绍一下,此属性值为负数情况下的表现。在一般情况下只要对象设置了position属性,且属性值不为static,那么此对象能够覆盖非定位对象,代码实例如下: 蚂蚁部落div{ width:100px; height:100px;}.a{ position:relative; right:20px; top:20px; background-color:red; z-index:1;}.b{ background-color:green;} 以...
text-align属性有没有继承性: text-align属性可以将对象内的文本水平居中对齐,应该说不是什么难点,可能有时候会有这样的疑问词属性有没有继承性,如果有的话可以给父元素定义一个居中方式,下面子元素集成就可以了,能够节省些许代码。代码实例如下: 蚂蚁部落.grandfather{ width:440px; height:350px; background-color:green; text-align:right;}.parent{ width:200px; height:200px; background-color:blue;}....
Flex属性定义 .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 伸缩容器(flex containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。...
var pageController = { init: function () { this.featureBtnInit(); //功能按钮初始化 }, featureBtnInit: function () { //功能按钮 var $featureBtn = $("#featureBtn"); var openClass = "btn-feature-open"; if (!$featureBtn[0])return this; $featureBtn.on("click", function () { if(!$featureBtn.hasClass(openClass)){ ...
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8";> 练习一个小人的动画 I ? Y O U ...
background-color属性有没有继承性: 因为对象的背景默认是透明的,所以如果父对象设置了背景颜色之后,子对象也呈现为父对象的背景颜色,好像子对象继承了父对象的背景颜色,其实这是一种视觉错误。下面通过一个实例来说明一下background-color不具有继承性。 实例代码: 蚂蚁部落 .parent { width:200px; height:200px; border:1px solid red; background-color:green; } .children { width:120px; height:1...
font-size属性有没有继承性:这问题自然再简单不过了,不过可能初学者有时对这个问题可能存在疑问,会造成处处为标签内的元素设置字体。这里可以给出一个肯定的答案,font-size数据具有继承性,这样有利于对网页字体进行统一设置。 代码实例如下: 蚂蚁部落body{ font-size:12px;}蚂蚁部落 太阳出来了 由以上代码的运行表现可以看出,font-size属性具有继承性。原文地址是:http://www.51texiao.cn/div_cssjiaoc...
CSS的z-index属性是做什么用的: 在网页制作中,可能有这样的需求,就是让几个层重叠在一起,并且可以指定顺序,这时候使用z-index属性是个不错的选择。 但是此属性仅作用于position属性值为relative、absolute或fixed的对象,不会作用于窗口控件,如select对象。 实例代码如下: 蚂蚁部落.index1, .index2, .index3{ position:absolute; width:150px; height:100px;}.index1{ z-index:1; background-color:#663}.i...
的四种状态 A:link 连接平常状态 A:hover 鼠标放上去的时候 A:active 鼠标按下的时候 A:visited 连接被访问过后的状态 target属性 _blank浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self这个目标的值对所有没有指定目标的 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 标签中的 target 属性一起使用。 _parent这个目...
CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪类种类 伪元素种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。 p>i:first-child {color: red}firstsecond //伪类 :first-child 添加样式到第一个子元素如果我们不使用...
1 2 3 4 5 test1 6 7 #container { 8 background-color: #f1f1f1; 9 width: 80%;10 margin: 20px auto;11 }12 .item {13 float: left;14 color: white;15 text-shadow:0 1px black;16 margin: 10px 20px;17 padding: 20px;18 }19 #container > .item:nth-child(1) {20 background-color: #F00080;21 }22 #container > .item:nth-child(2) {23 background-color: #D8AAD8;24 }25 #container > .item:nth...
为什么设置z-index属性无效: z-index属性生效需要特定的条件才可以的,否则当然不会生效。下面简单介绍两种不生效的情况。 一.对象没有应用绝对定位或者相对定位: 对象必须应用绝对定位或者相对定位之后,z-index属性才有生效的可能。 二.浏览器兼容性导致: 例如,在IE6浏览器下select下拉框无法被div所覆盖,尽管div对象的使用绝对定位且z-index属性值设置的足够大还是不行。 解决方法可以参阅IE6浏览器下div无法遮盖...
前言 CSS3中出现了几种关于背景图片的新属性:background-origin、background-clip、background-position等.之前大致了解了下,但是background-origin与background-clip的区别尚不清楚。就google了一篇,发现不错,翻译下来吧。 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, CSS3 new features! ps: 原文在线代码演示已由codepen.io 搬至runjs.cn background-posi...
定义和用法: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 默认值:content-box; 继承性:无; css版本:css3 语法:box-sizing: content-box | border-box |inherit; 属性值说明: content-box 默认值;由css2.1规定的宽度高度行为;宽度和高度分别应用到元素的内容框;在宽度和高度之外绘制元素的内边距和边框。 可以理解为:对元素设置border和padding最终会改变元素的width,h...