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.asp RGB rgb（255,255,255） rgb（100%，100%，100%） 如果值超出可取范围，会被裁剪到最接近的范围边界 十六进制 简写：#f80->#ff8800 长度 0不需要单位 绝对单位 英寸in 厘米cm 毫米mm

字体系列：font-family 通用字体系列 5种 Serif: Times、Georgia 和 New Century Schoolbook Sans-serif:Helvetica、Geneva、Verdana、Arial 或 Univers Monospace:Courier、Courier New 和 Andale Mono Cursive: Zapf Chancery、Au

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

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

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

前景色 color 文本、边框 背景 所有背景属相都不能继承 backbroud-color 元素边框外边界之内，内容框、内边距、边框 默认值：transparent background-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，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。