设置CSS盒模型为标准模型或者IE模型。标准模型：宽高只包括contentIE模型：包括border和padding box-sizing：1、content-box：默认值，border、padding不计算入width之内2、padding-box：padding计算入width之内3、border-box：border和padding计算入width之内原文：https://www.cnblogs.com/sunww/p/11338674.html
1、先观察关系的转换（http://pxtoem.com/）em优缺点1. em的值并不是固定的；2. em会继承父级元素的字体大小。所以我们在写CSS的时候，需要注意两点：1. body选择器中声明Font-size=62.5%；2. 将你的原来的px数值除以10，然后换上em作为单位；3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而...
（注：仅对css3对background的调整、增加的属性进行了翻译）css3对于backgrounds做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。1、多个背景图片在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：background-image: url...
:nth-child和:nth-of-type都是CSS3中的伪类选择器，其作用近似却又不完全一样，对于不熟悉的人对其可能不是很区分，本文就将介绍两者的不同，以便于大家正确灵活使用这两类选择器。先看下面两句css：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }①对于:nth-child选择器，简单的说，选择一个元素满足以下要求：这是个段落p标签元素该元素是父标签的第二个孩子元素 ②对于:nth-of-type选择器，意味着选择一个元...
这是一款效果非常逼真的jQuery和CSS3超逼真的图片放大镜特效。该图片放大镜特效使用CSS3的box-shadow和border-radius实现来制作放大镜的样式，使用jQuery来获取当前鼠标的坐标系，并修改当前坐标系的背景图像。在线演示：下载地址：http://www.htmleaf.com/jQuery/Image-Effects/201503171533.html原文：http://blog.csdn.net/souhugirl/article/details/44408917
1 圆点渐入渐出要点： 缩放和透明度的变化,循环变化<div class="demo1"></div>.demo1{width: 40px;height: 40px;margin: 0 auto;border-radius: 100px;background-color: red;opacity: 1;animation: fadeIn 1s infinite ease-in-out;}@-webkit-keyframes fadeIn{from{transform: scale(0);}to{transform: scale(1);opacity: 0;}}@keyframes fadeIn{from{transform: scale(0);}to{transform: scale(1);opacity: 0;}}2 线条loading图...
越来越喜欢CSS3的Transition属性 HTML:复制代码代码如下:<div class="nav"> <li><a href="#">HOME</a></li> <li><a href="#">LIFE</a></li> <li><a href="#">WEB</a></li> <li><a href="#">PHP</a></li> <li><a href="#">PIC</a></li> <li><a href="#">ABOUT</a></li></div>CSS:复制代码代码如下:<style>body{ background:#EDEDED;}</p> <p>.nav{ width:606px; margin:100px auto 0 auto;}</p> <p>li{ width:100px; height:30px; l...
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器，和伪类选择器，当是并没有做案例的研究，本想在那篇文章里面写，但想想如果把案例都写在那篇文章里面，对于查找来说就不是很方便，所有另开一篇来讲实例。 属性选择器[title]:选择带有title属性的元素[title=‘hello‘]:选择属性是title并且值是hello的元素[title~=‘hello‘]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开[title*=‘hello‘]...
语法:columns: column-width column-count;column-width 列的宽度。column-count 列数。浏览器兼容：Internet Explorer 10 和 Opera 支持 column 属性。Firefox 支持替代的 -moz-column 属性。Safari 和 Chrome 支持替代的 -webkit-column 属性。例如以下代码：<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16p...
代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">html,body {height: 100%;width: 100%;}* {margin: 0;padding: 0;cursor: default;}ul,li {list-style: none;position: relative;}a {text-decoration: none;color: #FFFFFF;}li {min-height: 40px;}#nav {background-color: #000000;width: 210px;height: 100%;color: #FFFFFF;}#nav>ul>li {text-align: center;transition: 300ms...
<!doctype html>无标题文档一、新增的选择器CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）序号选择器含义实例1E[att^="val"]属性att的值以"val"开头的元素div[id^="nav"] { background:#ff0; }2E[att$="val"]属性att的值以"val"结尾的元素 3E[att*="val"]属性att的值包含"val"字符串的元素 结构伪类选择器（过滤选择器） (注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。 由于...
原文转自：http://www.html5cn.org/article-7089-1.html前几天，HTML5标准已经尘埃落定，未来的Web将会是由HTML5主导，当然作为开发者对这一喜讯更为动心。本文主要分享了15个无比华丽的HTML5/CSS3动画应用，供大家参考学习。1、HTML5/CSS3图片选择动画 可选择多张图片今天我们来分享一款既炫酷又实用的HTML5图片选择特效，当图片被选中时，图片上就会覆盖一个半透明的层，上面有一个勾，并且在选中的时候图片出现弹跳的动画效果。...
【CSS3动画】 首先通过@keyframe创建动画@keyframes myfirst { from {background: red;} to {background: yellow;} } 或@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } 然后通过animation属性来指定动画div {animation: myfirst 5s; }【animation-fill-mode】animation-fill-mode : none | forwards | backwards | both;值描述none不改...
代码块html页面:<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>rotate image</title></head><body><div class="polaroid rotate_left"><img src="pulpitrock.jpg" width="284" height="213"><p class="caption">The pulpit rock inLysefjorden,Norway.</p></div><div class="polaroid rotate_right"><img src="cinqueterre.jpg" width="284" height="213"><p ...
1.html<div> <input type="checkbox" id="option"/> <label for="option"> <span></span> 点击1 </label></div><div> <input type="radio" name="my-radio" id="radio-option-1"/> <label for="radio-option-1"> <span></span> 点击2 </label></div><div> <input type="radio" name="my-radio" id="radio-option-2"/> <label for="radio-option-2"> <span></span> 点击3</label></div>2.cssbody { font-famil...