前端知识（HTML，CSS，JavaScript）

1、display:block就是将元素显示为块级元素。

block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度

2、display:inline就是将元素显示为内联行内元素。

inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　, , , , , 和是inline元素的例子。

3、display:inline-block将对象呈递为内联块级对象。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

   (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

<背景图片的插入> ：在css中直接用body{background(-imag): url( ) }进行插入即可，同时要注意在css中p body h 等元素都是直接接括号。

<一些常用属性> ：

图像在水平方向上平铺：background-repeat：repeat-x；

图像不平铺：background-repeat：no-repeat；

图像大小：background-size ：100px(宽） 100px(高)；

：cover (图片完全覆盖背景区域)；

：25%(背景图片重复4张)；

：50%（宽占一半） 100%（高占满背景图片框架）；

图像位置：background-position ：center/right center；

：50%(水平位置） 50% (垂直位置）；左上角为0% 0%，右下角为100% 100%；

：10px(水平方向像素) 20px(竖直方向像素);

：inherit(继承父元素的位置)；

这里说下boder-image属性：

border-image-source: url( );

border-image-slice: 50% 50%;(图像的边界向内偏移)

border-image-width: 30 30;(图像边界的宽度)

border-image-outset: 20px 20px 20px 20px( 边框上下左右离内部的距离)

border-image-repeat: stretch(默认值，拉伸图像来填充) /repeat(平铺)/round(缩放图像；来适应区域)