元素显示模式是什么？：
由于网页中的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示，比如<div>独占一行，比如一行可以放多个<span>标签
html元素一般就分为块元素和行内元素两种类型
块元素：
常见的块元素有<h1>---<h6>,<p>,<div>,<ul>,<ol>，<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
1：独占一行 2：高度，宽度，外边距以及内边距都可以控制 3：宽度默认是容器（父级宽度）的100% 4：是一个容器及盒子，里面可以放很多行内或者块级元素
举例：
<head> <style> div { width: 500px; } </style> </head> <body> <div><img src="教学楼.jpg"/></div> <div><img src="餐厅.jpg"/></div> <div><img src="图书馆.jpg"/></div> </body>
显示：
注意：
文字类的元素不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素特别是不能放
<h1>-<h6>等都是文字类块级标签，里面不能放其他块级元素
行内元素：
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s><ins>,<u>,<span>等，其中<span>标签是典型的行内元素，有的地方也将行内元素称为内联元素。
行内元素的特点：
1：相邻行内元素在一行上，一行可以显示多个。 2：高，宽直接设置是无效的 3：默认宽度就是它本身内容的宽度 4：行内元素只能容纳文本或者其他行内元素。
举例：
<hea<head> <style> .span1{ width: 200px; height: 200px; } </style> </head> <body> <span class="span1">我是行内元素1</span> <span>我是行内元素2</span> <span>我是行内元素3</span> </body>
显示：
注意：
链接里面不能再放链接
特殊情况链接里面可以放块元素，但是给<a>里面可以放块级元素，但是给<a>转换一下块级模式会更安全。
行块内元素：
在行内元素中有几个特殊的标签------<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点。
行内块元素的特点：
1：和相邻行内元素(行内块)在一行上但是它们之间会有空白缝隙，一行可以显示多个(行内元素特点) 2:默认宽度就是它们本身内容的宽度(行内元素特点) 3:高度，行高，外边距以及内边距都可以控制（块级元素的特点）。
举例：
<head> <style> .span1{ width: 200px; height: 200px; } </style> </head> <body> 我是行内块元素1<input class="span1"></input> <td>我是行内块元素2</td> 我是行内块元素3<input></input> </body>
显示：
通过两种显示，我们不难发现，我们在head中设置的样式对于行内元素来说是毫无意义的，但是它却能很好的改变行内块元素的高度等信息。
CSS的元素显示模式总结：
元素显示模式转换：
特殊情况下，我们需要元素模式的转换---->一个模式的元素需要另一个模式的特性。
比如：想要增加<a>的触发范围。
转化方法：
转换为块元素:display:block; 转换为行内元素:display:inline; 转换为行内块元素:display:inline-block;
举例：
<head> <style> div{ width: 300px; height: 100px; background-color:aquamarine; } </style> </head> <body> <div><a href="#">java</a>我是Java</div> <div><a href="#">web</a>我是wen</div> <div><a href="#">c语言</a>我是C语言</div> </body>
显示：
通过上面的学习我们知道
是一个块级元素，它单独占据一行，当我们想将如上所示的三个超链接显示在同一行上，就可以使用模式转换：
添加：
display: inline;
显示：
注：我们在style中设置的宽度和高度并不会在行内元素中体现出来，行内元素的高度和宽度与它内容有关。
添加：
display:inline-block;
显示：
get一个实用小工具：
snipaste:可将一个界面上的内容通过截图的方式，贴到电脑屏幕上，这样就不需要来回的切换界面啦
使用方法：
使用完成后直接关闭即可！
或者还可以使用快捷方式：
F1可以截图，同时测量大小，设置箭头，书写文字等 F3在桌面置顶显示 点击图片，alt可以取色(按下shift可以切换取色模式) 按下esc取消图片显示
实现单行文字垂直居中：
CSS并未提供可使文字垂直居中的代码，这里我们可以使用一个小tips来实现：
具体方法即为：使文字的行高等于盒子的高度便可以让文字在当前盒子内垂直居中
单行文字垂直居中的原理：
line-height用来设置行高：
文字与盒子的关系：
行高=盒子的高度：文字居中
<head> <style> div{ height: 40px; background-color:aquamarine; line-height: 40px; } </style> </head> <body> <div>我是Java</div> </body>
显示：
行高<盒子的高度：文字偏上
div{ height: 40px; background-color:aquamarine; line-height: 10px; }
显示：
行高>盒子的高度：文字偏下
div{ height: 40px; background-color:aquamarine; line-height: 60px; }
显示：
CSS的背景：
背景属性可以设置颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
背景颜色：
background-color属性定义了元素的背景颜色。
background-color:颜色值;
举例：
<head> <style> div{ height: 300px; background-color:antiquewhite; } </style> </head> <body> <div><font color="red">我是Java</font></div> </body>
显示：
一般情况下，元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色。
背景图片：
background-image属性描述了元素的背景图像，实际开发常用于logo的设计或者是一些小图标之类的，优点是非常方便控制位置。
//none表示无背景图 //url---->使用绝对或相对地址指定背景图片 background-image:none|url(url)
举例：
<head> <style> div{ height: 300px; background-image: url(图书馆.jpg); } </style> </head> <body> <div><font color="red">我是Java</font></div> </body>
显示：
background-repeat: repeat;//平铺效果如上所示（默认效果）----在纵轴和横轴向上平铺
背景平铺：
background-repeat用来设置背景图片是否需要平铺，默认是平铺的。
background-repeat: no-repeat;//不平铺效果如下所示
background-repeat: repeat-x;//沿x轴平铺
background-repeat: repeat-y;//沿y轴平铺
页面元素既可以添加背景颜色也可以添加背景图片，但是同时添加这两个属性，背景图片会将背景颜色覆盖。
背景位置：
通过background-position属性对其进行设置！
background-position: 方位名词;
举例：
background-position: right top;//显示在页面的右上角 background-position: left top;//显示在页面的左上角
注:如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致，但是如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精准单位：
举例：
background-position: 500px 500px;//指定x坐标和y坐标
background-position: 500px;//指定x坐标，y坐标上垂直居中
显示如下：
background-position: right;//水平一定是靠右侧对齐，第二个参数省略-->y轴是垂直居中对齐的
显示如下：
参数是混合单位：
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
background-position: 500px top;
背景图像的固定：
background-attachment：用来设置背景图像是否固定或者随着页面的其余部分滚动，它常用于制作时差滚动效果
background-attachment：scroll | fixed //scroll：背景图像随对象内容进行滚动 //fixed：背景图像固定
背景图片复合写法：
为了简化背景属性的代码，我们可以将有关background的属性写在同一个background中：
例如：
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 background：transparent url(img.jpg) repeat-y fixed top;
背景半透明色：
background：rgba(0,0,0,0.3);
最后一个参数为alpha透明度，其取值范围在0-1之间，0.3也可以直接写成.3
注意：背景半透明是指将对应的背景半透明化，其中的内容并不会受到任何影响
效果举例：
CSS的背景总结：
