模仿京东页面
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重叠（塌陷）
- 两个相邻Box垂直方向margin重叠（因为在同一个BFC中垂直方向上面的margin会发生重叠，可以通过为其中一个box包裹一层容器生成一个新的BFC）
- 相邻Box水平方向margin重叠（同样在同一个BFC中水平方向上margin也会发生重叠）
- 嵌套元素的margin重叠（在开发中我主要碰到的是这个问题）
解决办法一：让子元素设置display为inline-block让其自己成为一个BFC容器
解决办法二：给父元素设置border或padding（为父元素设置一个明确的边界？？？）让子元素的margin被包含在父元素的盒式模型内，不会与外部div重叠
涉及到的BFC约束规则：
垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。
- 清除内部浮动
涉及的BFC约束规则：
计算BFC高度时，浮动元素也参与计算，为父元素创造成为BFC的条件即可
- 自适应多栏布局
- 自适应两栏布局
- 自适应三栏布局
涉及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类名来更改伪元素的样式
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！