前端开发知识点总结
2016-04-05 19:42
597 查看
1.a标签的相互嵌套
很多时候我们会有下面的场景,如下图中所显示的那样。点击1区域(从图上看1区域包含2区域)和2区域跳转不同的链接。正常的代码结构应该是:
<ul> <li> <a href="#1"> <div>内容1区域 <a href="#2"> <div>按钮2</div> </a> </div> </a> </li> </ul>
但是上面的代码浏览器的编译结果是下面这样
很明显可以发现,浏览器的渲染结果并不是我们想要的结果。那么是为什么呢?
根据 W3C 规范,a 标签是不是嵌套 a 标签的。如果出现 a 标签嵌套 a 标签的情况就会将 a 标签内的 a 标签渲染在外部。
其实按照设计图上虽然是包含的关系,但是我们可以按照下面的方式布局,通过定位解决,不同的跳转问题。
<ul> <li> <a href="#1"> <div>内容1区域 </div> </a> <a href="#2"> <div>按钮2</div> </a> </li> </ul>
2.选择器的优先级
编写 css 的时候,都会遇到选择器优先级的问题。这里给出一个优先级列表div{ font-size:12px !important; //!important 的优先级最高,而且比内联的样式的优先级高 }
那么除了 important 之外的选择器呢?
元素 | 权重 |
---|---|
内联样式 | 1000 |
ID选择器 | 100 |
类选择器(包括属性选择器和伪类) | 10 |
元素(标签)和伪元素选择器 | 1 |
结合符和通配符 | 0 |
.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页面(全站使用百分比单位解决多设备适配的问题)。
5.安卓和 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; }
相关文章推荐
- 前端开发知识点总结
- ReactNative学习九-登录页面
- 安卓可以调js的方法,可js调不了安卓的方法之解决方法
- 前端开发知识点总结
- BootStrap之基础-4 插件(JS插件)
- js中clone的运用和clone后datepicker的显示问题
- 【poj 2492】A Bug's Life 题意&题解&代码(C++)
- [poj 2492 ] A Bug's Life 并查集应用
- css transform 详解
- JavaScript array对象的方法
- CSS3 animation 属性详解
- CSS样式
- ReactNative学习八-搜索栏的基本布局
- 浅读Caffe: Blobs, Layers, and Nets
- js内存泄漏以及解决方案
- 初识commonjs
- UVa 10440 - Ferry Loading II
- jquery 1.11 attr("disabled" 无效
- 详解 CSS 属性 - 伪类和伪元素的区别
- 前端开发学习笔记01(大杂烩)