css--元素选择模式和背景

在了解了选择器之后，我们在来了解一下css的元素选择模式。了解标签的特点可以更好的的布局我们的网页。html网页的元素一般分为块元素和行内元素两种类型。
1.块元素
举例
< h1 >-< h6 > < p > < div > < ul > < ol > < li >
特点：自己独占一行
高度宽度内外边距都可以控制
默认宽度是容器（父级宽度）的100%
是一个容器以及盒子，里面可以放行内元素
注意：文字类元素内不能使用块级元素类型
< p > </ p>内不能再放< div >< div >
2.行内元素
< a >< strong >< b >< em >< i >< span >
特点：
相邻的行内元素再一行上，一行可以显示多个行内元素
高，宽直接设置无效
默认宽度就是他本身内容的宽度

行内元素只能容纳文本或者其他行内元素
注意：
链接里面不能再放链接
特殊情况链接里面可以放块级元素，但是给转换一下快模式更加安全
3.行内块元素
< img /> < input />< td >同时具有块元素和行内元素的特点

特点：
和相邻行内元素（行内块）在一行上，但是特们之间会有空白缝隙，一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度，行高，内外边距都可以控制（块元素特点）

4.显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性
转换为块元素：< display:block >
转换为行内元素:< display:inline >
转换为行内块元素：< display:inline-block >
单行文字垂直居中：让文字的行高等于盒子的高度
最后就是css背景，想让一个页面美观好看，一个好的背景图可以起到非常好的辅助效果，达到想要的目的。
可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1.背景颜色
background-color
2.背景图片
不要落下url
background-image：none/url(url)
属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
3.背景平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y
默认平铺为 repeat
4.背景图片位置
利用background-positon属性可以改变图片在背景中的位置
background-position：x y;
意思为：x坐标和y坐标，可以使用方位名词或者精确单位
length 百分数|由浮点数字和单位标识符组成的长度值
position top|center|bottom|left|center|right方位名词
如果是方位名词，比如 center right，则效果等价，跟顺序没有关系
background-position:top
此时第一个参数一定是y轴顶部对齐（因为只有垂直方向有top，center，bottom），第二个参数省略x轴是水平居中显示的