CSS（十一）--文字居中和盒子居中区别、插入图片和背景图片区别、display显示模式、网页布局

文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
2. 块级盒子****水平居中 左右margin 改为 auto
   text-align: center; ：文字 行内元素 行内块元素水平居中
   margin: 10px auto; ：块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以

插入图片和背景图片区别

1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin

2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position来定位

     img {  
    width: 200px;/* 插入图片更改大小 width 和 height */
    height: 210px;
    margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
    margin-left: 50px; /* 插入当图片也是一个盒子 */
    }
   
   
     div {
    width: 400px;
    height: 400px;
    border: 1px solid purple;
    background: #fff url(images/sun.jpg) no-repeat;
    background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
    }
   

display 是 显示模式

可以改变显示模式有以下方式:

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
  所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

网页布局

一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流
可以让盒子上下排列 或者 左右排列的
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3). 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。