七.CSS的元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示，比如: <div>自己独占一行，而一行可以放很多个<span>
HTML元素 一般可以分为块级元素和行内元素
1. 块级元素
- 常见的：
<h1>~<h6><p> `` <div>`` <ul> `` <li>等，其中<div>很常见 - 特点： 1. 自己独占一行
2.高度，宽度，内外边距都可以控制
3.默认宽度是容器（父级元素宽度）的100%
4.是一个容器或盒子，里面可以放块级或者行内元素 - 注意：文字类元素内不能使用块级元素，例如
<P>标签里面不能放块级元素，特别是<div>, 还有<h1>~<h6>也是文字类块级标签
2. 行内元素
- 常见的：
<a> <span> <b> <em> <span>最常见 - 特点： 1. 相邻行内元素在一行上，一行可以显示多个
2.高和宽的直接设置是无效的
3.默认宽度是就是它本身内容的宽度
4.行内元素不可容纳块级元素，只可容纳文本或其他行内元素 - 注意：链接
<a>中不能再放链接，特殊地，链接中可以放块级元素，但给<a>转换以下块级模式更安全
3. 行内块元素
- 例如
<img> <input> <td>他们同时具有块级元素和行内元素的特点 - 特点： 1. 和相邻的行内元素（或行内块）在一行上，但他们之间有空白空袭，一行可以显示多个
2.默认宽度就是它本身内容的宽度
3.高度，宽度，内外边距都可以控制
4. 元素显示模式转换
1. 转换为块级元素 display:block
特别常见： 想要增加链接<a>的触发范围，就要将行内元素a转换为块级元素
2.转换为行内元素 display:inline
3.转换为行内块级元素 display: inline-block
<style>
/*行内元素a转换为块级元素,各占一行*/
a {
display:block;
width:400px;
height:40px;
background-color: pink;
}
/*块级元素div转换为行内元素，相邻行内元素在一行上，一行可以显示多个，高和宽直接设置不行，只与内容的高和宽相等*/
div {
width:400px;
height:40px;
background-color: red;
display:inline
}
/*行内块元素一行可以显示多个，可设高和宽*/
span{
width:400px;
height:40px;
background-color: green;
}
</style>
</head>
<body>
<a href="#">行内元素a转换为块级元素</a>
<a href="#">行内元素a转换为块级元素</a>
<div>俺是块级元素要转行内元素</div>
<div>俺是块级元素素要转行内元素</div>
<span>行内块元素span</span>
<span>行内块元素span</span>
<span>行内块元素span</span>
</body>
</html>
单行文字垂直居中 ：让文字的行高等于盒子的高度 line-height=height 实现文字在当前盒子内垂直居中
若行高小于盒子的高度，文字会偏上
若行高大于盒子的高度，文字会偏下
行高=上空隙+文字本身的高度+下空隙，行高的上下空隙将文字挤到中间了，上下空隙是透明的
八.CSS的背景
1. 背景颜色 backgroung-color
默认是透明的，transparent
可以取值三种形式： red 十六进制：#FF0000红色 rgb(255,0,0)红色
2.背景图片 background-imagine
默认是none
语法： background-imagine：url(访问图像的相对或绝对路径);
实际开发中常用于一些装饰性的小图片或超大的背景图片，优点是便于控制位置
3.背景平铺 backgroung-repeat
属性值：
- repeat（默认） 背景图像在纵向和横向上平铺，平铺指图像若比盒子小，则在x和y方向上多次复制平铺，直到将盒子平铺满
- no-repeat 背景图像不平铺
- repeat-x 背景图像在横向上平铺
- repeat-y 背景图像在纵向上平铺
可以同时添加背景颜色和背景图像，只不过背景图像会压住背景颜色
4.背景图片位置 background-position
通常指背景图片在盒子中的位置
background-position : 参数1 参数2 ；
参数代表的是x和y坐标 ,可以使用方位名词或者精确单位
1.参数是方位名词时
x方向：left center right
y方向：top center bottom
- 如果指定的两个参数都是方位名词时，则两个值前后顺序无关，例如 left top 和top left 的效果一致
- 若仅仅指定了一个方位名词时，另一个值省略，省略的值默认是居中对齐
2.参数是精确数值时
可以是百分数 或者 由浮点数和单位组成的长度值
- 如果指定的两个参数都是精确数值时，则两个值前后顺序有关，参数1 参数2 分别对应 x和y
background-position：20px 50px; 指的是背景图片在距离盒子左边侧20像素，距离盒子上边侧50像素
2.若仅仅指定了一个精确数时，此值一定是x坐标，另一个值省略，省略的值默认是垂直居中
background-position：20px ；指的是背景图片在距离盒子左边侧20像素，并且垂直居中
3.参数是混合单位时
如果指定的两个参数是精确数值和方位名词混合时，则两个值前后顺序有关，参数1 参数2 分别对应 x和y
<title>背景图片位置</title>
<style>
div{
width:400px;
height:100px;
background-color: pink;
background-image:url(小图标.html);
background-repeat:no-repeat;
/*background-position:bottom center;*/
/*background-position:bottom center;*/
/*background-position:255px 50px;*/
background-position: left 40px;
}
</style>
</head>
<body>
<div></div>
</body>
5.背景图像固定（背景附着） backgroung-attachment
设置背景图像是否固定或者随着页面的其它部分滚动
属性值：
scroll 背景图像随着对象内容滚动
fixed 背景图像是固定
6.背景复合写法 background （更提倡复合写法）
没有特定的顺序
但一般习惯：
background： 背景颜色 背景图片的地址 背景平铺 背景图像固定或滚动 背景图片位置
6.背景颜色半透明 background ：rgba(0,0,0,透明度)；
其中的最后一个参数透明度的取值范围是 0到1 之间
背景颜色半透明是指盒子背景半透明，盒子里的内容不受影响
