CSS基础样式

CSS背景

background-repeat:设置背景是否重复。

• no-repeat 不重复
• repeat-x 横向重复
• repeat-y 纵向重复
• repeat 重复

background-size:设置背景大小。

• 100px 100px; 高宽
• contain; 宽高比例不变，使图片缩放至自身在边框内可完全显示出来。
• cover; 宽高比例不变，使图片填充满整个边框，多出部分会被截掉。

简写

background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

简写成

background: #f00 url(background.gif) no-repeat fixed 0 0;

inline-block

display:inline-block

使元素即可不用占据一整行，又可以有效的设置其宽高边距边框。同时具有inline又有block的特性。

缝隙问题

1.删除元素之间的空白字符。
2.将其父元素font-size调整至0，再在其元素中调整回来。

对齐问题

因为inline-block默认是以（字符或者content)?为基准线对齐的。如需顶端对齐，则设置

vertical-align:top;

盒模型

由margin,border,padding,content一层包裹一层组成盒模型。

• 其中IE盒模型中height与width分别包括border,padding,content的长宽。亦可声明box-sizing:border-box;来应用此特性。
• W3C盒模型中height与width分包括content的长宽。亦可声明box-sizing:content-box;来应用此特性。

精灵图

CSS spirte 即将许多小图合并成一张大图以方便浏览器应用。
在线合成精灵图

字体图标

如果有相应的字体文件，浏览器便可绘制其相应的字体外形。这样我们便可以使用字体格式的图标。
在线字体库：

• iconfont
• fontawesome

如果电脑本体读不了iconfont字体库，就下载下到本地引用吧。