css背景属性和标签的转化

css背景属性

1. backgroun-color: 设置背景颜色
   可选值：颜色值

2. backgroun-image： 设置背景图片
   可选值：url(“图片路径”)

3. background-repeat： 设置图片的铺设方式
   可选值： repeat 默认值，背景图片将在垂直和水平方向重复平铺
   repeat-x 背景图片在水平方向平铺
   repeat-y 背景图片在垂直方向上平铺
   no-repeat 不平铺

4. backgroun-position：x y 设置背景图片的起始位置
   可选值：第一个值x代表水平的起始位置，第二个值y值代表垂直方向的起始位置。如果只写一个值，另一个默认为50%
   水平方向 垂直方向（正值向右下，负值向左上）
   如果只设置一个值，垂直方向默认居中。
       关键字（top,bottom,left,right,center）
       百分比
       具体长度值（px）

5. background:red url(./img/bg.jpg) no-repeat top
     复合属性：
       背景色 背景图片 平铺方式 背景位置
       可以单独定义一个背景色或背景图
       平铺方式和背景定位不能单独设置，必须配合背景图使用

标签的分类和转化

• 块级标签
  • div h1-h6 p ul li ol li dl dt dd
  • 总是从新行开始
  • 高度、行高、外边距以及内边距都可以控制
  • 宽度默认是容器的100%
  • 可以容纳内联标签和其他块级标签
• 行内标签
  • strong b em i del s span a
  • 和相邻行内标签在一行上
  • 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
  • 默认宽度就是它本身内容的宽度
  • 行内标签只能容纳文本或者其他行内标签
• 行内块标签
  • img td
  • 和相邻的行内标签在一行，但之间会有白色缝隙
  • 默认宽度就是它本身内容的宽度
  • 高度、行高、外边距以及内边距都可以控制
• 标签显示模式转换 display
  • 块转行内：display : inline;
  • 行内转块 ： display : block;
  • 块、行内转行内块 ： display : inline-block;