盒子模型常用到的样式有哪些？背景样式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:2px 2px 4px #000000;">我是刘小妞</h1>

效果如下：

字间距：word-spacing。字与字之间的距离，字与字之间需要有空格隔开。比如：

<p style="word-spacing:10px;">我 是 刘 小 妞</p>

效果如下：

如果把“我是刘小妞”之间的空格去掉，是不起作用的。

多个词之间有空格的代码如下：

<p style="word-spacing:10px;">我是刘小妞 栖息地</p>

效果如下：

元素中空白的处理方式：white-space。
它有很多值，但是，最常用的是不换行：nowrap。标签内的文本默认是换行的，设置了这个属性值，可以让文本不换行。

- 字体样式

字体的设置用一个属性就可以搞定：font。

可以给它设置多个值，比如：font:bold 16px;表示加粗16号字。

但是，我们用的时候，一般不会这样用，我们会单独设置。

字体：·font-family·。可以设置多个字体，比如：
font-family:"宋体" "Times New Roman";多个字体之间用空格隔开。
为什么要设置多个字体呢？这是因为，浏览器在解析的时候，它是按顺序解析的，如果浏览器不支持设置的第一个字体，它会尝试下一个，如果设置的字体它都不支持，那它就显示默认字体。

字体大小：font-size。这个很好理解，文字大小。它的属性值单位有很多种，最常用的是像素值。

字体样式：font-style。我们一般采取默认的字体样式，但是，有时候需要设置斜体，就会用到它，设置斜体是这样的：font-style:italic。在这多说一点，有一个HTML标签，本身就是斜体样式，它就是<i>标签。

字体粗细：font-weight。它可以设置具体的数值，从100到900，也可以设置为：

normal（正常）
bold（加粗）
bolder（更粗）
lighter（更细）

默认是normal，相当于数值400，bold相当于数值700。我们用的最多的是bold（加粗）。在这也多说一点，在HTML里有一个标签，本身就是加粗，它是<strong>。

再多说一句：<i>、<strong>是内联元素。

• 背景样式

和字体类似，背景用一个单词就可以搞定了——background。你可以在里面设置背景色、背景图片大小、位置等等。这些值是有顺序的，为了不增加大脑的记忆负担，我习惯分开写。

背景颜色：background-color。它的值和color的值一样，十六进制、RGB、颜色名称都可以。如果是设置背景色的话，直接用background就行，因为它不涉及大小、位置等等。

背景图片：background-image。它的设置格式是这样的：background-image:url('a.png');图片地址需要放在url(’’)里面。如果同时设置了背景颜色和背景图片，背景图片会把背景颜色覆盖。

背景图片大小：background-size。它可以设置固定的值，也可以设置百分比，还可以设置成cover和contain两个值。

写一下四种值的设置，如下：

background-size:100px 200px;
background-size:80% 60%;

第一个值是宽度，第二个值是高度。如果只设置了一个值，那第二个值为auto（自动）。

background-size:cover;
会保持图片的宽高比，将图片缩放完全覆盖设置区域的最小大小，如果图片宽高比例和设置区域的宽高比例不一样，那会裁切背景图片

background-size:contain;
会保持图片的宽高比，将图片缩放适合设置区域的最大大小，如果图片宽高比例和设置区域的宽高比例不一样，图片会完全显示，但是设置区域会有空白

背景图片起始位置：background-position。它的值有三种形式：固定的值、百分比、关键词。来写一下。

background-position:20px 30px;
background-position:20% 30%;

第一个值代表水平位置，第二个值代表垂直位置。默认都是0，也就是左上角。这两种方式可以混搭，比如第一个值是固定值，第二个值是百分比。如果只设定了一个值，第二个值将是50%。

水平方向关键词：

left（左）
right（右）
center（中间）

垂直方向关键词：

top（上）
bottom（下）
center（中间）

水平和垂直方向关键词可以随意组合。比如：

background-position:right top;

第一个关键词是水平方向，第二个关键词是垂直方向，如果只设定了一个值，第二个值默认是center。

背景图片重复：background-repea。它有四个值：

repeat：垂直和水平方向都重复，默认值。
repeat-x：只有水平方向重复。
repeat-y：只有垂直方向重复。
no-repeat：不重复。

