原文链接：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置

此段代码实现动态计算，事实上他做了这几样事情：动态改写  标签给  元素添加 data-dpr 属性，并且动态改写 data-dpr 的值给  元素添加 font-size 属性，并且动态改写 font-size 的值代码：[javascript] view plain copy print?;(function(wi

原文链接：http://caibaojian.com/flexible-js.html由于移动端特殊性，本文讲的是如何使用rem实现自适应，或叫rem响应式布局，通过使用一个脚本就可以rem自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。rem是相对于根元素html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px

原文地址：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers前言只看问题点这里看全部问题和答案点这里本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识

阅读目录方法一：position加margin 方法二： diaplay:table-cell 方法三：position加 transform 方法四：flex;align-items: center;justify-content: center 方法五：display:flex;margin:auto 方法六：纯position 方法七：兼容低版本浏览器，不固定

1.CSS Sprites的优点(1)利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这也是CSS Sprites最大的优点；(2)CSS Sprites能减少图片的字节，曾经多次比较过，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。2.CSS Sprites的缺点(1)在图片合并时，要把多张图片有序的、合理的合并成一张图片

border-image属性的最简单的使用方法如下：border-image:url(图像文件的路径) A B C DA B C D 4个参数表示当浏览器自动把边框使用到的图像进行分割时的上边距、右边距、下边距、左边距。border-image：url(borderimage.png) 18 18 18 18 分割如下图：图像被分割成9部分。被分割为9部分的图像

定义和用法通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 10

示例代码如下：  div{     border:solid 5px bule;     border-top-left-radius:10px;     border-top-right-radius:20px;     border-bottom-right-radius:30px;     border-bottom-left-radius:40px;   

在CSS3中可以在一个元素中显示多个背景图像，还可以将多个背景图像进行重叠显示，从而使得调整背景图像中所使用的素材变得更加容易。如在一个div元素显示多个背景图像，代码如下：div{    background:url(flower-red.png),                       url(flower-green.png),                   

Bug由来从1.4.0版本开始，less添加了一个很好用的内置函数:data-uri。这个函数可以自动将less代码中引用的图片进行base64编码。比如我们要引用一个小图片作为背景，我们可以这样写： .foo-icon { background: data-uri('./img/foo.png') no-repeat; *background": url

CSS2.0 HandBook上的解释： 　　设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。TRBL属性（TOP、RIGHT、BOTTOM、LEFT）　　当设定position:absolute 　　如果父级（无限）没有设定positio

CSS样式中不是全部的属性都是可以被子元素继承的，下面列出 CSS中可以和不可以继承的属性。不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-in

原文地址：http://www.cnblogs.com/zhanggf/p/5903410.htmlcss是不能够定义变量的，也不能嵌套。它没有编程语言的特性。在项目开发中，常常发现有很多css代码是相同的，但我们通常都是复制然后粘贴。举个例子：假设h5应用里主题色是#FF3A6D，可能用于文字或者背景色。通常开发中，哪里需要这个颜色，我们就复制这个颜色并粘贴。下次要修改就得全

ackground-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同。ht

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。语法和解释border-radius可以

1.CSS画实心圆长度和宽度相等，border-radius设置为长度（宽度）的一半。#circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px;}2.CSS画空心圆和画实心圆方法类似，只是将border大小

今天做东西，遇到了这个问题，百度后总结得到了这个结果。 首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ c

滚动类特效常用属性：scrollLeft 、scrollTop：设置或获取位于对象最顶/左端和窗口中可见内容的最顶/左端之间的距离。即当前上滚或左滚的距离。scrollHeight、scrollWidth：获取对象可滚动的总高度/宽度offsetLeft、offsetTop：获取当前对象与父元素之间的距离（不包含父元素的边框）offsetWidth、 offsetHeight ：获

原文链接：http://web.jobbole.com/87938/挖掘你之前未曾见过的一些应用。PS：文章末尾的 codepen 有8个不错的案例。“box-shadow”属性box-shadow属性是一个CSS3属性，允许我们在几乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出

overflow属性1.如果将overflow属性值设定为hidden，则超出容纳范围的文字将被隐藏起来。div{  overflow:hidden;}2.如果将overflow属性值设定为scroll，则div元素中将出现固定的水平滚动条与垂直滚动条，文字超出div元素的容纳范围时将被滚动显示。div{  overflow:scroll;}3.如果将overf

div{  word-wrap:break-word;}word-wrap属性可以使用的属性值为normal与break-word两个。使用normal属性值时浏览器默认处理，只在半角空格或者连字符的地方进行换行。使用break-word时浏览器可在长单词或URL地址内部进行换行。目前，word-wrap属性得到了所有浏览器的支持。

1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能。2.指定自动换行的处理方法在CSS3中，可以使用word-break属性来自己决定自动换行的处理方法。div{    word-break:break-all;}word-break属性可以使用的值值换行规则IE5以上Safari与Chromenormal使用浏览

1.box-shadow属性让盒子在显示时产生阴影效果。目前为止，该属性受到了FF、Chrome、Safari、Opera浏览器的支持。box-shadow属性的指定方式如下所示：box-shadow：length length length color前三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径，color指阴影的颜色。2

将元素指定为run-in类型或者compact类型时，如果元素后面还有block类型的元素，run-in类型的元素将被包含在后面的block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边。

一. Webkit浏览器      (1) 第一种写法：            background:-webkit-gradient(linear ,10% 10%，100% 100%，                                                              color-stop(0.14,rgb(255,0,0)),

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width之内padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了~ ie8+浏览器支持cont

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩

示例文本1示例文本1-1示例文本1-2示例文本2示例文本2-1示例文本2-2CSS2中使用属性选择器来设置[id = section1]{     background:yellow;}CSS3中的属性选择器1.[att*=val]属性值包含用val指定的字符[id*=section]{    background:yellow;}

1.伪类选择器在CSS中，最常用的伪类选择器是使用在a（锚）元素上的几种选择器，它们的使用方法如下：a:link{color:#FF0000;text-decoration:none}a:visited{color:#FF0000;text-decoration:none}a:hover{color:#FF0000;text-decoration:none}a:active{c

1.单独指定第一个子元素、最后一个子元素的样式li:first-child{  background:yellow;}li:last-child{   background:blue;} 2.对指定序号的子元素使用样式li:nty-child(2){  background:yellow;}//对第二个子元素设定背景色li:nth-las

1.root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含整个页面的部分。:root{background:yellow;}body{background:green;}注意：不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成了绿色。 2.not选择器

1.使用nth-child和nth-last-child时会产生的问题在使用nth-child和nth-last-child时，其计算子元素是奇数个元素还是第偶数个元素时，是连同父元素中的所有子元素一起计算的。当父元素是列表时，列表中只可能有列表项目一种子元素，所以不会出问题，但是当父元素是div时，div包含多种子元素，会出现问题。2.使用nth-of-type和nth-last-o

首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像，这里我记录的是利用这个content属性来在项目前插入项目编号，同时可以利用content属性在字符串两边加上括号。1.在多个标题前加上连续编号 h1:before{   content:counter(mycounter);   } 2.在项目编号中追加文字

//只对li1设置样式li:nth-child(1):nth-last-child(1){   background:yellow;}列表1  li1列表2li1li2另外：可以直接使用li:only-child{   background:yellow;}来达到相同的目的。

1.给DIV设置属性：width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候，超出的部分会以“...”的形式显示。 2.上面那个案例之适用于单行文本的现实，才会有效。但当div里面的内容出现多行的时候则不能达到预期的效果。下面是解决多行的时候显示“...”的方案。 [h

position：absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级（祖父）元素没有设置position属性的时候，该元素的position：absolute会参考body进行定位。 换句话说是如果父级设置了position（且值为非static），参照（最近的）父级的内容区域的左上角为初始点，结合top left right bottom 进行定位；

前几天做个邮箱系统，其中在内容的div设置了高度为200px;可是在内容大于200高度后就出现了内容的溢出。如图：查完资料够才知道css有个min-height;设置div的初始化高度，设置属性就适应内容的高度。 如图：ok了。

div{      overflow:hidden;      white-space:nowrap;      text-overflow:ellipsis;   }当通过把overflow属性的属性值设定为hidden的方法将盒中容纳不下的内容隐藏起来，如果使用text-overflow属性，可以在盒的末尾显示一个代表省略的符号"..."。但是，text-overflo