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...
position有五个值：static、relative、absolute、fixed、inherit。 static 是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页制作时，没有指定 position，也就表示使用 static。 relative 没有脱离布局流，此时可以使用 top、right、bottom、left 属性。 top 和 bottom 共存时，使用 top 值，忽略 bottom 值； left 和 right 共存时，使用 left 值，忽略 right 值； relative 是相对位置，指相对于...
热火朝天的css3无疑吸引了很多前端开发者的眼球，然而在css3中的动画属性则是新功能中的主打招牌，说到css3的动画属性不得不让人想起这三个属性：Transform?Transition?Animation。 transform属性虽然看起来可以实现动画的效果，但本质其实是静态的，说白一点其实就是一个图形的变形工具；而transition属性是一个简单 的动画属性，操作起来非常的简单；在这里主要为大家介绍Animations属性，这是个名副其实的动画属性，虽然官方也没...
原文：A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。 很多的设计师和开发者发现Flex布局很容易使用，它定位元素简单因此很多复杂的布局能够用很少的代码实现，引领更简单的开发过程。Flex布局的...
这里把CSS3的新属性单独拿出来讲解一下： border-radius 属性用于创建圆角 div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */} border-shadow 用于向方框添加阴影 div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;} border-image 属性允许您规定...
What? image-rendering作为现阶段还处于实验性质中的css属性，他的作用是在浏览器对图片进行比例缩放时，设置其缩放使用的算法，从而来得到我们最终想要的图片结果。而且这个属性可以应用于img，canvas和background-image中。 Note 由于该属性未得到所有浏览器的支持，本文直接在文章里应用该属性，所以阅读此文时请使用最新版本的浏览器 Usage image{ image-rendering:auto;} 其可选的值有： auto使用默认算法，即...
.BtnOkay /* 黄 */ { font-weight: bold; font-family: "Microsoft JhengHei"; color: #FFFFFF; border: 0px; background-color: #FBBB13; background-repeat: no-repeat; background-position: 98% 48%; cursor: pointer; } .BtnLogin /* Steam绿 */ { font-weight: bold; font-family: "Microsoft JhengHei"; color: #FFFFFF; border: 0px; ...