css1

批量改变样式

/* 使用cssText */
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';
复制代码

css表达式使用一次性表达式(但最好避免css表达式)

// css
p{
    background-color: expression(altBgcolor(this))
}

// js
function altBgcolor(el){
    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
复制代码

三角箭头

.triangle{
    width:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #000;
}
复制代码

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  box-sizing: content-box|border-box|inherit:
复制代码

• content-box: 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
• border-box: 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
• inherit: 指定 box-sizing 属性的值，应该从父元素继承

标准盒子模型和IE盒子的区别

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

居中的实现

• line-height

• 子级 position: absolute; // 左，高 各50%，

  • 子级具体高度 然后通过margin往回移动元素50%的宽高度
  • 不知高度使用 transform: translate(-50%, -50%);

• 子级 具体宽高度 position: absolute； left,right,bottom,top 都为0，margin:atuo;

• 通过给父级设置 flex

• 父级display:table, 子级:display: table-cell; vertical-align: middle;

• 父级display:grad, 子级:margin：auto; 兼容性差，不推荐

• 通过给父级设置before

  .ghost-center {
    position: relative;
    border: 1px solid blue;
    height: 400px;
  }
  
  .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
  }
  
  .ghost-center>.content {
      display: inline-block;
      vertical-align: middle;
      width: 20rem;
  }
复制代码

动画

• transform:

  • scale 等比缩放，scale(x, y)、scaleX()、scaleY() 可以使用负数，效果：细长字体，字体反转
  • skew 倾斜 单位: degress (度) transform: skew(100deg,100deg) grad (百分度) transform: skew(10grad,10grad) rad（弧度） 一个完整的圆 为2π transform: skew(10rad,10rad) turn (圈数) 一个完整的圆 为1turn transform: skew(0.25turn，1.2turn) 可以为负数
  • rotate 旋转 单位同skew, rotate(n)相等于rotateX(n)、totateY(n)、rotateZ(n)、rotate3d(x,y,z,angle);
  • translate：平移 transform: translate(x,y)、translateX(n)、translateY(n)

• transition：transition: property-color duration timing-function; transition: height 0.3s ease;

  • transition-property: 指定过渡属性
  • transition-duration: 过渡持续时间
  • transition-delay: 过渡开始之前需要等待的时间 单位：s，ms
  • transition-timing-function: 指定动画运动时的节奏

• animations：用来指定一组或多组动画，每组之间用逗号相隔，支持IE10以上

  • animation-name: 指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画系列

    .anim{
      animation-name:jump;
    }
    @keyframes jump{
      form{
        top: 100;
      }
      to{
        top: 0
      }
    }  
  复制代码

  • animation-duration：指定动画周期的时长 默认为0 无动画
  • animation-iteration-count：定义动画运行的次数 默认运行一次 取值为 infinite 则为无限循环，不可以为负数，可以为小数
  • animation-direction：动画播放方向
  • animation-timing-function：每个动画周期执行的桀纣，作用于一个关键帧周期而非整个动画周期 同 transition-timing-function

css Hack

说明：针对不同的浏览器写不用的CSS,就是CSS Hack

• 条件Hack

  只在IE下生效
  <!--[if IE]>
  这段文字只在IE浏览器显示
  <![endif]-->
  
  只在IE6下生效
  <!--[if IE 6]>
  这段文字只在IE6浏览器显示
  <![endif]-->
  
  只在IE6以上版本生效
  <!--[if gte IE 6]>
  这段文字只在IE6以上(包括)版本IE浏览器显示
  <![endif]-->
  
  只在IE8上不生效
  <!--[if ! IE 8]>
  这段文字在非IE8浏览器显示
  <![endif]-->
  
  非IE浏览器生效
  <!--[if !IE]>
  这段文字只在非IE浏览器显示
  <![endif]-->  
  复制代码

• 属性级Hack

  hack	写法	实例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
  *	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
  +	+color	绿色	Y	Y	Y	Y	N	Y	N	Y	N	Y
  -	-color	黄色	Y	Y	N	N	N	N	N	N	N	N
  _	_color	蓝色	Y	Y	N	Y	N	Y	N	Y	N	N
  #	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
  \0	color:red\0	红色	N	N	N	N	Y	N	Y	N	Y	N
  \9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
  !important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

• 选择符Hack 最常见的是

  *html *前缀只对IE6生效  
  *+html *+前缀只对IE7生效  
  @media screen\9{...}只对IE6/7生效  
  @media \0screen {body { background: red; }}只对IE8有效  
  @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效  
  @media screen\0 {body { background: green; }} 只对IE8/9/10有效  
  @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效  
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效  
  复制代码

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

作者：摘笑
链接：https://juejin.cn/post/6974334026324639774
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。