常见的布局套路
2018-01-09 本文已影响0人
charllote8
常见的布局套路我们通常使用浮动布局或者flex布局。
因为flex不兼容IE8，所以如果要支持IE8的情况我们采用浮动布局。
首先我们来介绍左右布局。
以实现导航栏为例：
导航栏中父元素包裹着两个子元素，一个是logo，一个是导航；
logo元素左浮动，导航元素右浮动，因为子级元素浮动起来后，不再默认继承父级的宽高，而父级也检测不到子级的内容，因此父元素需要清除浮动；
在导航元素中，还有4个左浮动的子元素，导航元素清除浮动。
清除浮动的方法是添加clearfix伪类，这个方法在不设定父元素高度，不破坏文档结果的情况下清除浮动
.clearfix::after{
content:'';//伪类插入一个空内容
display: block;//空内容以block的形式展示出来
clear:both;//清除子元素浮动带来的影响
}
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="parent clearfix">
<div class="child ">logo</div>
<div class="child clearfix">
<div class="navItems">导航1</div>
<div class="navItems">导航2</div>
<div class="navItems">导航3</div>
<div class="navItems">导航4</div>
</div>
</div>
</body>
</html>
css:
*{
padding:0;
margin:0
border-sizing:border-box;}
.parent{
width:600px;
margin:auto;
border:1px solid
}
.child{
float:left;
}
.child:nth-child(1){
width:100px;
}
.child:nth-child(2){
float:right;
}
.clearfix::after{
content:'';
clear:both;
display: block;
}
.navItems{
float:left;
margin-left:10px;
}
实现效果：
image.png
以上的效果，我们也可以用flex布局实现：
*{
padding:0;
margin:0
border-sizing:border-box;}
.parent{
width:600px;
display: flex;
justify-content:space-between;
margin:auto;
border:1px solid
}
.child{
}
.child:nth-child(1){
width:100px;
}
.child:nth-child(2){
display: flex;
}
.navItems{
margin-left:10px;
}
接下来我们介绍平均布局
先用float来实现
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="content">
<div class="images clearfix">
<div class="img">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
<div class="img">5</div>
<div class="img">6</div>
<div class="img">7</div>
<div class="img">8</div>
</div>
</div>
</body>
</html>
css:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.content{
width:800px;
margin:auto;
border:1px solid;
}
.images{
margin-left:-4px;
margin-right:-4px;
}
.img{
width:calc(25% - 8px);
height:194px;
background:#ddd;
float:left;
margin: 4px;
}
.clearfix::after{
content:'';
display: block;
clear:both;
}
实现效果：
image.png
以上效果也可以用flex来实现：
当子元素个数不能平均分配边距时，不要使用flex中的space-between，还是需要中间再添加一层元素，利用负边距来解决靠边的子元素紧挨父元素的问题。
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.content{
width:800px;
margin:auto;
border:1px solid;
}
.images{
display: flex;
margin: 0 -4px;
flex-wrap:wrap;
}
.img{
width:calc(25% - 8px);
height:194px;
background:#ddd;
border:1px solid ;
margin:5px 4px;
}
