bootstrap 和 jqueryui
2015-08-28 22:24
513 查看
摘要: 盒子模型差异
今天我在使用一些jquery 布局插件和 jquery ui 的时候
在使用resizeable 和 布局的时候 由于涉及到计算大小高度,结果就发现插件的计算总数出现偏差,
这里面采用的bootstrap是3.*版本,对了一段时间发现是bootstrap修改了盒子模型
导致了计算是不一致的
关于CSS盒子模型
原因采用的布局方案是 jquery layout ,layout.sizes(计算问题)(比较老,盒子模型不一致,并非 jquery ui 问题)
目前我不可能去修改插件,直接修改bootstrap的盒子模型也难以预料并发的BUG,还好在resize 和布局对象 大多是绝对定位的,目前先不要在这些对象上面设置margin,border等信息
记录 ,调试很累。
解决问题方案: 布局对象(west,east,north,south)上面不要设置border,margin padding 属性, 避免盒子模型问题
今天我在使用一些jquery 布局插件和 jquery ui 的时候
在使用resizeable 和 布局的时候 由于涉及到计算大小高度,结果就发现插件的计算总数出现偏差,
这里面采用的bootstrap是3.*版本,对了一段时间发现是bootstrap修改了盒子模型
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
导致了计算是不一致的
关于CSS盒子模型
原因采用的布局方案是 jquery layout ,layout.sizes(计算问题)(比较老,盒子模型不一致,并非 jquery ui 问题)
content-box | 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
border-box | 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 规定应从父元素继承 box-sizing 属性的值。 |
记录 ,调试很累。
解决问题方案: 布局对象(west,east,north,south)上面不要设置border,margin padding 属性, 避免盒子模型问题
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- GUI - Web前端开发框架
- JavaScript演示排序算法
- 评价ui设计作品好坏的八个标准(界面/交互设计研究)
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法