网页中CSS常用样式都有哪些？这篇文章已经为你整理好，需要的拿走

先打个预防针，今天的内容有点多，需要一些耐心哦。

废话不多说，直接进主题。

盒子模型相关样式

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

从里往外依次是：

width：盒子宽度。

height：盒子高度。

padding：内边距。

border：边框。

margin：外边距。

文本样式

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

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

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

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

颜色名称（比如：red）

最常用的是十六进制值。

对齐方式：text-align。

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

left（左对齐）

right（右对齐）

center（居中对齐）

justify（两端对齐）

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

刘小妞

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

text-decoration:none; 

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

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

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

水平阴影的位置（必需，可以是负值）

垂直阴影的位置（必需，可以是负值）

模糊的距离（可选）

阴影的颜色（可选）

写个小例子：

我是刘小妞

效果如下：

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

我 是 刘 小 妞

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

写多个词用空格隔开也是可以的。

比如：

我是刘小妞 栖息地

元素中空白的处理方式：white-space。

它有很多值，但是，最常用的是不换行：nowrap。标签内的文本默认是换行的，设置了这个属性值，可以让文本不换行。

字体样式

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

可以给它设置多个值，比如：font:bold 16px;表示加粗16号字。但是，我们用的时候，一般不会这样用，我们会单独设置。

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

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

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

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

normal（正常）

bold（加粗）

bolder（更粗）

lighter（更细）

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

、是内联元素。

背景样式

和字体类似，背景用一个单词就可以搞定了——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-repeat。它有四个值：

repeat：垂直和水平方向都重复，默认值。

repeat-x：只有水平方向重复。

repeat-y：只有垂直方向重复。

no-repeat：不重复。

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

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

fixed：背景图片固定。

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

布局相关样式

说到布局，我们应该不陌生了，前面我们用了两节课的时间来讲布局相关的知识。如果有不清楚的同学，翻看之前的文章。

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

内容溢出：overflow。

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

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

它有四个值：

visible：默认值，内容不会被修剪，会呈现在元素之外。就像上面的效果一样。

hidden：隐藏，多余的部分会被隐藏起来不可见。效果如下：

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

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

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

定位：position。

还记得在CSS布局里，我说一个网页文档可以理解为一个从上到下的拼图底板，写的所有标签可以理解为一个一个的拼图单片，正常情况下，单片是在底板上一个挨一个的。这种状态，是position默认值static的状态。

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

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

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

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

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

就是

的父元素。

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

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

sticky：粘性定位。这个很好玩，我们现在也经常会看到这种效果。

粘性定位其实是相对定位和固定定位的切换，它是基于用户的滚动位置来切换。它必须设定了定位值才有效。那什么是定位值呢？

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

left（左）

right（右）

top（上）

bottom（下）

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

IE, Edge 15 及更早 IE 版本不支持 sticky 定位。 

Safari 需要使用 -webkit-prefix。

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

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

div{

width:200px;

height:200px;

position:absolute;

top:0px;

left:0px;

}

效果如下：

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

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

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

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

ok，CSS常用的一些属性我们介绍的差不多了。大家可以用这些常用样式写一写简单的页面，多做练习。大家也可以识别下图的二维码关注“刘小妞的栖息地”查看更多的前端文章，感谢大家的支持。