css

CSS知识总结

CSS知识总结

Posted by SkioFox on October 10, 2017

CSS 知识点汇总

  • 画一条0.5px的线
    // 采用meta viewport的方式

    // 1px像素线条     
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 

    // 0.5像素线条     
    <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

    //采用 border-image的方式

    // 首先需要自己制作一个0.5像素的线条作为线条背景图片。

    p{      
        border-width: 0 0 1px 0;      
        border-image: imageUrl 2 0 round; 
    }

    // 采用transform: scale()的方式

    transform: scaleY(0.5);
    transform-origin: 50% 100%; // 不设置会模糊

    // 伪元素+ scale 也是移动端1px实现方案

    // 假设给盒子设置下边框
        .box{
            width:100px;
            height:100px;
            position:relative;
        }
        .box :after{
            content:"";
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:1px;
            transform:scaleY(0.5);
        }

    // 设置四周边框:

        {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 200%;
            height: 200%;
            transform: scale(0.5) translate(-50%, -50%);
            pointer-events: none;
            box-sizing: border-box;
            transform-origin: 50% 50%;
        }
  • 如何实现水平居中和垂直居中

  1. flex布局

    justify-content：对齐方式，主轴对齐方式

    align-items：对齐方式，轴线方向

可以参考阮一峰的flex文章，九个色子布局实现。

  1. margin负值法
