02-css显示模式和背景

• css的元素显示模式

  元素（标签）以什么方式进行展示
  html元素一般分为:

  • 块元素
    • 独占一行
    • 高度，宽度，外边距，内边距都可以控制
    • 宽度默认是容器(父级宽度)的100%
    • 文字标签内部不允许再放块元素，比如 p,h
    • h,p,div,ul,ol,li
  • 行内元素:
    • 一行可以显示多个
    • 宽，高直接设置是无效的
    • 默认宽度是本身内容的宽度
    • 只能容纳文本和其他行内元素
    • 特殊：链接a 内部不能再放链接，但是可以放块元素，给a转换一下块级模式最安全
    • a,strong,b,em,li,del,s,ins,u,span
  • 行内块元素
    • 既有块元素和行内元素的特点
    • 有行内元素特点:一行访多个，但是他们之间有空白缝隙
    • 有块元素特点:高度，宽度，外边距，内边距可以控制
    • img, input,td

• 元素显示模式转换
  特殊情况下，我们需要元素模式转换，简单理解：一个模式的元素需要另一种模式的特性

  • 行内元素转块元素:

    • display: block;

    • 转换后可以设置宽度高度

    • 经常使用
      比如想要增加链接a的触发范围

      a {
              width: 300px;
              height: 100px;
              background-color: red;
              /* 将行元素转为块元素, 这样设置宽度高度有效果了 */
              display: block;
          }
      

  • 块元素转行内元素:

    • display: inline;
    • 转换后的元素高度宽度设置无效
    • 可以在一行展示
    • 不太常用
      比如想让多个div在一行显示:

    		div {
                width: 300px;
                height: 100px;
                background-color: gray;
                /* 将块元素转为行元素, 这样设置宽度高度没有效果了，但是可以在一行内展示多个 */
                display: inline;
            }
    

  • 行内元素转行内块元素

    • display: inline-block;
    • 转换后可以设置宽度高度
    • 经常使用

       	span {
              width: 300px;
              height: 100px;
              background-color: green;
              /* 将行内元素转为行内块元素，高度宽度设置有效果了 */
              display: inline-block;
          }
  

  • 如果想让单行的文字处置居中，就让行高和盒子高度一致，设置 line-height 和 height一致即可

• css背景

  • background-color 背景颜色 默认 transparent 透明的
  • background-image 背景图像
    • none 无背景图 默认
    • url 绝对或者相对地址指定背景图像
      ex:

  background-image: url(./images/bg.png);
  background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2350817201,1137116540&fm=26&gp=0.jpg);
  
  

  • background-repeat 背景平铺

    • repeat 默认
    • no-repeat
    • repeat-x
    • repeat-y

  • background-positon 背景位置
    可以使用方位名词或者精确单位

    • 方位名词 x y :left right center / top bottom center
      • 如果省略一个的话默认居中
      • 小的装饰性图片，不好调整位置，可以用背景图片来做
    • 精确单位 background-positon: 20px 50px
      • 严格按 x y的顺序
      • 如果只写一个 代表x, y默认center
    • 混合单位 background-positon: 20px center
      • 严格按 x y的顺序
      • 如果只写一个 代表x, y默认center

  • background-attachment 背景图像是否固定或者随页面滚动

    • scroll 随对象内容滚动
    • fixed 背景图像固定

  • 背景复合写法

    • background: 背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置
    • 顺序不固定
    • 提倡写法

  • 背景颜色半透明

    • 设置颜色半透明 background: rgba(0,0,0,0.3)
    • 里面的内容不会影响
    • 最新css支持，ie9之前的支持，现在不太关注兼容性写法了，可以放心使用
    • 习惯0.3 省略 0 直接写 .3