1、display:block就是将元素显示为块级元素。
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
2、display: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(缩放图像;来适应区域)