在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。最常见的就是P和div这两个，说的简单点，块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地

标签属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条 标签属性：src：视频的URLposter：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视

Flexbox法CSS未来发展的方向就是采用Flexbox这种设计，解决像垂直居中这种共同的问题。请注意，Flexbox有不止一种办法居中，他也可以用来分栏，并解决奇奇怪怪的布局问题。.Center-Container.is-Flexbox {   display: -webkit-box;   display: -moz-box;   display: -ms-flexbox;   

我们都知道 margin:0 auto; 的样式能让元素水平居中，而 margin: auto; 却不能做到垂直居中……直到现在。

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。　　在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向

//DIV等标签中的内容垂直居中:/****************DIV 内容垂直居中样式  Begin:*************/.verticalMiddle{display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;

首先，阅读 w3c 对两者的定义：CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪元素种类区别这里用伪类 :first-child 和伪元素 :first-l

现在我们经常在 html 源码中看到如下的写法：这里的 ::after 和 ::before 就是我们今天来探讨的 css 伪元素之二 - :before && :after。伪元素首先我们要明白什么是伪元素，css 设置伪元素是为了方便给某些选择器添加特殊的效果。伪元素的语法格式一般为：selector:pseudo-element {property:v

在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写  CSS 代码就可以实现。现在的CSS3线性渐变(linear-gradient)技术也可以实现这样的效果喽！CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先

最近，公司有活动需要做一个HTML5版简单的抽奖程序，大家一听到这个需求感觉很简单，网上也多的是demo，但细细想想还是有许多东西要考虑的！需求：1.抽奖程序运作在平板电脑上，无网络，就是简单的HTML5页面，用浏览器直接打开，无需其它的运行环境；2.设置一二三等奖及参与奖，每个奖项可配置名额，设置抽奖概率，浏览器刷新时，历史的抽奖数据还要存在；3.能够看到抽奖的统计数据，包括每等

我想这样的一个需求很是会经常遇到的，研究了一下，现在记录下来，也希望分享给大家！先看一下效果图，如下所示：代码如下： $(function(){ var docHeight = $(window).height(); var docWidth = $(window).width(); $("#overlay").height(docHeight).cs

什么是Modernizr？Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外，Modernizr 网站通过定制脚本只对

转载：http://zh.learnlayout.com/clearfix.htmlclearclear 属性被用于控制浮动。比较下面两个例子： class="box">.......box { float: left; width: 200px; height: 100px; margin: 1em;}我感觉好像

如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。调整下浏览器窗口大小你就明白我的意思了！在解决这个问题之前，我们需要了解一个很重要的属性： display"display"属性display 是CSS中最重要的用于控制布局的属性。

转载:http://www.w3cplus.com/css/px-to-em使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。这篇

摘自:http://jingyan.baidu.com/article/656db918949b59e381249ce1.htmlhttp://wenku.baidu.com/link?url=Sxl7gcCFvEthLANWwv3QIOi1SeIWWlkvAG0wHy_d7uUgaa1W8LxnGEUHMHcjtYOTlxpB9fSOzT_NTIwvrq5wBzBeyCaC-ZNHxei

语法：border-radius ： none | {1,4} [ / {1,4} ]?相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值：：由浮点数字和单位标识符组成的长度值。不可为负值。bo

先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。    pt全称为po

CSS3内阴影（Inset）效果的文字我们可以用text-shadow属性来模拟文字的Inset效果，但这样做却不是真正的Inset，这里我主要是用CSS3的background-clip属性来完成这个Inset效果。CSS3中的background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。其语法如下：

除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 仅IE8可识别 仅IE9可识别 项目范例说明![if !IE]The NOT operator

网上摘取的，收录到自己的空间：FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000#FFB7DD#FF88C2#FF44AA #FF0088 #C10066 #A20055 #8C0044 #FFCCCC#FF8888#FF3333 #FF0000 

用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。基本原理原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：一个梯形当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；#demo11 { border: 10px solid #000; border