等分布局(非弹性布局)
介绍作者常用的两种等分布局
1.由 padding-right , box-sizing , background-clip 通过巧妙控制盒模型实现, 但是此方法 , 延申性较差 , 比如在等分后 再给每个块加边框或者样式 , 需再嵌一层
2. 由calc()公式 和 定位(父relative子absolute)实现 , 好理解 , 易上手
可以不仅仅是四等分
第一种方式代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,
p {
margin: 0;
}
.parentWrap {
border: 2px solid black;
overflow: hidden;
}
.parent {
background-color: lightgrey;
margin-right: -10px;
overflow: hidden;
}
.child {
float: left;
height: 600px;
width: 25%;
padding-right: 10px;
/*
box-sizing
border-box:设置了 此参数 width 或者height 就包括了边框
在盒模型中witdh 和 height 就包括了 border 的大小像素
* */
box-sizing: border-box;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="parentWrap">
<div class="parent">
<div class="child child1" style="background-color: lightblue;">1</div>
<div class="child child2" style="background-color: lightgreen;">2</div>
<div class="child child3" style="background-color: lightsalmon;">3</div>
<div class="child child4" style="background-color: pink;">4</div>
</div>
</div>
</body>
</html>
第二种方式代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 1000px;
border: 1px solid red;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.wrapper{
margin-right: -20px;
border: 1px solid black;
height: 400px;
}
.wrapper>div{
width: calc(25% - 20px);
background-color: pink;
height: 100%;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>