背景图片是否固定：background-attachment。它有两个值：

scroll：背景图片随页面的其余部分滚动，默认值。
fixed：背景图片固定。

我们有时候会看到，鼠标滚动页面的时候，只有字在滚动，后面的背景图片并没有动，就是用的这个属性设定的。

- 布局相关样式

今天我们再来讲一些和布局相关的CSS属性。

内容溢出：overflow。

我们在写网页的时候，会经常遇到这种情况，设置了元素的宽高之后，发现里面的内容比设定的区域要多，如下：

这样，里面的内容就会溢出我们设定的元素。但是这并不是我们想要的，所以，我们就可以用overflow这个属性来设定成我们想要的效果。

它有四个值：

visible：默认值，内容不会被修剪，会呈现在元素之外。就像上面的效果一样。
hidden：隐藏，多余的部分会被隐藏起来不可见。效果如下：

scroll：会显示滚动条，多余的部分可以通过滚动条来查看。效果如下：

auto:它也是显示滚动条，它和scroll的区别是：它只有在内容溢出的时候才显示滚动条，如果内容没有溢出，不显示滚动条。scroll不管内容是否溢出，都会显示滚动条。auto比较适合内容可变的情况，比如，内容是从后台数据库读取的，并不知道会有多少内容，就可以设置成auto。

overflow只适用于设定了高度的块元素上。

定位：position。

正常情况下，是position默认值static的状态。

网页是一个文档流，默认状态是从上而下，依次排列的。

但是，我们可以通过定位属性（position），来设定不同的定位方式。

position除了默认值static。还有几个值，它们是：

fixed：固定位置。它的设定使元素的位置相对于浏览器窗口是固定的，即使窗口滚动，它也不会移动。这种状态，我们在网页当中经常看到。比如，页面上面有个固定的导航条，不管下面的内容如何滚动，它会一直固定在最上面。如下面这个例子：

absolute：绝对定位。它的位置是相对于最近的已定位的父元素，如果没有已定位的父元素，那么它的位置是相对于。HTML标签，默认是没有定位的。解释下父元素，其实很好理解，就是包裹元素的元素就是它的父元素，举个例子：

<div>
    <p></p>
</div>

<div>就是<p>的父元素。

固定定位（fixed）和绝对定位（absolute）都是脱离文档流的，它们不占据文档的空间，有点类似我们之前说的float。

relative：相对定位。它是相对正常位置来定位的，如果不给它设定位置，它和普通没有定位的标签看起来没什么两样。我们经常用它来包裹绝对定位的元素。

sticky：粘性定位。

粘性定位其实是相对定位和固定定位的切换，它是基于用户的滚动位置来切换。它必须设定了定位值才有效。本想上传一个关于粘性定位的视频，但是不知道什么原因一直上传不成功，想看视频的可以搜索微信公众号“刘小妞的栖息地”，上面在讲定位的时候有相关视频可以查看效果，这里就不放了。
那什么是定位值呢？

以上四种定位属性的位置，都是通过定位值来设定的。定位值包括：

left（左）
right（右）
top（上）
bottom（下）

他们有点像不定位元素的margin。它们位置的设定，都是相对于各自的参照物设定的。

IE, Edge 15 及更早 IE 版本不支持 sticky 定位。
Safari 需要使用 -webkit-prefix。

因为它们都是定位元素，当有多个定位元素的时候，就会出现重叠的问题。那应该谁在上谁在下呢？

如果不做任何设定，最后定位的元素将显示在最上面。如下代码：

<style>
	div{
		width:200px;
		height:200px;
		position:absolute;
		top:0px;
		left:0px;
	}
</style>

<div style="background:red;"></div>
<div style="background:blue;
left:10px;
top:10px;
width:100px;
height:100px;"></div>

效果如下：

蓝色的在上面，红色的在下面。

那如果不想改变html的结构，想让红色的在上面怎么办呢？

我们可以通过z-index属性来设置。

z-index的值是数字，可以是正数，也可以是负数，数值越大，越靠上。

今天关于页面样式常用样式的用法就写这么多啦，其他的更多的文章可以通过下面的图片关注阅读，查看其他的前端知识技能。有写的不好的地方欢迎大家多多指教，共同学习进步。