2.CSS

2019-11-25  本文已影响0人  helloyoucan

原文链接：https://github.com/helloyoucan/knowledge

CSS（层叠样式表）相关

1、BFC(块级格式化上下文)

是页面盒模型布局中的一种CSS渲染模型，相当于一个独立容器。

特点：

如何创建：

主要作用：

2、盒模型

box-sizing : content-box 或 border-box

标准模型 content-box 宽度= content

IE模型 border-box 宽度 = content + padding + border

3、多栏布局要点
  1. float
  2. flex
  3. grid
  4. position
  5. table-cell
4、GPU加速

使用3D变换的样式

translate3d
rotate3d
scale3d
translateZ

在 Chrome 和 Safari 中,使用 CSS 变换或动画时，可能会闪烁，解决办法：

.demo {
    -webkit-backface-visibility: hidden;//表示隐藏被旋转的背面
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000; //定义 3D 元素距视图的距离
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
5、水平垂直居中
  1. position:absolute + transform:translate
  2. inline-block +font-size:0 + text-align:center + line-height=height + vertical-align: middle
  3. display:grid + margin:auto
  4. display:flex + margin:auto
  5. display:flex + justify-content: center + align-item: center
6、自适应布局
  1. float + margin
  2. flex
  3. grid + grid-template-columns
  4. absolute
7、清除浮动

  1. 浮动元素下方空div设置 {clear:both;height:0;overflow:hidden;}

  2. 父元素浮动

  3. 父元素设为inline-block

  4. 父元素设为bfc

  5. 伪类

    .clearfix:after{
 content:"";
 clear:both;
 display:block;
 height:0;
 overflow:hidden;
 visibility:hidden;
}
.clearfix{
 zoom:1
}
8、CSS选择器权重
权重 选择器
10000 !important
1000 内联样式
100 ID选择器
10 类、伪类、属性选择器
1 标签、伪元素选择器
0 通用选择器（*）、子选择器（>）、相邻选择器（+）、兄弟选择器（~）
9、层叠上下文

从最低到最高

10、display:none vsvisibility:hidden
display:none visibility:hidden
不占据空间 元素空间保留
影响css3的transition过渡 不影响过渡效果
触发重绘和回流 触发重绘
节点和子孙元素不可见 子元素可设visibility:visible显示，因 visibility: hidden属性值具有继承性
11、flex

display:flex|inline-flex

容器属性
项目属性
12、grid

display:grid | inline-grid

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

容器属性
项目属性
13、animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
14、Retina屏幕1px边框

  1. 0.5px边框

    IOS7以下和Android设备不支持

    // 判断设备是否支持
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}

    div {
 border: 1px solid #bbb;
}
.hairlines div {
 border-width: 0.5px;
}

  2. border-image

  3. background-image

  4. 多背景渐变

    .background-gradient-1px {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
    linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
    linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}
/* 或者 */
.background-gradient-1px{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
    background-size: 100% 1px;
}

  5. box-shadow模拟边框

.box-shadow-1px {
 box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

  1. viewport + rem（通过设置对应viewport的rem基准值）

  2. 伪类 + transform:scale 实现

    .scale-1px{
 position: relative;
 border:none;
}
.scale-1px:after{
 content: '';
 position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
    15、移动端1px边框

    根据像素比，利用媒体查询和伪类实现

    /*边框一像素*/
.border-1px::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

/*设备像素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.5);
    }  
   .border-left-1px::after, .border-right-1px::after {
       transform: scaleX(0.5);
    } 
   .border-1px::after {
          width: 200%;
          height: 200%;
          transform: scale(0.5);
          transform-origin: 0 0;
     }
}

/*设备像素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
   .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.333);
   } 
   .border-left-1px::after, .border-right-1px::after {
     transform: scaleX(0.333);
   } 
  .border-1px::after {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
      transform-origin: 0 0;
  }
}
16、多行文本溢出省略效果

单行

{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap; 
}

多行

{
    display:-webkit-box;
    -webkit-box-content:vertical;
    -webkit-line-clamp:3;
    overfolow:hidden;
}

兼容

兼容：
p{
    position: relative; 
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}
p::after{
    content: "...";
    position: absolute; 
    bottom: 0; right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}
上一篇 下一篇

猜你喜欢

热点阅读