这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...
这篇文章主要介绍了CSS中对RGB颜色的使用详解,是CSS入门学习中的基础知识,需要的朋友可以参考下RGB颜色模型解释RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法，就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样。想象下如果你要配出一个纯蓝色，为了实现这个，你就不能把红色和绿色放进这个颜色里。所以我们就把红、绿设置为0%，把绿设置为100%：rgb(0%, 0%, 100%)结果:但如果你想要的不是...
这篇文章主要介绍了CSS中的inherit使用技巧小结,CSS中的继承关键字的使用是CSS入门学习中的基础知识,需要的朋友可以参考下稍不留意便会忽略掉级联样式表的特点。大多数开发者都知道inherit关键字，但有几个新的CSS3继承特性你可能不知道… property: inherit; inherit关键字代表“使用指定给父元素的所有值”。如果父元素中没有明确的值定义，浏览器搜寻DOM树直到找到相应的属性。最终无法找到的话，它会使用浏览器的默认值，例...
这篇文章主要介绍了关于CSS的positon属性的分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。基础知识postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元...
这篇文章主要介绍了CSS背景background、background-position使用方法,需要的朋友可以参考下背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。css2 中的背景(background)概述CSS2 中有5个主...
这篇文章主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下下面我们从3个方面开始介绍：1、scale(x,y) 对元素进行缩放X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5); 2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。默认值是1，基点一样在元素的中心位置。可以通过transform-origin来...
之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference)本文主要和大家介绍CSS里的BFC和IFC的用法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一 什么是 BFC和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。所谓的 Formatting context(格式化上下文), 它是 ...
关于margin我们是在熟悉不过的了，本文主要给大家介绍了CSS中margin的用法和常见问题的分析，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。一、简介margin我们一般习惯的叫它外边距，分别可以设置四个方向的外边距，这里不再赘述赋值语法。实际上，我们通常设置的margin是物理级别的设置，而margin还有start、end、before、after等，这些主要是逻辑级别的设置，如果你感兴趣的话，自行Google...
一、说明1.1 定义和用法transition 属性是一个简写属性，用于设置四个过渡属性：transition-property:规定设置过渡效果的CSS属性的名称。transition-duration:规定完成过渡效果需要多少秒或毫秒。transition-timing-function:规定速度效果的速度曲线。transition-delay:定义过渡效果何时开始。1.2 语法transition: property duration timing-function delay;1.3 transition-timing-function1.3.1 语法transition-timing-function: ...
这是通过css3伪类实现的3d按钮，html代码为： <p id="container_buttons"><p><a class="a_demo_three">点我！</a></p><p><a class="a_demo_three second_button">来嘛，别害怕！</a></p><p><a class="a_demo_three third_button">秋叶网络博客（www.mizuiren.com）</a></p></p>css代码为： #container_buttons{cursor:pointer;}.a_demo_three {background-color:#3bb3e0;font-family: Open Sans, sans-serif;font-size:12...
在很多设计图上，会有如下图开关或者单选，今天我就来讲讲如何用css去实现动态的开关。html代码中，是很简单的<input type="checkbox" id="1" class="checkbox"> <label class="switch" for="1"></label>下面是我们css代码<style>.checkbox {display: none;}.switch {width: 50px;height: 31px;background: #56ACFE;border-radius: 20px;padding: 1px;box-sizing: border-box;display: inline-block;margin-top: 15px;}.switch:aft...
特性： absoulte 与 float 具有相同的特性:包裹性,与破坏性 absoulte 与 float 可以交替使用 不受 relative 限制的 absoulte 定位,行为表现上可以不使用 left/right/top/button/auto 等属性行为表现 脱离文档流 去浮动( float 与 absoulte 元素不能同时出现) 位置跟随(还在原来的位置) 问题: IE7使用 absoulte 的元素永远是 inline-block 元素 解决: 外层套一层无设置属性的标签可以配合margin 精确定位 支持负值定位 兼...
层叠上下文: 三维概念,表示元素在Z轴的位置 层叠可嵌套,组合成一个分层次上下文 每个层叠上下文和兄弟元素独立,进行层叠变化或渲染时,只考虑后代元素 每个层叠上下是自成体系的层叠顺序1 background~border 2 负z-index 3 block盒子 4 float浮动盒子 5 inline/inline-block盒子 6 z-index:auto/z-index:0 7 正z-index特性 支持负值 支持 CSS3 动画 css2.1中需要和定位元素一起使用 如定位元素 z-index 发生嵌套: 后来居上的...
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>CSS实现图片等比例缩小不变形</title><link rel="stylesheet" type="text/css" href="../css/reset.css" /></head><style type="text/css">.wrap {width: 90%;height: 550px;border: 1px solid #000;margin: 50px auto;}ul {width: 100%;height: 100%;}ul li {overflow: hidden;float: left;width: 350px;height: 350px;border: 1px solid #aaa;margin: 90px ...
【CSS3和JS】对于CSS了解的同学都知道，CSS的实现是最底层的，在实现方式和性能上都不是，JS这种提供接口的脚本可比的；从CSS3的动画和JS动画对比角度来看两者，会更清晰；而且随着前端框架的使用，页面动画会越来越多的应用CSS3【CSS3的其他用法】除了动画的代替，还有就是对于各种交互的实现上，也体现了CSS的强大，更多的是使用CSS3提供的选择器；先来看个例子：可以更好的体现我这次对于CSS的深刻感悟<style> body{background:...