jhqdlove的专栏

display:table-cell通过将父元素设置为display:table-cell，并添加vertical-align: middle，它的子元素就可以实现垂直居中。 测试框架<div id="wrap"><div id="subwrap"></div></div>div#wrap { vertical-align: middle; display: table-cell

首先，背景设置为no-repeat，定位坐标才可以生效采用像素值来定位时，像素值意味着背景图片和元素左上角的差值。采用百分比时，效果却很奇怪，0% 0%时背景图片和元素左上角对其，100% 100%时背景图片和元素右下角对齐。查了资料，才知道原来采用百分比定位背景是遵守以下公式 x：（元素的宽度-图片的宽度）* X% y：（元素的高度-图片的高度）* Y%

position属性是指本体对上级的定位。有四个：static、absolute、relative、fixed先放测试代码： position-absolute 样式为 .father{ background: red; width:50%;

元素选择器h1>h1h1>h2>h2h2>h3>h3h3>h1{}h2{}h1,h2,h3{}通配符：* 通配所有原元素类选择器p class="c1 c2">c1c2p>.c1{}.c2{}.c1 .c2{}ID选择器p id="i1">i1p>#i1{}属性选择器简单属性选择选择有某个属性的元素

颜色命名颜色http://www.w3school.com.cn/cssref/css_colornames.aspRGBrgb（255,255,255） rgb（100%，100%，100%） 如果值超出可取范围，会被裁剪到最接近的范围边界十六进制简写：#f80->#ff8800长度0不需要单位绝对单位英寸in厘米cm毫米mm

字体系列：font-family通用字体系列5种Serif: Times、Georgia 和 New Century SchoolbookSans-serif:Helvetica、Geneva、Verdana、Arial 或 UniversMonospace:Courier、Courier New 和 Andale MonoCursive: Zapf Chancery、Au

缩进和水平对齐缩进text-indent 所有元素第一行缩进一个长度水平对齐text-align 块级元素 不控制元素对齐，只影响内容leftrightcenterjustify（两端对齐）垂直对齐line-height 文本行基线的距离，而不是字体的大小。确定元素框高度的增加减少 这是一个最小距离，而不是绝对数值 行间距：line-h

基本框元素框 外边距 边框 内边距 内容区包含框最近的块级祖先框、表单元格和行内块祖先框的内容边界构成块级元素width：做内边界到右内边界 height：上内边界到小内边界水平格式化元素框宽度：可见元素框（width+padding）+外边距（margin）水平属性margin-left（auto）border-leftpadd

基本元素框宽度和高度不可运用与行内非替换元素外边距和内边距外边距父元素的背景 百分数相对于父元素width计算，不论上下还是左右（对于定位元素上下外边距则不同）margin： 上右下左 上（右左）下 （上下）（右左）负外边距 上下外边距合并行内非替换元素只受left和right影响，top和bottom不会影响行高边框borde

前景色color 文本、边框背景所有背景属相都不能继承 backbroud-color 元素边框外边界之内，内容框、内边距、边框 默认值：transparentbackground-image:url（） 使用背景图片的时候，最好同时指定一个背景颜色background-repeat:repeat|repeat-x|repeat-y|no repeat 平铺模式

检测浏览器支不支持盒子模型可以使用 $.support.boxModel盒子模型分为两类：W3C标准盒子模型和IE盒子模型 这两者的关键差别就在于： W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 填充（padding）和边框（border）IE盒子模型——属性高（height）和属性宽（width）这两个值包含 填充（padding）和边框（border）如果在

CSS滤镜虽然只能在IE浏览器中表现出效果，但是仍不失为网页增加特效的好办法。1．CSS静态滤镜样式 （filter） CSS静态滤镜样式的使用方法：{ filter : filtername( parameters1, parameters2, …) }Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 opacity、finishOpacity、style、star

边框border-radius可继续拆分，它设置所有四个 border-*-radius 属性的简写属性兼容写法：.class_name{ border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值

display属性表格属性 display:table/inline-table 表格行属性 display:table-row-group/table-header-group/table-footer-group/table-row 表格列属性 display:table-column-group/table-column 单元格属性 table-cell 表标题 table-

翻译文章，原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css。在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能GPU概念图形处理器（ Graphics Processing Unit ）

简介Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。.box{ display: -webkit-flex; /* Safari */ display: flex;}.inlin-box{ display: -webkit-inline-flex; /* Safari */ display: i

box-sizingcontent-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit

简介由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。