我们先来看看CSS3 Api中对position属性的相关定义：static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，rig...
CSS页面布局允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。主要对文档流的改变进行布局。假设你已经掌握了CSS的选择器、属性和值，并且可能对布局有一定了解可以往下看，如果没有可以先看这篇博客css解析。 css实现左右布局css实现左右布局的方式大概有六种：1. table的li实现table标签是能够具有实现左右布局的属性,tr表示一行，td表示一列，tr中可以添加td实现盒子的左右布局....
有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongcss解决，这样可以提高性能，下面说一下我对:hover 的了解:之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使用吧定义和用法定义：:hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器适用于所有元素用法1...
透明往往能产生不错的网页视觉效果，先奉上兼容主流浏览器的CSS透明代码:.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }上面的几个属性分别是:opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。-k...
冬天来了，设计师说摇摇乐的场景需要随机下落的雪花动画，第一时间就想到的方法是canvas比较好，项目非常紧急，然而小程序对canvas支持不够友好，容易在项目中出现无法预估的兼容性问题 ，马上又否定了这种想法，想了想用javascript来写随机动画成本又高。既不用canvas也不用javascript来实现，最终决定使用css预处理器less来实现随机雪花，less怎么可能实现随机雪花？对于喜欢写css的人来说，这非常有趣。【推荐教程：CSS教程】上...
大家会使用CSS设定一个元素半透明吗？本文主要介绍了用CSS设定一个元素半透明的相关资料,非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。.opacity{ filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的浏览器*/}用 来设定一个元素为半透明.filter = "alpha(op...
这次给大家带来伪元素::before与::after使用详解，使用伪元素::before与::after的注意事项有哪些，下面就是实战案例，一起来看一下。前言众所周知::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。一、与普通元素一样可以给其添加样式比如说我想在文字前面添加一个图标，如果我用普通元素...
本文给大家分享css中很基础的知识，我们知道CSS中margin和padding是有区别的，在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。下面讲解 padding和margin常用的用法。一、padding1、语法结构（1）padding-left:10px; 左内边距（2）padding-right:10px; 右内边距（3）padding-top:10px; 上内边距（4）padding-bottom:10px...
本篇文章主要给大家介绍如何用css after伪类清除浮动的方法。首先大家要了解什么是css浮动？使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。也可以这样理解：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。那么我们为什么要清除浮动呢？这是因为浮动元素有时会影响整体...
解析CSS列表样式属性list-style平时制作页面中可对属性list-style在list-item对象中常用，但用的都不深。一般都设为none重置整个页面就差不多OK，可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解，更有可能对属性list-style和属性list-style-type概念会比较模糊，现有必要把它提出来重新学习一下，故整理如下。义和用法list-style 简写属性在一个声明中设置所有的列表属性。说明该属性是一个简写属性，涵盖了...
这篇文章主要介绍了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怎么设置倾斜的字体样式？本篇文章就给大家介绍用css设置倾斜字体样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们要知道在css中设置对象内字体倾斜常常是使用css font-style属性来实现的，font-style 属性可以定义字体的风格。下面我们通过简单的代码示例，为大家详细解说关于css给字体设置倾斜样式的方法！css字体倾斜样式代码示例（斜体）：<!DOCTYPE html> <html><head><meta charse...
本文主要介绍了href和src、link和@import的区别,解释了名词定义和应用场景,需要的朋友可以参考下，希望能帮助到大家。href和src的区别：href(Hypertext Reference)：超文本引用，常用的标签有link、a等，用来链接引用的外部资源。在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，如：<link href="style.css" rel="stylesheet" />src(source)：引入资源，引入的src的内容是页面必不可少的一部分...
语法：padding：[ <length> | <percentage> ]{1,4}默认值：看每个独立属性适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外继承性：无动画性：是计算值：看每个独立属性相关属性：[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]取值：<length>： 用长度值来定义内补白。不允许负值<percentage>： 用百分比来定义内补白。水...
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。margin</a>: 20px 0px; padding: 5px 5px 5px 10px; <a href=">如何插入样式表插入样式表的方法有三种:外部样式表内部样式表内联样式外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：<head> <link rel="st...