CSS的元素显示模式

了解元素的显示模式可以更好的让我们布局页面。

2.1什么是元素的显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面。

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两大类型。

2.2块元素

常见的块元素有<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（1）比较霸道，自己独占一行。

（2）高度、宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%。

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素。

<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。

同理，<h1>-<h6>等都是文字类块级元素，里面也不能放其他块级元素。

2.3行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接。

特殊情况链接<a>里面可以放块级元素，但是给<a>转化一下块级模式最安全。

2.4行内块元素

在行内元素中有几个特殊的标签——<img>、<input>、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

（2）默认宽度就是它本身内容的宽度（行内元素特点）。

（3）高度，行高，外边距以及内边距都可以控制（块级元素特点）。

2.5元素的显示模式总结

2.6元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性

比如想要增加链接<a>的触发范围。

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

2.7一个小技巧 单行文字垂直居中的代码

CSS没有给我们提供文字垂直居中的代码。这里我们可以使用一个小技巧来实现。

解决方案：让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

line-height=盒子的高度。

2.8单行文字垂直居中的原理

简单理解：行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子的高度，文字会偏上，如果行高大于盒子的高度，文字偏下。

3.CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1背景颜色

background-color属性定义了元素的背景颜色。

一般情况下元素背景颜色默认是transparent(透明），我们也可以手动指定背景颜色为透明色。

3.2背景图片

background-image属性描述了元素的背景图像。实际开发常见有logo或者一些装饰性的小图片或者事超大的背景图片，优点是非常便于控制位置。

3.3背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

3.4背景图片位置

利用background-position属性可以改变图片在背景中的位置。

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。

1.参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。

如果只指定了 一个方位名词，另一个值忽略，则第二个值默认居中对齐。

2.参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

3.参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

3.5背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果。

3.6背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写并写在同一个属性background中，从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

这是实际开发中，我们更提倡的写法。

3.7背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

最后一个参数是alpha透明度，取值范围在0~1之间。

我们习惯吧0.3的0省略掉，写为background: rgba(0,0,0,.3)。

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

CSS3新增属性，是IE9+版本浏览器才支持的。

但是现在实际开发，我们不太关注兼容性写法，可以放心使用。

3.8背景总结

背景图片：实际开发常见于logo或者一些装饰性的小图片或者事超大的背景图片，优点是非常便于控制位置。