CSS拾遗

CSS3 background-clip 属性
background-clip 属性，规定背景的绘制区域，可以有三个值：

值 描述 border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。

display属性
display:block的特点：

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。

display:inline的特点：

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

字体
大多是CSS属性都允许以任何顺序书写关键字，但font例外。font的声明为：

font:<font-size> <font-family>;

例如：font: 100% sans-serif;

如果顺序颠倒了，或者漏掉了其中一个，浏览器会完全忽略这条声明。

字体类别：

• serif - 衬线字体
• sans-serif - 无衬线字体
• monospace - 等宽字体

每一类字体可以分为不同的字体族(font-family)，比如Times和Helvetica。
字体族又可以包含不同的字型（font face），反映了相应字体族基本设计的不同变化。如Times Roman、Times Bold、Helvetica Condensed和Bodoni italic。

行高
可以这样来使用行高：

font: 100%/2.5 Helvetica, sans-serif;

line-heigtht可以接收无单位的数值和有单位的数值

• 有单位数值
  例如：为1em或者100%时，将会将计算后的行高值传给全部的后代元素
• 无单位数值
  例如： line-height: 1; 表示后代元素使用一个换算系数

推荐：在html或者body元素以及任何可能包含后代的元素上应用行高时使用无单位数值。

元素的显示与隐藏

• display

  • 隐藏 display : none;
  • 显示，如何操作？
    obj.style.display = ''; 也可以在元素上添加与移除类。

• visibility

  • 隐藏 visibility:hidden; 依然会参与布局

将元素移除屏幕

.hide{position:absolute; top:-10000em; left:-10000em;}

再移动回来：

.show {top:0;left:0;}

如果是回到正常的文档流中，将position给位CSS的默认值：

.show{position:static;}

float
不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

请参考：

• 详解CSS float属性

position
请参考：

• 对CSS中的Position、Float属性的一些深入探讨

treehouse记录

a标签的focus状态，会在点击tab时触发

a:focus {  color: white;  background-color: orange;}

或者：

:focus {  color: white;  background-color: orange;}

display: inline 则margin bottom 和 top 无效，可以设置为display: inline-block

创建响应式的图片img：

img {  max-width: 100%;}

background-size: 40%; 指的是相对于元素背景的大小
background-size: cover;覆盖整个背景
background: #ffa949 url('../img/mountains.jpg') no-repeat center;简写

子元素浮动后，清除父元素的collapse：

.group:after {  content: "";  display: table;  clear: both;}

Text Shadows

h1 {  text-shadow: 2px 2px 1px #222;}

The first value sets the horizontal offset of the shadow. The second value sets the vertical offset. The third is an optional value that sets the blur radius of the shadow. The fourth value is the color value.

3D字体：3D text example - by Mark Otto

Box Shadows

.wildlife {    box-shadow: 15px 15px 10px 20px rgba(0, 0, 0, .8);}

• The first value sets the horizontal offset of the shadow
• The second value sets the vertical offset. The last value sets the color of the box shadow.
• The optional third value defines the blur radius in a box shadow
• The optional fourth value defines the spread distance of a box shadow.
• The last value sets the color of the box shadow

Gradients

• Using CSS gradients
• linear-gradient()
• radial-gradient()

透明的渐变和多重背景

  background: linear-gradient(#ffa949, transparent 90%),    linear-gradient(0deg, #fff, transparent),    #ffa949 url('../img/mountains.jpg') no-repeat center;

Web Fonts with @font-face
如何选择和使用web font？How to Choose and Use Webfonts

/*web fonts*/@font-face {  font-family:'Abolition Regular';   src: url('../fonts/abolition-regular-webfont.eot');  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),       url('../fonts/abolition-regular-webfont.woff') format('woff'),       url('../fonts/abolition-regular-webfont.ttf') format('truetype');}

Media Queries
Using the viewport meta tag to control layout on mobile browsers

<meta name="viewport" content="width=device-width">