txf2004
txf2004

[前端]浅析外边距折叠（Collapsing Margins）

我们在学习前端的过程中，有时候会出现一些奇怪的现象，Collapsing Margins便是其中之一，有时候我们想要某个元素离的第一个子元素能够下移一些，于是给它设置了margin-top，但奇怪的是这个margin-top属性却传递给了父元素，导致父元素的位置下移：

 
    

  
  1.  <!DOCTYPEHTML>  
    2. 

  
  2.  <htmllang="en-US">  
    3. 

  
  3.  <head>  
    4. 

  
  4.   <metacharset="UTF-8">  
    5. 

  
  5.   <title></title>  
    6. 

  
  6.   <styletype="text/css">  
    7. 

  
  7.   body{  
    8. 

  
  8.   margin:0;  
    9. 

  
  9.   }  
    10. 

  
  10.   .parent{  
    11. 

  
  11.   height:200px;  
    12. 

  
  12.   background:#0099ff;  
    13. 

  
  13.   }  
    14. 

  
  14.   .child{  
    15. 

  
  15.   width:230px;  
    16. 

  
  16.   margin-top:50px;  
    17. 

  
  17.   }  
    18. 

  
  18.   </style>  
    19. 

  
  19.  </head>  
    20. 

  
  20.  <body>  
    21. 

  
  21.   <divclass="parent">  
    22. 

  
  22.   <divclass="child">Child</div>  
    23. 

  
  23.   </div>  
    24. 

  
  24.  </body>  
    25. 

  
  25. </html>
    26.

亲自试一试

这是个BUG吗？为什么各种浏览器都会有这样的“BUG”呢？其实，W3C规范认为margin折叠会使页面布局更加合理，比如两个段落（<p>）之间，段前间距跟段后间距应该只保留最大的一个，而不应该两者相加而导致段落之间间隙过大。下面，我们就来探究一下这个奇怪的Collapsing Margins。

什么是外边距折叠（Collapsing margins）？

Collapsing margins，即外边距折叠，指的是毗邻的两个或多个垂直方向的外边距 (margin) 会合并成一个外边距。这里的毗邻包括相同级别的元素外边距，也包括父子元素的外边距。

什么情况下会发生折叠？

可以归结为以下两点：

  1. 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
  2. 这些 margin 都处于普通流中（非浮动元素、非定位元素）。

折叠后margin的计算

  1. 当参与折叠的margin均为正值时，取最大的margin值作为最终margin。
  2. 当参与折叠的margin均为负值时，取绝对值最大的margin值作为最终margin。
  3. 当参与折叠的margin同时存在正负值时，取绝对值最大的负margin值与最大的正margin值相加作为最终margin。

如何防止外边距折叠？

在某些情况下，margin的折叠并不是我们需要的效果，甚至可能影响正常的布局，这时候怎么办呢？有以下这些解决办法，按需要任选其一即可：

  1. 使用高度为零的空元素将折叠的margin隔开（不建议）
  2. 使用边框将折叠的margin隔开：border:1px transparent solid; （大小大于零）
  3. 使用内边距将折叠的margin隔开：padding:1px; （大小大于零）
  4. 为父元素设置overflow:hidden;
  5. display:inline-block;（IE7以下不支持）
  6. position:absolute;
  7. float:left;

后记

很久之前便想写一篇关于margin折叠的文章了，可惜由于各种原因，再加上很长一段时间以来心比较急躁，难以静下来写写东西，无奈耽搁至今。。寒假里还有许多事要做，希望自己能够乐观积极，不怕麻烦，赶紧把这些事情通通搞定，然后恶补前端性能与JavaScript，准备下学期的实习。

——于2013年1月26日 深夜1:46:48



=======================签 名 档=======================
原文地址（我的博客）：http://www.clanfei.com/2013/01/1684.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================




