前端开发知识点总结

anRui 发布于2019-08-30 12:54 / 1368人阅读

摘要：正常的代码结构应该是内容区域按钮但是上面的代码浏览器的编译结果是下面这样很明显可以发现，浏览器的渲染结果并不是我们想要的结果。问题的参考网站天猫页面。淘宝页面全站使用单位适配，而天猫页面有百分比，单位的混用。

1.a标签的相互嵌套

很多时候我们会有下面的场景，如下图中所显示的那样。点击1区域（从图上看1区域包含2区域）和2区域跳转不同的链接。

正常的代码结构应该是：

但是上面的代码浏览器的编译结果是下面这样

很明显可以发现，浏览器的渲染结果并不是我们想要的结果。那么是为什么呢？

根据 W3C 规范，a 标签是不是嵌套 a 标签的。如果出现 a 标签嵌套 a 标签的情况就会将 a 标签内的 a 标签渲染在外部。

其实按照设计图上虽然是包含的关系，但是我们可以按照下面的方式布局，通过定位解决，不同的跳转问题。

2.选择器的优先级

编写 css 的时候，都会遇到选择器优先级的问题。这里给出一个优先级列表

div{
    font-size:12px !important; //！important 的优先级最高，而且比内联的样式的优先级高
}

那么除了 important 之外的选择器呢？

元素	权重
内联样式	1000
ID选择器	100
类选择器（包括属性选择器和伪类）	10
元素(标签)和伪元素选择器	1
结合符和通配符	0

根据上面的选择器的权重列表，就对我们在编写 css 的过程中对样式优先级有一个比较清晰的计算方法

.img-list > li {
    width: 32rem;   /*权重=11*/
}

.img-btn-list li:first-child {
    margin-left: 0; /*权重=21*/
}

.v-list a>span:nth-child(1) {
    margin-right: .7rem; /*权重=22*/
}

3.不同项目样式引用单位不统一问题解决方案

flex布局的一些优点思考：

flex (弹性盒)布局一个最大的优点就是解决不同移动设备的适配问题。

因为flex与具体的单位无关性 ，所以可以解决不同项目间单位不统一，但是又需要引用公用样式的需求。

问题2的参考网站：天猫 h5页面。淘宝 h5 页面全站使用rem单位适配，而天猫页面有百分比，rem 单位的混用。

当然 flex 解决上面的问题还有一个问题就是浏览器的兼容性。如果自己的网站或者是 H5页面需要兼容低版本的浏览器，我们可以参考使用百分比单位解决适配的问题。

参考网站：京东 h5页面（全站使用百分比单位解决多设备适配的问题）。

4.安卓和 IOS html5 动画卡顿解决方案 1.IOS 支持弹性滑动

body{
    -webkit-overflow-scrolling:touch;
}

2.动画卡顿的解决方案

2.1 改变元素位置使用 css3 新属性，触发 GPU (硬件加速)辅助渲染动画 扩展阅读点这里

2.2 使用 chrome 开发者工具，查看动画元素是否造成周围大量 DOM 节点的重排(reflow)，如果是则对动画元素使用 absolute 定位，脱离所在文档流，减少对周围元素的影响。

2.3 对要做动画的元素使用backface-visibility,opacity,perspective

这里属性主要是设置动画元素只渲染面向用户的一面。减少动画渲染对系统性能的消耗。

{
-webkit-backface-visibility:hidden;
        backface-visibility:hidden;

        -webkit-perspective: 1000;
                perspective: 1000;
}

GPU云服务器云服务器前端开发基础知识 linux数据结构知识点总结位段知识总结前端知识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115157.html

前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0
参加第二届前端开发者年度大会总结

摘要：代表公司去参加今年的第二届前端开发者年度大会，散会的时候，技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完美趁着还记得点什么，在这里做个自我回顾总结，谨代表个人见解，有不当之处，或若涉及图片隐私或者其它问题，烦请代表公司去参加今年的第二届前端开发者年度大会，散会的时候，Team 技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完...

solocoder 2019-08-19 17:55 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
转岗测试工作三年经验总结（前端开发转测试）

摘要：时光飞逝，岁月如梭，我从前端开发岗位转入测试岗位已经三年了，这期间从迷茫到熟悉，到强化，到熟练，到总结，感受还是很深的三年前的某一个晚上，我正准备下班回家，我们的项目经理把我叫到办公司和我谈话，谈了很多，具体说什么不记得 ...

nemo 2021-09-10 10:51 评论0 收藏0