等分布局
- 多个模型，进行平均分配，平均展示到页面之上。
1. float 浮动+width
<style>
*{
margin: 0;
padding: 0;
}
.parent{
overflow: hidden;
}
.col1,
.col2,
.col3,
.col4{
float: left;
width: 25%;
}
.col1,
.col3{
height: 300px;
background-color: yellow;
}
.col2,
.col4{
height: 300px;
background-color: pink;
}
</style>
<div class="parent">
<div class="col1">col1</div>
<div class="col2">col2</div>
<div class="col3">col3</div>
<div class="col4">col4</div>
</div>
- 这种方法依赖于 float，但是有个问题，就是需要计算出每个盒模型的宽度。
- float: 会导致塌陷问题，要进行清浮动处理
2. flex
<style>
*{
margin: 0;
padding: 0;
}
.parent{
display: flex;
}
.col1,
.col2,
.col3,
.col4{
flex: 1;
}
.col1,
.col3{
height: 300px;
background-color: yellow;
}
.col2,
.col4{
height: 300px;
background-color: pink;
}
</style>
<div class="parent">
<div class="col1">col1</div>
<div class="col2">col2</div>
<div class="col3">col3</div>
<div class="col4">col4</div>
</div>
- 依赖于
flex: 1,进行元素平均分配
3. table+table-cell
<style>
*{
margin: 0;
padding: 0;
}
.parent{
display: table;
width: 100%;
}
.col1,
.col2,
.col3,
.col4{
display: table-cell;
}
.col1,
.col3{
height: 300px;
background-color: yellow;
}
.col2,
.col4{
height: 300px;
background-color: pink;
}
</style>
<div class="parent">
<div class="col1">col1</div>
<div class="col2">col2</div>
<div class="col3">col3</div>
<div class="col4">col4</div>
</div>
- 这种方式，使用
display:table将模型看作table表，然后其余子元素为td，则进行了等分。但是注意：需要给父元素添加width: 100%
我们发现一件事，就是通过上面的三种方法，虽然是将内容进行等分了。但是内容之间没有存在有间距，如果想要间距怎么办呢？
4. 使用float的时候 添加间距
这里有两种方式，设置border ，将其背景色变为透明色；第二种方式，设置padding
4.1
<style>
*{
margin: 0;
padding: 0;
}
.parent{
overflow: hidden;
margin-left: -10px; /******/
}
.col1,
.col2,
.col3,
.col4{
float: left;
width: 25%;
/******/
border-left: 10px solid #fff;
box-sizing: border-box;
}
.col1,
.col3{
height: 300px;
background-color: yellow;
}
.col2,
.col4{
height: 300px;
background-color: pink;
}
</style>
<div class="parent">
<div class="col1">col1</div>
<div class="col2">col2</div>
<div class="col3">col3</div>
<div class="col4">col4</div>
</div>
- 使用border来充当间距线，同时，需要改变盒模型的计算方式。在通常情况下，
box-sizing:content-box,width = width+padding+border.而当设置怪异盒模型后：box-sizing:border-box: widht = widht.其中的width就已经包含了 padding+ border 了。 - 因为都加了border后，第一个元素肯定存在留白的问题，所以我们给父元素，使用外边距定位的方式，进行去除留白
4.2 float+padding
.parent{
overflow: hidden;
margin-left: -10px; /******/
}
.col1,
.col2,
.col3,
.col4{
float: left;
width: 25%;
/******/
padding-left: 10px;
box-sizing: border-box;
}
5. flex
直接设置padding就好了
<style>
*{
margin: 0;
padding: 0;
}
.parent{
display: flex;
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4{
flex: 1;
padding-left: 10px;
}
.col1 .inner,
.col3 .inner{
height: 300px;
background-color: yellow;
}
.col2 .inner,
.col4 .inner{
height: 300px;
background-color: pink;
}
</style>
<div class="parent">
<div class="col1"><div class="inner">col1</div></div>
<div class="col2"><div class="inner">col2</div></div>
<div class="col3"><div class="inner">col3</div></div>
<div class="col4"><div class="inner">col4</div></div>
</div>