.container{
    width: 500px;
    height: 400px;
    border: 2px solid #379;
    position: relative;
}
.inner{
    width: 480px;
    height: 380px;
    background-color: #746;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -190px; /*height的一半*/
    margin-left: -240px; /*width的一半*/

补充：其实这里也可以将marin-top和margin-left负值替换成：transform：translateX(-50%)和transform：translateY(-50%)

  1. table-cell（未脱离文档流的）
div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

  • BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）

    块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

    BFC区域不会与float box重叠。BFC是页面上的一个独立容器，子元素不会影响到外面，计算BFC的高度时，浮动元素也会参与计算。

    那些元素会生成BFC：根元素,float不为none的元素,position为fixed和absolute的元素,display为inline-block,table-cell、table-caption，flex，inline-flex的元素,overflow不为visible的元素。

  • 写一个css3的transition和animation(两者都是动画)

    Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值

    transform示例

          /* transition */

      transition: width 1s linear 2s;        /*简写实例*/

      /*等同如下*/
      transition-property: width;
      transition-duration: 1s;
      transition-timing-function: linear;
      transition-delay: 2s;

    实现下划线动画

      <!--html代码-->

  <div class="container">
      <h2 id="title">
          test
          <i class="line" id="line"></i>
      </h2>
      <button id="change">Change</button>
  </div>

      /*css代码*/

  h2{
      position: relative;
      padding: 15px;
      text-align: center;    
  }
  button{
      width: 100px;
      height: 40px;
      border-radius: 15px;
      border: none;
      background: #188FF7;
      color: #fff;
      outline: none;
      cursor: pointer;
      font-weight: bold;
  }
  button:hover{
      background: #188EA7;
  }
  .container{
      width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;

  }
  .line{
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: 100%;
      transition: transform .5s;
      background: #188EA7;
      color: #188EA7;
      transform: scaleX(0);
      z-index: 1111;            
  }

  @keyframes changeColor1{
      from{
          color: #000;
      }
      to{
          color: #188EA7;
      }
  }
  @keyframes changeColor2{
      from{                
          color: #188EA7;
      }
      to{
          color: #000;
      }
  }

      //js部分代码

  (function () {
      let btn = document.getElementById('change');
      let h2 = document.getElementById('title');
      let line = document.getElementById('line');
      let count = 0;
      btn.onclick = function () {
          if(count%2===0){
              line.style.transform = "scaleX(1)";
              h2.style.animation = "changeColor1 1s";
              h2.style.color = "#188EA7";
              count++;
          }else{
              line.style.transform = "scaleX(0)";
              h2.style.animation = "changeColor2 1s";
              h2.style.color = "#000";
              count++;
          }

      }
  })();

    上面用到了tranform属性：

      translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

  rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

  scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

  skew() 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
  matrix() matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

    实现硬币的旋转

    ```css #euro { width: 150px; height: 150px; margin-left: -75px; margin-top: -75px; position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; animation: spin 2.5s linear infinite; } .back { background-image: url(“/uploads/160101/backeuro.png”); width: 150px; height: 150px; } .middle { background-image: url(“/uploads/160101/faceeuro.png”); width: 150px; height: 150px; transform: translateZ(1px); position: absolute; top: 0; } .front { background-image: url(“/uploads/160101/faceeuro.png”); height: 150px; position: absolute; top: 0; transform: translateZ(10px); width: 150px; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

  • position属性比较

    固定定位fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

    相对定位relative：

    如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

    绝对定位absolute：

    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

    粘性定位sticky：

    元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

    默认定位Static：

    默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。

    inherit:

    规定应该从父元素继承position 属性的值。

  • 浮动清除

    方法一：使用带clear属性的空元素(BFC)

    在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
    或<hr class="clear" />来进行清理。

    方法二：使用CSS的overflow属性

    给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

    在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

    方法三：使用邻接元素处理

    什么都不做，给浮动元素后面的元素添加clear属性。

    方法四：使用CSS的:after伪元素给浮动元素的父元素

    结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

    给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

      .clearfix:after { 
      content: "";  
      display: block;
      clear: both; 
      visibility: hidden;
      line-height: 0; 
      height: 0; 
      font-size:0; 
  }

  • css3新属性

    CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。

  • css 选择器优先级

    id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等

    带有!important 标记的样式属性的优先级最高；

    样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；

    样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

  • 如何画一个三角形和正方体

    三角形原理：边框的均分原理

          div {
          width:0px;
          height:0px;
          border-top:10px solid red;
          border-right:10px solid transparent;
          border-bottom:10px solid transparent;
          border-left:10px solid transparent;
      }

    正方形

          <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>perspective</title>
      <style>
      .wrapper{
          width: 50%;
          float: left;
      }
      .cube{
          font-size: 4em;
          width: 2em;
          margin: 1.5em auto;
          transform-style:preserve-3d;
          transform:rotateX(-35deg) rotateY(30deg);
      }
      .side{
          position: absolute;
          width: 2em;
          height: 2em;
          background: rgba(255,99,71,0.6);
          border: 1px solid rgba(0,0,0,0.5);
          color: white;
          text-align: center;
          line-height: 2em;
      }
      .front{
          transform:translateZ(1em);
      }
      .bottom{
          transform:rotateX(-90deg) translateZ(1em);
      }
      .top{
          transform:rotateX(90deg) translateZ(1em);
      }
      .left{
          transform:rotateY(-90deg) translateZ(1em);
      }
      .right{
          transform:rotateY(90deg) translateZ(1em);
      }
      .back{
          transform:translateZ(-1em);
      }
      </style>
      </head>
      <body>
      <div class="wrapper w1">
      <div class="cube">
          <div class="side front">1</div>
          <div class="side back">6</div>
          <div class="side right">4</div>
          <div class="side left">3</div>
          <div class="side top">5</div>
          <div class="side bottom">2</div>
      </div>
      </div>
      <div class="wrapper w2">
      <div class="cube">
          <div class="side front">1</div>
          <div class="side back">6</div>
          <div class="side right">4</div>
          <div class="side left">3</div>
          <div class="side top">5</div>
          <div class="side bottom">2</div>
      </div>
      </div>
      </body>
      </html>
CATALOG
    FEATURED TAGS
    数据结构 javascript 队列 媒体查询 Git http rem ES6 css Node 模块化 webpack vue 组件 组件通信 axios 路由 全局数据 算法 原理 proxy react React 组件化 Redux react-redux 设计模式 Vue 性能优化 Jest 插件 npm React Native 打包 热更新 微前端 容器化 IOS TypeScript microApp
    FRIENDS