腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”。

到底这个line-height行高怎么就产生了高度呢?在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。

其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline boxes干的,这些手下就是文字啦,图片啊,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。




-- 《CSS中背景图片定位方法》




<div id="picture">
        <img src="bill.jpg" alt="Bill Gates">
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>


#picture {
        width: 100px;
.floatstop {




The default point of origin in the CSS transform property is the absolute (that is, horizontal and vertical) center. You can change this using the transform-origin property:

E  { transform: rotate( value ); }
h2 { transform: rotate(-25deg); }

E  { transform-origin:  value(s); }

E  { transform-origin: 200px 50px; }
E  { transform-origin: 100% 100%; }
E  { transform-origin: right bottom; }

E  {
    transform: translateX(value );
    transform: translateY(value );
E  { transform: translate(translateX, translateY); }

E  {
    transform: skewX( value );
    transform: skewY( value );
E  { transform: skew( skewX ,skewY ); }

E  {
    transform: scaleX(value );
    transform: scaleY(value );
E  { transform: scale(scaleX, scaleY); }

E  { transform: function( value ) function( value ); }
h2 { transform: rotate(-40deg) scale(0.75) translate(-46%,-400%); }

Transitions and Animations

The difference between Transitions and Animations is that the former is implicit and the latter is declared. That means Transitions only take effect when the property they are applied to ch anges value, whereas Animations are explicitly executed when applied to an element.

In CSS, a transition is an animation that moves a property between two states.

E  { transition-property: keyword ; }

h1 {
    font-size: 150%;
    transition-property: font-size;

This code sets an initial value of 150% on the font-size property and declares this is the property that w ill be transitioned when the (not yet specified) trigger is activated.

E  { transition-duration: time; }

The next property is transition-duration , which defines the length of time that the transition takes to co mplete.

To control the manner in which an element transitions between states we use the transition-timing-function property. This allows for variations in speed along the duration of the transition, which gives you control over the anima-tion’s pace. This property has two different value types: a keyword or the cubic-bezier function.

E  { transition-timing-function:  keyword ; }

The possible values for keyword are ease, linear, ease-in , ease-out, and ease-in-out . The default value is ease, which starts slowly, accelerates quickly, and slows down again at the end.

E  { transition-timing-function: cubic-bezier(x1, y1, x2, y2);}

cubic Bezier curves

E  { transition-delay:  time; }

Multi-column Layout Module in CSS3

two methods: either prescrip-tively by setting a specific number of columns or dynamically by specifying the width of columns and allowing the browser to calculate how many col-umns will fit into the width of the parent element. Prescriptive Columns: column-count

E { column-count: columns ; }

Dynamic Columns: column-width

E { column-width: length; }