等分布局
- 等分布局就是指一行被分为若干列,每一列的宽度是相同的值;
方法一:float 属性实现等分布局效果
给各个元素设置浮动和宽度
{
float: left;
width: 25%; //宽度用百分比等分
//给每个元素设置浮动-- 子元素浮动 - 导致父元素的高度塌陷
}
清除浮动
1.固定的高度 height 固定写死(不推荐)
2.父元素加overflow:hidden => BFC 特点: 把浮动的高度给计算进去
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素。
3.clear:both 清除浮动 => 加在浮动子元素的末尾 <div style="clear:both"></div>
优点:通俗易懂,方便
缺点:添加无意义标签,语义化差
4.利用伪元素::after =》 clearfix 公用类名 = 直接在html中进行调用 (最常用)
.clearfix::after{
content: '';
display: block;
clear: both;
}
父级调用<div id="parent" class="clearfix">
优点:符合闭合浮动思想,结构语义化正确
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.
5.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
优点:代码更简洁
缺点:用zoom:1触发hasLayout.
推荐使用
2.display 属性的值有关 table 实现等分布局效果;
给父元素添加 display:table;
给子元素添加 display: table-cell;
3.flex 属性实现等分布局效果;
- 父元素设置 display: flex;
- 子元素设置 flex:1;
4.Grid 属性实现等分布局效果;
等分布局间距处理
方法一:利用浮动+手动计算宽度
考虑用 padding 和 border 来设置间隙
怪异盒模型 :box-sizing: border-box;
盒子模型box-sizing:
- content-box: width 宽度 = width + padding-left/right + border-left/right
- border-box: width 宽度 = width(padding+border 计算进去了)
- margin 不影响盒子模型的大小 = > 间距 / 位置移动
具体步骤(四个盒子等分相互之间有间隙):
- 1.给四个盒子设置
{
width: 25%;
float: left;
border-left:10px solid #fff;
box-sizing: border-box;
} - 2.给父盒子设置 margin-left:-10px;把第一个盒子的左间距隐藏起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>等分布局解决方法1-修改版-border边框线</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent-fix {
overflow: hidden;
}
#parent {
height: 300px;
/* 整体往左边进行移动 - 间距隐藏起来 */
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
width: 25%;
float: left;
border-left: 10px solid #fff;
box-sizing: border-box;
}
.col1 {
background-color: hotpink;
}
.col2 {
background-color: lightblue;
}
.col3 {
background-color: green;
}
.col4 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent-fix">
<!-- 作为父级容器 -->
<div id="parent" class="clearfix">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>等分布局解决方法1-修改版- padding内填充</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent-fix {
overflow: hidden;
}
#parent {
height: 300px;
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
width: 25%;
float: left;
padding-left: 10px;
/* padding已经计算在了25%
padding是内容的一个部分,所以看不到,可以在他的父元素里面嵌套一个子元素,背景颜色加到子元素身上
*/
box-sizing: border-box;
}
.col1 .inner {
height: 300px;
background-color: hotpink;
}
.col2 .inner {
height: 300px;
background-color: lightblue;
}
.col3 .inner {
height: 300px;
background-color: green;
}
.col4 .inner {
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent-fix">
<!-- 作为父级容器 -->
<div id="parent" class="clearfix">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
用 table 实现等分布局加间隙
- 1.父元素设置 display: table;子元素设置 display: table-cell;
- 2.给子元素设置 padding-left: 20px;并内嵌一个盒子,将子元素的颜色加到内嵌的盒子里面。
- 3.给所有的盒子外面嵌套一个大盒子,并给其设置 margin-left: -20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>等分布局解决方法2-table+table-cell</title>
<style>
* {
margin: 0;
padding: 0;
}
#parent {
width: 100%;
/* table */
display: table;
}
.parentWrap {
margin-left: -20px;
}
.inner {
height: 600px;
}
.col1,
.col2,
.col3,
.col4 {
/* td */
display: table-cell;
height: 300px;
padding-left: 20px;
}
.col1 .inner {
background-color: hotpink;
}
.col2 .inner {
background-color: lightblue;
}
.col3 .inner {
background-color: green;
}
.col4 .inner {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div class="parentWrap">
<div id="parent">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2"><div class="inner"></div></div>
<div class="col3"><div class="inner"></div></div>
<div class="col4"><div class="inner"></div></div>
</div>
</div>
</body>
</html>
用 flex 实现有间隙的等分布局
- 1.父元素设置 display: flex;子元素设置 flex: 1;
- 2.给子元素设置 padding-left: 20px;并内嵌一个盒子,将子元素的颜色加到内嵌的盒子里面。
- 3.给父元素设置 margin-left: -20px;并删除其 width: 100%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>等分布局解决方法3-flex</title>
<style>
* {
margin: 0;
padding: 0;
}
#parent {
//width: 100%;
/* 子元素排列 = 水平排列 */
display: flex;
margin-left: -20px;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
/* 四个容器 占1等份 1/4 = 100%/ 4 */
flex: 1;
padding-left: 20px;
}
.inner {
height: 300px;
}
.col1 .inner {
background-color: hotpink;
}
.col2 .inner {
background-color: lightblue;
}
.col3 .inner {
background-color: green;
}
.col4 .inner {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1"><div class="inner"></div></div>
<div class="col2"><div class="inner"></div></div>
<div class="col3"><div class="inner"></div></div>
<div class="col4"><div class="inner"></div></div>
</div>
</body>
</html>
等高分局
等高布局就是一行被划分成若干列,每一列的高度是相同的值;
display 属性的值有关 table 实现
- 父元素设置 display: table;
- 子元素设置 display: table-cell;
padding + margin 属性实现等高布局效果
- 给子元素设置足够大的内填充和外间距
padding-bottom:9999px;
margin-bottom:-9999px;