盒子模型常用到的样式有哪些？背景样式background怎么设置，绝对定位与相对定位的区别

- 盒子模型相关样式

盒子模型相关的样式，应该算是使用频率最高的。我们在前面的文章里也都有介绍过，在这里，我就给大家列一下，不再详说了，有不清楚的同学，可以翻看之前的博文。

从里往外依次是：

width：盒子宽度。
height：盒子高度。
padding：内边距。
border：边框。
margin：外边距。

- 文本样式

把盒子都设置好以后，接下来就是文本样式了。最常用的主要是：

颜色：color。它的值有三种形式：

十六进制值（比如：#ff00ee）

RGB值（比如：rgb(255,0,0)）

颜色名称（比如：red）

最常用的是十六进制值。

对齐方式：text-align。

它是用来设置文本的水平对齐方式，默认是左对齐。它的值主要是：

left（左对齐）
right（右对齐）
center（居中对齐）
justify（两端对齐）

设置行高：line-height。它的值的单位可以是像素也可以是百分比。主要是设置文字的行间距。它用的最多的场景就是设置文本垂直居中。适合只有一行文本的情况，设置它的值与height的值相等就可以了。比如：

<div style="width:100px;
height:100px;
line-height:100px;
background:#ff00ee;">刘小妞</div>

文本修饰：text-decoration。这个属性用的最多的场景是去除<a>标签自带的下划线，我们之前也提到过，它是这样设置的：

text-decoration:none;

它也有一些其他的值，但是各个浏览器支持的并不是很好，所以，我们也就不讲了。

文本缩进：text-indent。它只适用文本的首行缩进，值的话可以是固定的像素值也可以是百分比。

文本阴影：text-shadow。这个属于CSS3的属性了，它有四个值，依次是：

水平阴影的位置（必需，可以是负值）
垂直阴影的位置（必需，可以是负值）
模糊的距离（可选）
阴影的颜色（可选）

写个小例子：

<h1 style="color:white;
text-shadow