css布局

1. 格式化上下文

例1：两个块元素之间的上下边距是100px,而不是100px+100px=200px。

<div>
            <div className="top">1</div>
            <div className="bottom">2</div>
</div>

.top,.bottom{
  width: 100px;
  height: 100px;
  background-color: red;
}
.top{
  margin-bottom: 100px;
}
.bottom{
  margin-top: 100px;
}

如图所示：

 

 解决方法：

两个相邻的div兄弟元素发生了垂直边距折叠，因为他们都处于同一个BFC（块级格式化上下文）中。

一种方法：修改其中一个块级元素，让它成为内联块级元素或者浮动元素。

.top{
    display:inline-block;
}

例2： 两个div元素嵌套，子元素设置上外边距为100px。此时可以看出子元素和父元素没有边距，而是父元素具有100px的上边距。

        <div className="wrap">
            <div className="content">content</div>
        </div>

div{
  width: 100px;
}
.wrap{
  background-color: red;
  height: 100px;
}
.content{
  background-color: blue;
  margin-top: 80px;
  height: 20px;
}

解决方案：

要实现子元素到父元素上边距为100px，可将父元素创建为一个新的BFC。父元素加上overflow:auto/hidden之类的属性即可。

2. 两列布局html,body,#root{

  height: 100%;
}
body{
  padding: 0;
  margin: 0;
}
.wrap{
  padding-left: 100px;
  height: 100%;
}
.left{
  width: 100px;
  height: 100%;
  display: inline-block;
  margin-left: -100px;
  background-color: red;
}
.main{
  background-color: blue;
  display: inline-block;
  height: 100%;
  width: 100%;

　　vertical-align: top;

}

        <div className="wrap">
            <div className="left">left</div>
            <div className="main">content</div>
        </div>

实现效果：

 

 注意：

• 相邻元素之间存在一个父元素字体大小的间隙，可以通过父元素字体大小设置为0来消除；
• 需要设置垂直对齐方式来消除基线带来的错乱问题。

3. 三列布局

html,body,#root{
  height: 100%;
}
body{
  padding: 0;
  margin: 0;
}
.wrap{
  font-size: 0;
  padding-left: 100px;
  padding-right: 200px;
  height: 100%;
}
.left,.right,.main{
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  height: 100%;
}
.left{
  width: 100px;
  margin-left: -100px;
  background-color: red;
}
.right{
  background-color: yellow;
  width: 200px;
  margin-right: -200px;
}
.main{
  background-color: blue;
  width: 100%;
}

        <div className="wrap">
            <div className="left">left</div>
            <div className="main">content</div>
            <div className="right">right</div>
        </div>

 

 当然还有另外一种思路，那就是把三列布局拆分成两列布局。

利用这种拆分思路，更多列的布局都可以拆分成两列布局和三列布局。