CSS：元素显示模式与背景

---

元素显示模式

什么是元素显示模式

元素显示模式就是元素（标签）以上面方式进行显示，比如div标签独占一行，span标签可以在一行内与其他元素共存。
网页的标签非常多，都有各自的布局特点，但是总体而言，它们被分为三大类：行内元素，块级元素以及行内块元素。

---

块级元素 block

常见的块级元素有：

--

，

，

，
，
1. ，
   等，其中div是最典型的块级元素。
   块级元素的特点：

   1.独占一行
   2.可以控制宽高，内外边距
   3.宽度默认值为父级元素的100%
   4.内部可以放其它行内元素或块级元素

   注意：文字类的块级元素，不能存放其它块级元素，否则会发生错误。
   示例：
   
   我们将一个div放在了p内部，在显示上，div独占一行，把上下的文字挤到两边，绿色的盒子是p，红色的区域是div，好像div在p的内部。
   但是当我们打开调试会发现，浏览器自动为你的代码添加了两个p标签，即被我绿色框出来的p，这样div就在p的外面了。
   所以这种文字类的块级元素内部不能存放块级元素。
   同理h1 - h6也不可以放块级元素。

   ---

   行内元素 inline

   常见的行内元素有：，，，，，等，其中span是最典型的行内元素。
   行内元素的特点：

   1.一行内可以放下多个行内元素
   2.无法设置宽高，设置了也无效
   3.宽高由其内容撑开
   4.只能容纳文本或者其它行内元素

   效果如下：
   
   蓝色区域就是这个行内元素span的宽高，可以发现，直接设置的宽高是无效的，最终宽高由内容决定。

   注意：a标签内部不能放a标签，但是a标签内可以放块级元素，是特殊的行内元素。

   ---

   行内块元素 inline-block

   行内块元素，是前两者的结合体，常见的行内块元素有：，，等。

   行内块元素特点：

   1.一行内可以有多个行内块元素
   2.默认宽度是其本身宽度（块级的默认快读是父亲的宽度）
   3.可以控制宽高和内外边距

   但是行内块元素的在同一行显示，和行内元素是略有区别的。
   行内块元素在一行内时，两个元素之间会有一点空隙，而行内元素则是紧紧挨着的。

   ---

   元素显示模式对比

   元素模式	元素排列	设置样式	默认宽度	包含
   块级元素	一行只能放一个块级元素	可以设置宽高	父级容器的100%	可以包含任何标签
   行内元素	一行可以放多个行内元素	不可以直接设置宽高	由内容撑开	只能容纳文本或者其它行内元素
   行内块元素	一行可以放多个行内块元素	可以设置宽高	由内容撑开	----

   ---

   元素显示模式转换 display

   CSS提供了一个属性display，用于转换元素的显示模式：

   属性值	对应元素
   block	转化为块级元素
   inline	转化为行内元素
   inline-block	转化为行内块元素

   示例：
   
   可以看到，经过转化后，span也可以独占一行了。

   ---

   背景

   背景颜色 background-color

   background-color定义了元素的背景颜色，其一般情况下是默认值：background-color: transparent;此属性值代表透明。

   属性值：背景颜色的属性值有四种形式，分别为关键字形式，rgb形式，rgba形式，十六进制形式：

   表示方式	属性值
   关键字	red,green,blue等，直接指定颜色
   rbg	rgb(255,255,255) 或 rgb(100%,100%,100%)
   rbga	rgba(255,255,255,0.5)
   十六进制形式	#ffaabb

   rgb形式
   此处的rgb分别代表red，green，blue三种颜色，每个颜色的取值为0-255。然后将三种颜色按照比例混合，就得到了你的目标颜色。比如rgb(50,100,150)，就是将红色，绿色，蓝色按照50 ： 100 ：150的比例混合得到的颜色。

   rgba形式
   相比于rgb形式，rgba形式多了一个a属性，这里的a代表透明度，取值范围为0-1。当a取值为1，代表不透明；当取值为0，代表完全透明。a值可以省略，省略是就是rgb形式，此时a默认值为1。

   十六进制形式
   16进制，其实也是和rgb形式一致的，十六进制的表示形式有六位值，其中每两位表示一个颜色。比如#112233中，11代表red的比例，22代表green的比例，33代表blue的比例。
   为什么可以这样做呢？在rgb形式中，每个颜色的取值范围是0-255，而两位16进制数字可以代表0-255的十进制数字，所以从十六进制的00-ff，刚好对应0-255。所以十六进制表示形式和rgb形式本质上是一致的。

   ---

   背景图片 background-image

   background-image属性描述了背景图像，实际开发常见于logo或者一些装饰性的小图片，以及超大的背景图片，优点是非常便于控制位置，而且不占用空间。
   属性值：

   属性值	作用
   none	无背景图片
   url	指定背景图片的路径

   ---

   背景平铺 background-repeat

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

   属性值	作用
   repeat	背景图片在横向和纵向平铺（默认值）
   no-repeat	背景图像不平铺，只显示一次
   repeat-x	只在横向平铺
   repeat-y	只在纵向平铺

   示例：
   这是默认情况下，在横向和纵向同时平铺：
   
   这是no-repeat情况下，背景图片只重复一次：
   
   这是repeat-x，只在横向平铺：
   

   这是repeat-y，只在纵向平铺：
   

   ---

   背景图片位置 background-position

   background-position可以改变图片在背景中的位置，其有两种参数模式：x轴和y轴的坐标，方位名词。
   方位名词包括：center，top，bottom，left，right。

   参数是方位名词情况下：

   1.如果设置一个方位名词，则第二个方位默认居中
   2.如果设置俩个方位名词，则前后两个值的顺序无关，比如left top和top left的含义相同
   3.top和bottom最多设置一个，left和right也最多显示一个

   示例：
   
   如果参数是精确单位：

   1.如果参数是精确坐标，第一个属性值一定是x坐标，第二个一定是y坐标
   2.如果只指定一个坐标值，则该值默认为x坐标，y值默认居中。

   ---

   背景附着 background-attachment

   background-attachment可以设置背景图像是否随着页面滚动。
   属性值：

   属性值	作用
   scroll	背景图像随页面滚动
   fixed	背景图像固定，不随页面滚动

   fixed的效果如下：
   

   ---

   背景复合写法 background

   为了简化背景属性的代码，我们可以将这些属性简写在同一个属性background上。
   当使用简写属性时，没有固定的顺序，但是一般习惯约定顺序为：
   background: 背景颜色 背景图片 背景平铺 背景附着 背景位置;

   ---