重温CSS

• 入门

  • 圆角

    border-radius

  • 阴影

    box-shadow 元素边界
    text-shadow 文字阴影

  • 渐变

    background-image属性新增的参数

    linear-gradient 纵向渐变
    radial-gradient 横向渐变
    repeating-linear-gradient 重复的纵向渐变
    repeating-redial-gradient 重复的横向渐变
    

  • 变换

    transform 对元素进行位移、偏转、拉伸、旋转等操作

    rotate() 旋转
    scale() 缩放
    skew() 扭曲
    

  • 盒子模型

    padding内边距呈现元素的背景
    margin是外边距，默认是透明的，不会遮挡其后的任何元素
    背景由内容和内边距、边框组成的区域
    内边距和边框主要的作用是装饰
    外边距主要用于布局，控制元素之间的距离
    

  • CSS兼容性

    -webkit前缀 Chrome、Safari
    -moz前缀 Firefox
    -ms ie浏览器
    -o Opera
    

  • 浮动
    • 块元素不设置宽度，默认是100%，设置浮动之后会根据内容自动调整
    • 清除浮动

      clear属性定义了元素的哪一侧不允许出现浮动元素：left/right/both
      

    • 清除浮动的两种方式

      方式1

      .clear {
        background: none;
        border: 0;
        clear: both;
        display: block;
        float: none;
        font-size: 0;
        margin: 0;
        padding: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
      }
      

    方式2 对父类使用伪类元素:after

    .clearfix:after {
      content: '020';
      display: block;
      height: 0;
      clear: both;
    }
    .clearfix {
      zoom: 1;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }
    

    <div class="clearfix">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    

• 选择器

  • 标签选择器

    全局样式

  • 类选择器

    .class

  • id选择器

    id

  • 通配符选择器

    *
    

  • 子元素选择器

    li > a

  • 后代选择器

    li a

  • 相邻元素选择器

    h1 + p

    两者必须拥有同一个父元素
    两者相邻
    

  • 属性选择器

    a[href]
    a[src^="https"] 模糊匹配

  • 组选择器

    h1, h2 {}

  • 复和选择器

    p.test{color:red;} 表示与的关系

  • 伪类选择器

    :hover
    :active
    :vistied
    :link
    :first-child
    :lang
    :link
    

  • 结构化伪类

    :nth-child(n)
    :nth-last-child(n) 反向选择
    :last-child
    :only-child
    :root 根元素
    

  • 状态伪类

    :enabled
    :disabled
    :checked
    

  • 否定伪类

    :not(S)