本文设计的css属性有background,inline-block,line-height,background1.background-color设置背景图片的颜色background-color:blue;2.background-repeat用于控制背景图片重复方式主要用于背景图片区域小于背景容器区域no-repeat背景图片不重复repeat-x水平重复repeat-y垂直重复重复所有画面背景重复：不重复；3。background-imagebackground-image:url(http://js.jirengu.com/images/dave.min.svg);//url为图片的网络地址，可以将图片下载到本地，使用图片的相对地址。例如url(flower.png)4.background-position设置背景图片的起始位置（默认参考点为左上角）x,y//x的值表示x从左到右的偏移量,y的值表示从左到右的偏移OffsetyX%从上到下,y%//背景图片容器定位区域的大小减去图片的大小。positionx=(containerwidth-imagewidth)*percentxpositiony=(containerheight-imageheight)*percenty[leftcenterright][topcenterbottom]5.background-attachment设置背景图片是否固定，是否跟随其他部分滚动时的页面。参数fixed该关键字表示背景相对于视口是固定的。即使元素有滚动机制，背景也不会随着元素的内容滚动。local这个关键字表示背景相对于元素的内容是固定的。如果一个元素有滚动机制，背景会随着元素的内容滚动，背景的绘制区域和定位区域是相对于可滚动区域而不是它们的包含边框。scroll该关键字表示背景相对于元素本身是固定的，而不是随其内容滚动（对元素边框有效）。p{background-image:url("http://js.jirengu.com/images/dave.min.svg");/*背景附件：滚动；*//*背景附件：已修复；*/背景-附件：本地；背景重复：不重复；backgound-size:contain;}//简单来说fixed相对于用户看到的视图窗口是固定的，另外两个参数可以滚动。具体见demo链接说明6.background-size用于设置背景图片的大小。该属性是CSS3的属性，IE9及以下不支持，需要注意兼容性。cover缩放背景图像以完全覆盖背景区域，可能部分不可见。根据容器的高度缩放背景图像。contain缩放背景图像以完全适合可能部分空白的背景区域，背景图不能裁剪到100px，100px可以设置背景图的宽高值。也可以只写一个200px的值，也就是说最大长宽都是200px。也可以设置为50%，高度为容器的50%。7.简而言之，除了background-size之外的所有背景属性都可以写在一起，background-size要分开写。background:#f00fixedurl(http://js.jirengu.com/images/dave.min.svg)00no-repeat;background-size:300px300px;demolinkdescription8.必须为容器设置注意事项height，如果不展开容器的高度，则无法显示背景图片。就像内联元素一样，没有办法设置宽高。背景图片显示不正确。2.显示：inline-block1。显示了inline的特性（不占整行，宽度由内容决定）2.也显示了block的特性（可以设置宽高，内外边距）3.有是间隙当两个内联元素并排排列时，如果没有设置外边距，就会出现间隙问题，因为span和span都有一个空白字符。消除间隙的方法有两种，如下图所示。(1)span和span相邻(2)将空白字符的fontsize设置为0，消除了空白字符占用的空间。然后重新设置子元素4的font-size。这两个内联元素很容易出现错位的情况。代码演示链接描述的是前面的盒子没有任何字符，此时它的基线是它的底边，后面的盒子有文字，所以盒子的基线就是文字的基线，两个基线是对齐以实现此效果。inline-block的baseline是正常流中最后一个linebox的baseline，除非linebox中没有linebox或者overflow属性本身的计算值是不可见的，这种情况下baseline是边距的底部边缘。你必须使用vertical-align:top;使inlineblock元素与基线对齐的内容垂直对齐，这更复杂。这篇博客写的比较清楚。链接说明3.line-height用于设置单行文本的行高。height=2
