html-----布局、图片

1：display ：显示

   inline：行        无width、height属性 有margin和padding属性但在高度方向不起作用

   block：块         有width、height、margin、padding属性

   inline-block：内联    行显示，具备块属性

 2：position：对其

div为块级

   默认值：       定位属性top,bottom,left,right或者z-index声明无效

   relative：     相对定位的，定位属性有效，正常定位，底部对其

   absolution：      绝对定位，后方div向前对其，本身顶部对其

div为内联

    默认值：      定位属性top,bottom,left,right或者z-index声明无效

   relative：     相对定位的，距离top从上一div开始计数

   absolution：   绝对定位的，距离top从默认开始计数，不受上一div影响

3：div内部居中

子为内联或行级元素          父：text-align: center;  定位属性有效

子为块级元素                子：margin: 0 auto;    定位属性有效

 

4：div内部居左右

子： float: right;  float: left;  定位属性有效

 

5：div内部垂直居中

父为块或者内联：控制上下左右的大小可以移动其距离中心的位置

父：position: relative;

    子：position: absolute;margin: auto; top: 0;left: 0;bottom: 0;right:0;

 

父为块或者内联：

父：position:relative;

子：position:absolute;left:50%;top:50%;margin-left:-(宽/2)px;margin-top:-(高/2)px;

 

父为行样式：

没有高度height，无法设置垂直居中

可以设置行高line-height

 

 

6：图片布局-img标签

不设置高度：按照原图显示。

只设置宽度：按照宽度等比例缩放。

只设置高度：按照高度等比例缩放。

设置宽高：按照指定宽高，进行缩放显示。图片可能变形

   

7：图片布局-background-image标签

    div：不设置宽高，不显示图片，因为高度为0

    div：设置高度，或者设置宽高，图片原图显示

    background-size:宽(auto) 高; 图片可能变形，但是会显示多张图片铺满该标签

    background-repeat:no-repeat;设置大小后，只显示一张图片