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字体库，就下载下到本地引用吧。
网友评论