css选择器第二次课

本节大纲

• CSS背景
• 对齐
• display
• 边框、圆角

课程内容

CSS背景

什么时候用图片，什么时候用背景图？
对于固定不变的内容，如图标等用背景图。对于可变的内容，图片是和内容相关的，用图片

• 背景颜色

background-color: #ff00ff;

• 背景图片

background-image: url(http://xxxx.jpg)
background-position: 0px 0px;
background-size: 30px 30px;  /* ie9及以上能用*/
background-repeat: no-repeat; /*repeat, repeat-x, repeat-y*/

• 对齐

  • 水平

    • 文本对齐 text-align: left(左对齐) center(文本居中) right(右对齐) justify(两边对齐)
    • div水平居中 margin: 0 auto (注意声明doctype);

  • 垂直

    • 文本垂直居中: 有两种方法
      1）另行高line-height等于外层容器高度height;
      2）上下padding设置相等。例子：文本垂直
    • 图像垂直居中:

  方式1：

  //ie8及以上使用
  display: table-cell;
  vertical-align: middle;
  

  方式2：
  在内层容器内加一个空元素。例子：图像垂直

  .item2:before{
    content: '';
    display:inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .item2 img{
    vertical-align: middle;
  }
  

  方式3：
  js处理，设置上下外边距等高

• display
  用于设置元素的显示类型，常用的值有: none, inline, inline-block, block, table-cell;

  • none: 隐藏该元素，不占用文档流
  • inline: 以行内元素的形式展示
  • inline-block: 行内块元素
  • block: 块级别元素
  • table-cell: 以表格方式展示，常用于垂直居中

• 边框
  设置边框样式和边框圆角

.div1{
    border: 1px solid #ccc;
}
.div2{
    border-left: 1px solid red;
    /*
    border-top: 1px solid red;
    border-right: 1px solid red;
    border-bottom: 1px solid red; 
     */
}

• 圆角

.div3{
    border-radius: 10px 6px 3px 1px;
    /*
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     */border-radius: 4px;*/
}