css margin折叠

发表于 2014-09-23   |  

margin折叠-Collapsing margin

所谓margin折叠(Collapsing margin)，就是我们常说的盒子垂直边距叠加，具体是指在同一个块级格式化上下文（简称BFC）中，毗邻的两个或者多个垂直外边距会发生互相折叠的现象。其中所说的毗邻可以归结为以下两点

  • 两个或者多个外边距没有被非空内容、padding、border或者clear分隔开。
  • 两个或者多个外边距所归属的元素都处于普通流中，而非浮动元素或者绝对定位元素。

常见发生margin折叠的情况有：

  • 一个盒子元素的top margin与第一个子盒子元素的top margin。
  • 一个盒子元素的bottom margin与最后一个子盒子元素的bottom margin， 但须在该盒子元素的height为auto的情况下 * 一个盒子元素的bottom margin与紧接着的下一个盒子元素的top margin。
  • 一个盒子元素的top margin与其自身的bottom margin，但须满足没创建 BFC、零min-height、零或者“auto”的height、没有普通流的子盒子元素。

margin折叠的后的外边距计算：

  • 参加折叠的元素指都为正，取其中较大的值;
  • 参加折叠的元素值都为负，取绝对值较大的，然后负向位移;
  • 参加折叠的元素有正有负，取出正值中最大的值+负值中绝对值最大的值;
  • 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠，自身
    margin-bottom 和 margin-top 相邻，只能是自身内容为空，垂直方向上 border、padding 为 0;
  • 相邻的 margin 要一起参与计算，不得分步计算，要注意，相邻的元素不一定非
    要是兄弟节点，父子节点也可以，即使不是兄弟父子节点也可以相邻。而且，在计算时，相邻的 margin 要一起参与计算，不得分步计算。 
1
2
3
4
5
6
<div style="margin:50px 0; background:green; width:50px;"> 
<div style="margin:-60px 0;"> 
   <div style="margin:150px 0;">A</div> </div> </div> 
<div style="margin:-100px 0;background:green; width:50px;"> 
<div style="margin:-120px 0;"> 
    <div style="margin:200px 0;">B</div> </div> </div>

错误的计算方式：分别算 A 和其父元素的折叠，然后与其父元素的父元素的折叠，这个值算出来之后，应该是 90px。依此法算出 B 的为 80px；然后，A和B折叠，margin 为 90px。 请注意，多个 margin 相邻折叠成一个 margin，计算的时候，应该取所有相关的值一起计算，而不能分开分步来算。 以上例子中，A 和 B 之间的 margin 折叠产生的 margin，是6个相邻 margin 折叠的结果。将其 margin 值分为两组： 正值：50px，150px，200px 负值：-60px，-100px，-120px 根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是 -120px，所以，最终折叠后的 margin 应该是 200 + (-120) = 80px。

创建了BFC(块级格式化上下文)的元素，不和内部的子元素发生margin 折叠

#CSS

在windows 下安装 MongoDb

发表于 2014-05-06   |  

Starting in version 2.2, MongoDB does not support Windows XP

  • 到官网下载MongoDb

  • 解压到制定目录。我的机器目录如下

    D:
  mongodb
         |mongodb                            
                |mongod.cfg
                |README
                |THIRD-PARTY-NOTICES
                |bin
  • 创建MongoDb的数据存储目录，可以再任意文件夹下创建，这里我在D:/mongodb下创建了D:/mongodb/data/db目录

  • 启动MongoDb服务，打开命令行模式下 进入MongoDb的bin目录 运行mongod.exe命令

    D:\mongodb\mongodb\bin\mongod.exe --dbpath d:\mongodb\data

输出的结果如下,表示服务启动成功.然后在浏览器输入localhost:28017会打开一个MongoDb的监控网页

Tue May 06 08:56:28.645 [initandlisten] MongoDB starting : pid=808 port=27017 db
path=d:\mongodb\data 64-bit host=DuBaoKun
Tue May 06 08:56:28.646 [initandlisten] db version v2.4.1
Tue May 06 08:56:28.646 [initandlisten] git version: 1560959e9ce11a693be8b4d0d16
0d633eee75110
********
Tue May 06 08:56:29.056 [initandlisten] command local.$cmd command: { create: "s
tartup_log", size: 10485760, capped: true } ntoreturn:1 keyUpdates:0  reslen:37
290ms
Tue May 06 08:56:29.077 [initandlisten] waiting for connections on port 27017
Tue May 06 08:56:29.077 [websvr] admin web console waiting for connections on po
rt 28017
  • 连接数据库 保持上述的Mongodb服务处于开启状态 在开启一个控制台，运行D:\mongodb\mongodb\bin\mongo.exe命令,则会连接成功了。可以按照这篇文章继续操作

将MongoDb配置为服务

虽然进行了以上的配置，但是之后每次使用Mongodb的时候都要先启动服务，如果配置为windows服务，让其自动启动。

  • 创建日志目录：除了配置数据存储目录外，MongoDb还需要要一个日志存储的目录。在d:\mongodb目录下创建log目录(这个目录是任意的)

  • 创建服务配置文件：在d:\mongodb目录下创建mongod.cfg文件。用记事本打开配置dbpath和logpath

    logpath=D:\mongodb\log\mongo.log
dbpath=D:\mongodb\data\db

  • 安装服务。在命令行中运行如下命令

    D:\mongodb\mongodb\bin\mongod.exe --config D:\mongodb\mongod.cfg --install

    运行之后提示如下

    1
    2
    3
    4
    5
    Tue May 06 10:03:12.151 Trying to install Windows service 'MongoDB'
    Tue May 06 10:03:12.358 Service 'MongoDB' (Mongo DB) installed with command line
    'D:\mongodb\mongodb\bin\mongod.exe --config D:\mongodb\mongod.cfg --service'
    Tue May 06 10:03:12.359 Service can be started from the command line with 'net s
    tart MongoDB'

此命令成功之后会安装 Mongo Db的服务。并且开机会自动启动，如果要自己控制启动，在开始栏的搜索框输入services.msc可以到计算机管理服务里找个Mongo Db的服务进行设置.

启动服务 net start MongoDB

停止服务 net stop MongoDB

删除服务 “C:\Program Files\MongoDB\bin\mongod.exe” –remove

  • 连接数据库 保持Mongodb服务处于开启状态 开启一个控制台，运行D:\mongodb\mongodb\bin\mongo.exe命令,则会连接成功了。可以按照这篇文章继续操作
#MongoDb