模仿京东页面

css样式总结

• 尽量不要使用通配符清除样式，要清除样式在boby标签选择器里面清除，因为通配符会影响子类继承父类的样式
• 导航栏可以用无序列表来做

• 不定宽高的元素，可以使用min-width、min-height
• 关于伪元素与使用伪元素的元素盒子，伪元素使用定位的时候，元素盒子会作为父元素，伪元素只能使用绝对定位
• 文本不换行，多余字用省略号代替，涉及三个属性white-space、text-overflow、overflow

  
      
          最新
          小米10：骁龙865+四摄+升降屏+100W快充，价香
      
  

  .news_list_li{
      max-width: 160px;
      height: 16px;
      line-height: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #999;
      margin-bottom: 6px;
  }

  

• border属性的应用：画三角形

  .bor{
      border-width: 100px 100px 100px 100px;
      border-style: solid;
      border-color: red blue green black;
      width: 0px;
      height: 0px;
      margin: 100px auto;
  }

             

.price-miaosha::before{
    content: ' ';
    width: 0;
    height: 0;
    border-width: 22px 8px 0 0;
    border-style: solid;
    border-color: transparent white transparent transparent;
    position: absolute;
    top: 0;
    left: 84px;
}

• margin被折叠(BFC相关)

BFC(Block formatting context)"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　

block fomatting context = block-level box(块级元素) + formatting context(页面中有一套渲染规则的渲染区域，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用)

BFC的生成：

• 根元素
• float的值不为none（float:left/right/none(默认值)/inherit）
• overflow的值不为visible（overflow:scroll/auto/hidden/visible(默认值)/inherit）
• display的值为inline-block、table-cell、table-caption（display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC）
• position的值为absolute或fixed（position:absolute/fixed/relative/static(默认值)/inherit等）

BFC的约束规则：

• 内部的Box会在垂直方向上一个接一个的放置（对应css规则：Block元素会扩展到与父元素同宽，因此block元素会垂直排列）
• 垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。（对应css规则：垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)）
• 每个元素（该BFC区域内的元素）的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界（对应css规则：浮动元素会尽量接近往左上方或右上方）
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算（对应css规则：为父元素设置overflow：hidden或浮动父元素，则会包含浮动子元素）
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，外面的元素也不会影响到容器里面的元素

BFC在布局中的应用：

• 防止margin重叠（塌陷）

1. 两个相邻Box垂直方向margin重叠（因为在同一个BFC中垂直方向上面的margin会发生重叠，可以通过为其中一个box包裹一层容器生成一个新的BFC）
2. 相邻Box水平方向margin重叠（同样在同一个BFC中水平方向上margin也会发生重叠）
3. 嵌套元素的margin重叠（在开发中我主要碰到的是这个问题）

         解决办法一：让子元素设置display为inline-block让其自己成为一个BFC容器

         解决办法二：给父元素设置border或padding（为父元素设置一个明确的边界？？？）让子元素的margin被包含在父元素的盒式模型内，不会与外部div重叠

涉及到的BFC约束规则：

垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。

• 清除内部浮动

涉及的BFC约束规则：

计算BFC高度时，浮动元素也参与计算，为父元素创造成为BFC的条件即可

• 自适应多栏布局

1. 自适应两栏布局
2. 自适应三栏布局

涉及BFC的两条约束规则：

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此（position:absolute除外）。

BFC的区域不会与float box重叠。

参考博客：

https://www.cnblogs.com/ranyonsue/p/9204986.html

                

• Chrome浏览器字体大小限制

chrome有最小字体大小12px的限制

.font-6px{
  transform: scale(0.5);
  font-size: 12px;
}

• 清除button的默认样式（border:0;outline:none;）

.shuffling_box_btn_left,
.shuffling_box_btn_right{
    position: absolute;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.15);
    transition: background-color 1s;
    z-index: 10;
}

点击时会有蓝色边框，而且会影响自定义的边框样式

.shuffling_box_btn_left,
.shuffling_box_btn_right{
    border: 0;
    position: absolute;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.15);
    transition: background-color 1s;
    z-index: 10;
    outline: none; 
}

点击时没有蓝色边框

• 让多个块元素不换行，一行排列的方法

给父元素设置

.seckill_inner_center{
    display: flex;
    flex-wrap: nowrap;
}

• 解决父元素display:flex布局下的子元素宽度无效问题：给子元素的flex-shrink属性设置值为0；

.seckill_inner_right{
    width: 200px;
    height: 260px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.seckill_inner_right_a{
    width: 180px;
    height: 240px;
    display: block;
    flex-shrink: 0;
}

不设置子元素的flex-shrink:0（默认值为1）会出现的情况

设置子元素的flex-shrink:0就会恢复正常     

javascript总结

• setTimeout、setInterval的this指向问题：使用箭头函数可以解决

• setTimeout、setInterval的性能问题，限制在15FPS

• js实现动画效果，出现卡顿、闪动效果，如何实现高性能的帧动画

• 浏览器的重绘与回流

• 防抖和节流

• requestAnimationFrame

• 如果a标签的父元素也注册了事件，记得清除掉点击a标签触发的默认事件（思考一下事件冒泡 事件捕获相关），如果还是需要a标签去触发事件，那么就要阻止a标签的事件冒泡

     

会发现点击没有用，虽然触发了onclick事件，但是还是被a标签的默认事件给影响了，需要给a标签的href的值设置为javascript:void(0)

• js改变伪元素的样式http://www.fly63.com/article/detial/409（参考class类名重写）

        

可以看到伪元素的样式需要修改，要让伪元素看不到，那么要将伪元素的高度设置为0，接下来通过改变a标签的class类名来更改伪元素的样式