CSS - 文字盒子居中图片和背景区别、清除元素的默认内外边距

文字盒子居中图片和背景区别

1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin 改为 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

1. 插入图片 我们用的最多 比如产品展示类
2. 背景图片我们一般用于小图标背景 或者 超大背景图片

section img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}

aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;

background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
}

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
padding:0;         /* 清除内边距 */
margin:0;          /* 清除外边距 */
}

注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。