你可能感兴趣的:(margin)

  • VUE 座位图功能+扩展 NUZGNAW vue.jsjavascript前端
    1、通过循环画出页面座位图0"style="display:table;margin:0auto;min-height:472px;position:relative;">{{i.sign}}2、画出右下角的预览图3、编写对应js方法watch:{seatList:{handler(newVal,oldVal){if(this.seatList&&!stringBlank(this.seatLis
  • 2018-11-29作业 翻页 沦陷_99999
    翻页.box1{width:960px;height:42px;border:1pxsolid#8f8f8f;margin:200pxauto;}.box2{width:100%;height:42px;margin:0auto;}.box3,.box13{width:42px;background-color:gold;padding:5px10px;margin-top:5px;}.box3a
  • CSS3文本阴影特效全攻略
    CSS3文本阴影效果实现下面我将创建一个展示各种CSS3文本阴影效果的页面，包含多种样式示例和代码实现。设计思路创建具有视觉吸引力的标题区域提供多种文本阴影效果实例显示对应的CSS代码以供参考添加交互元素让用户自定义效果实现代码CSS3文本阴影效果大全*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'OpenSans',sa
  • html+css实战64-综合案例3-图片完成 前端大歌谣 htmlcss前端
    Documentbody{background-color:#f5f5f5;}.goods{width:234px;height:300px;background-color:#fff;/*样式居中*/margin:0auto;text-align:center;}img{width:160px;}运行结果
  • HTML页面实现弹出框输入支付密码 例行我志 java
    前端代码，样式，js#dialog-forminput{display:block;}input.text{margin-bottom:12px;width:95%;padding:.4em;}fieldset{padding:0;border:0;margin-top:25px;}h1{font-size:1.2em;margin:.6em0;}$(function(){vardialog,fo
  • 【高中数学之函数】四种幂函数图线（二次、三次、开方、开立方） 土门子拉马努金 高中数学之函数高中数学函数
    【图像】【代码】UNASSIGNED.centerlize{margin:0auto;border:0pxsolidred;width:1200px;height:600px;}如果看到这段文字说您的浏览器尚不支持HTML5Canvas，请更换浏览器再试.retval.max){retval.max=y;retval.max_x=cds[i].x;}if(yarr.length){index=in
  • 壁纸上传测试
    壁纸上传测试body{font-family:Arial,sans-serif;max-width:800px;margin:0auto;padding:20px;background-color:#f5f5f5;}.container{background:white;padding:30px;border-radius:10px;box-shadow:02px10pxrgba(0,0,0,0.
  • 微信小程序之自定义模态弹窗（带动画）实例-——-微信小程序实战系列（8）
    .btn{width:80%;padding:20rpx0;border-radius:10rpx;text-align:center;margin:40rpx10%;background:#000;color:#fff;}/mask/.drawer_screen{width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;bac
  • 微信小程序之自定义模态弹窗（带动画）实例-——-微信小程序实战系列（8）(1) 2401_84149213 程序员微信小程序notepad++小程序
    这样的模态弹窗，充其量只能做个alert，提示一下信息。但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法wxml：button弹窗标题标题标题标题标题备注确定wxss：/button/.btn{width:80%;padding:20rpx0;border-radius:10rpx;text-align:center;margin:40rpx1
  • 像素策略游戏：资源战争 代码改变世界10086 像素游戏游戏游戏csscss3
    像素策略游戏：资源战争下面是一个完整的像素风格策略小游戏，包含资源收集、基地建设、单位生产和战斗系统。像素策略：资源战争*{margin:0;padding:0;box-sizing:border-box;font-family:'PressStart2P','CourierNew',monospace;}body{background:linear-gradient(135deg,#1a1f2d
  • 像素风格超级玛丽HTML游戏
    像素风格超级玛丽HTML游戏创建一个像素风格的HTML5小游戏，模仿超级玛丽的经典玩法。游戏包含移动、跳跃、收集金币、躲避敌人和到达终点等核心机制。设计思路使用纯HTML5Canvas实现游戏渲染像素风格美术设计(16x16像素元素)实现物理引擎(重力、碰撞检测)键盘控制移动和跳跃添加经典超级玛丽元素(砖块、水管、蘑菇敌人)下面是完整的实现代码：像素超级玛丽*{margin:0;padding:0
  • 像素风格坦克大战游戏 代码改变世界10086 游戏像素游戏游戏csscss3
    像素风格坦克大战游戏下面我将实现一个基于HTML5Canvas的像素风格坦克大战游戏，玩法类似经典的FC坦克大战。设计思路使用像素风格渲染游戏元素玩家控制坦克移动和射击敌方AI坦克自动移动和攻击可破坏的砖墙和不可破坏的钢墙基地保护机制计分系统和生命值显示实现代码像素坦克大战*{margin:0;padding:0;box-sizing:border-box;font-family:'PressSt
  • 像素世界：回合制角色扮演游戏
    像素世界：回合制角色扮演游戏我将设计一个原创的像素风格回合制RPG游戏，包含角色移动、战斗系统、物品收集等核心功能。设计思路使用Canvas创建像素风格的游戏世界实现角色移动和地图探索设计回合制战斗系统添加物品收集和角色成长元素采用复古像素艺术风格下面是完整的实现代码：像素世界：回合制RPG*{margin:0;padding:0;box-sizing:border-box;font-family
  • 设置img 图片居中显示 geeooooz
    style="width:200px;height:100px;float:center;margin-right:auto;margin-left:auto;"
  • CSS Grid网格布局：前端布局的“原子弹”，复杂页面轻松搞定！ 软件老王子 前端实战前端css
    一、为什么Grid是布局“原子弹”？传统布局的末日审判：.header{float:left;width:100%;}.left{float:left;width:200px;margin-left:-100%;}/*此处省略30行...*/.footer{clear:both;}Grid一键核爆：.container{display:grid;grid-template:"headerheade
  • 利用aruco标定板标定相机 Goodness2020 相机标定opencv计算机视觉
    1、生成aruco标定板#include#include#include#include#includeusingnamespacecv;usingnamespacestd;intmain(){intmarkersX=17;intmarkersY=12;intmarkerLength=200;intmarkerSeparation=44;intmargins=markerSeparation;in
  • 网络安全作业三
    用户登录body{font-family:'Arial',sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px;}.login-container{background-color:white;
  • Js进阶案例合集 在逃的吗喽 javascriptcss前端
    案例一：渲染商品CSS代码*{margin:0;padding:0;box-sizing:border-box;}.list{width:990px;margin:0auto;display:flex;flex-wrap:wrap;}.item{width:240px;margin-left:10px;padding:20px30px;transition:all.5s;margin-bottom
  • 网络安全基础作业三 Csxyzj web安全javascript安全
    回顾web前端的代码用户登录body{font-family:'Arial',sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}.login-container{background-color:white;padding
  • 使用php实现导出pdf（mpdf扩展） if时光重来 phpphppdf
    安装扩展composerrequirempdf/mpdf使用true,'autoLangToFont'=>true,解决中文乱码问题$mpdf=new\Mpdf\Mpdf(['mode'=>'utf-8',//使用UTF-8编码'format'=>'A4-L',//设置纸张格式为A4横向'margin_left'=>15,//设置左边距为15mm'margin_right'=>15,//设置右边距
  • HTML5+CSS3小实例：流星划过天际的动画效果 艾恩小灰灰
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
  • WEB前端登陆页面（复习） En¥ 前端javascript开发语言
    1.登陆界面显示2.代码​登录界面/*重置所有元素的默认样式，让所有浏览器都从同一起点开始*/*{margin:0;padding:0;box-sizing:border-box;/*让元素的宽度和高度包含内边距和边框*/font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;/*设置默认字体*/}body{/*使用flex布局让登录框在页面中
  • Flutter基础（前端教程①⑨-margin-padding） aaiier Flutter前端
    比喻：把框的盒子把Container想象成一个带边框的盒子：margin是盒子外面的空白（盒子与周围其他东西的距离）。padding是盒子里面的空白（盒子边框与内部内容的距离）。代码示例（带边框更直观）：Container(//盒子外部的空白（与其他组件的距离）margin:EdgeInsets.all(20),//盒子内部的空白（边框与文本的距离）padding:EdgeInsets.all(1
  • 网络安全第三次作业 zesfeds csshtml前端
    多功能演示页面/*全局样式*/*{margin:0;padding:0;box-sizing:border-box;font-family:'Arial',sans-serif;}body{background-color:#f0f2f5;color:#333;line-height:1.6;}.container{max-width:1200px;margin:0auto;padding:20p
  • AI Agent开发学习系列 - langchain之示例选择器2：相关性与多样性兼得-MaxMarginalRelevanceExampleSelector在LangChain中的用法 alex100 AIAgent学习人工智能langchainprompt语言模型python
    MaxMarginalRelevanceExampleSelectorMaxMarginalRelevanceExampleSelector是LangChain中用于Few-ShotPrompt的一种智能示例选择器。它的作用是：在众多示例中，自动选择与当前输入最相关、同时彼此多样性最大的示例，插入到prompt里。主要特点相关性优先：优先选择与用户输入最相似的示例。多样性保证：避免选到内容高度重复
  • 重学前端007 --- 响应式网页设计 CSS 排版 Sapphire～ 前端前端
    文章目录导入字体总结浏览器给元素添加的默认值text-indent:-8px;1.text-indent属性的作用2.总结其他css导入字体这将导入OpenSans字体系列，字体粗细值为400、700和800。总结浏览器给元素添加的默认值元素默认外边距（Margin）默认内边距（Padding）作用-上下0.5em~1em无标题与内容分隔上下1em无段落间距/上下1em，左右40px无列表缩进上下
  • 网页语音识别demo zy_qqqqqq 语音识别csshtml
    语音demo*{box-sizing:border-box;margin:0;padding:0;font-family:'PingFangSC','MicrosoftYaHei',sans-serif;}body{display:flex;flex-direction:column;align-items:center;padding:20px;background-color:#f7f9fc;
  • 前端面试题 xkxnq 前端开发问题前端
    CSS常见问题解答1.CSS盒模型CSS盒模型由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成，分为两种类型：标准盒模型：元素宽度=content宽度替代盒模型（通过box-sizing:border-box设置）：元素宽度=content+padding+border2.CSS选择器的优先级优先级从高到低：!important（覆盖所有规则
  • 拖拽放大镜　　购买查看照片 不惧_f01e
    这里是用三张图做成一套放大镜Document*{padding:0;margin:0;list-style:none;}.box{width:400px;height:500px;margin-left:100px;/*border:3pxsolid#00f;*/}.m{width:400px;height:400px;/*border:1pxsolid#000;*/position:relati
  • CSS样式中的布局、字体、响应式布局
    目录一、使用内联块级元素布局二、使用float布局三、使用弹性盒子布局四、服务器字体五、响应式布局相关文章积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius一、使用内联块级元素布局让想要横着的元素（left、mid、right）变成内联块级元素。示例leftmidr
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他