CSS常见布局

目录

1. 两栏布局

2. 左右定宽中间自适应的三栏布局(圣杯、双飞翼)

3. 平均布局

• 以下代码均在http://js.jirengu.com/上跑完

1. float左右布局

• 两个盒子左右浮动，形成左右布局，外层盒子添加clearfix类名，解决父元素高度坍塌问题。
  HTML:

CSS:

.left {
  float: left;
  background: red;
  width: 200px;
  height: 200px;
}
.right {
  float: right;
  width: 200px;
  height: 200px;
  background: green;
}
.clearfix::after {
  content: '';
  display: block;
}

效果:

image.png

2.(1) 圣杯布局

先构建HTML代码，将最重要的中间部分放最前面，最先渲染

CSS方面，先将中间div设为100%宽度，让三个div浮动起来，解决父盒子坍塌

.clearfix {
  content: '';
  display: block;
  clear: both;
}
.left, .right, .middle {
  width: 200px;
  height: 200px;
  float: left;
}
.middle {
  width: 100%;
  height: 200px;
  background-color: red;
}
.left {
  background-color: blue;
}
.right {
  background-color: green;
}

目前效果如下：

image.png

接下来就要让下面的两个div上来，用我们神奇的负边距！

.left {
  background-color: blue;
  margin-left: -100%;  /*给left盒子加上100%宽度的负边距*/
}
.right {
  background-color: green;
  margin-left: -200px;
}

此时的效果：

image.png

，
中间div可以自适应拉伸，但中间的div左右有部分被压住了，不信你看："middle"文字不见了！此时就要用到relative定位将left和right分别左右移了

.left {
  background-color: blue;
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right {
  background-color: green;
  margin-left: -200px;
  position: relative;
  right: -200px;
}

大功告成

image.png

2.(2) 双飞翼布局

双飞翼布局和圣杯布局很类似，过程如下：

1. 首先还是写一个一样的HTML结构，三个div浮动，给最外层div清除浮动
2. 中间部分宽度100%，左右盒子定宽，给左右盒子设置负外边距，使其跑上来
3. 接下来，圣杯布局采取左右盒子relative定位移位的方法，而双飞翼布局采用在middle盒子中套一个小div，给这个小div设置左右margin，达到左右定宽中间自适应的效果。
   贴代码啦！！！
   HTML

  

    

      
middle
         
    
left
    
right
  

CSS

* {
  margin: 0;
  padding: 0;
}
.middle-inner {
  margin: 0 200px;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.left, .right, .middle {
  width: 200px;
  height: 200px;
  float: left;
}
.middle {
  width: 100%;
  height: 200px;
  background-color: red;
}
.left {
  background-color: blue;
  margin-left: -100%;
}
.right {
  background-color: green;
  margin-left: -200px;
  
}

最终效果：

image.png

3.(1) 平均布局（float）

类似淘宝上的这种就可以用平均布局来做

image.png

过程如下:

1. 外层盒子固定宽度，子盒子浮动，父盒子清除浮动
2. 子盒子用百分比宽度（尽量不要写死）
3. margin通过calc计算属性计算得出
   HTML

CSS

.pictures {
  width: 800px;  /*外层盒子宽度定死*/
  margin: 0 auto;
}
.picture {
  width: 23.5%;  /*每个小盒子百分比宽度*/
  padding: 97px 0;
  margin-left: calc(6% / 3);  /*用calc计算剩余宽度*/
  margin-top: 10px;
  background: red;
  float: left;
}
.picture:nth-child(4n+1) {  /*最左边盒子不要margin*/
  margin-left: 0;
}
.clearfix::after {  /*解决float父级高度坍塌*/
  content: '';
  display: block;
  clear: both;
}

最终效果

image.png

3.2 平均布局（flex）

flex布局就简单多了，过程如下：

1. 外层盒子display: flex；flex-wrap: wrap；
2. 内层盒子设定宽度和高度
3. calc计算margin（建议不要用space-between）
   CSS

.pictures {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.picture {
  width: 23.5%;
  padding: 97px 0;
  margin-left: calc(6% / 3);
  margin-top: 10px;
  background: red;
  float: left;
}
.picture:nth-child(4n+1) {
  margin-left: 0;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

为何不要用justify-content: space-between?
因为如果用space-between，第二行删掉一个盒子后，是这样的。。。

image.png