总结布局用法

时间：2018-11-19 12:30:49 阅读：167 评论：0 收藏：0 [点我收藏+]

浮动布局：

dom文档

<div class="container">
        <div class="wrap clearfix">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
 </div>

1：

固定布局：

实现如图

技术分享图片

样式:

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: left;
     width: 200px;
     height:300px;
     background-color: #ccc;
}
.box2{
     float: right;
     width: 350px;
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    clear: both;
    display:table;
    
}
</style>

关键点：box1 和box2设置固定width,浮动，

2：流体布局

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: left;
     width: 200px;
     height:300px;
     background-color: #ccc;
}
.box2{
      
     margin-left:220px; 
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

和固定布局对比：

box1 float left 设置width

box2: marign-left 为box1.width (效果和固定效果一样，不截图了)

3：浮动与两侧皆自适应的流体布局

样式

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: left;
     margin-right:20px;
     height:300px;
     background-color: #ccc;
}
.box2{
     display:table-cell;
     width:auto;
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    content:‘‘;
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

注意点：1、box1 float left

2、margin-right:某px;

box2  width auto,    display:table-cell;

3、 box1和box2 必须有内容。

效果如图

技术分享图片

4.右浮动，改变dom位置的流体布局：

技术分享图片

样式：

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
     float: right;
     width:100px;
     height:300px;
     background-color: #ccc;
}
.box2{
     margin-right:120px;
     height:300px;
     background-color: #ccc;
}

.clearfix:after{
    content:‘‘;
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

box1设置width float right

box2 margin-right:box1.width;

5.左浮动，不改变dom位置的流体布局写法

样式

<style>
.container{
    width: 600px;
    background-color: #DDF3F7;
}
.wrap{
    padding:20px;
    overflow: hidden;
}
.box1{
    
     width: 100%;
     float:left;
     height: 300px;
     background-color: #ccc;
}
.box2{
     
     width: 56px;
     float:left;
     margin-left:-56px;
     height:300px;
     background-color: #000;
}

.clearfix:after{
    content:‘‘;
    clear: both;
    display:table;
    
}
 .clearfix{
     *zoom:1;
 }

</style>

关键点：box1 width 100% float left

box2 float left width 某px margin-leftf 某px

如下图

技术分享图片

弹性布局

对于下面html

<div>
        <p>榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨</p>
        <p>榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨</p>
        <p>榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨榴莲披萨</p>
</div>

一个div 加三个p的块级元素

加些基本样式

p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

显示如下技术分享图片

给外层div加个样式就变成

div{
    display:-webkit-box;
    display:flex;
}

技术分享图片

现在每一个p元素都变成一个box了

这种弹性布局还能

justify-content:flex-end 类似的对齐方式样式不详述。

补充：

使用flex九宫格布局：

<div class="parent">
	<div class="row">
	    <div class="item"></div>
	    <div class="item"></div>
	    <div class="item"></div>
	</div>
	<div class="row">
	    <div class="item"></div>
	    <div class="item"></div>
	    <div class="item"></div>
	</div>
	<div class="row">
	    <div class="item"></div>
	    <div class="item"></div>
	    <div class="item"></div>
	</div>
</div>

　　样式：

.parent{display: flex; flex-direction: column;width: 300px;}
.row{height: 100px; display: flex;border: 1px solid red;}
.item{width: 100px; background-color: #ccc;border: 1px solid red;}

使用table九宫格布局：

样式

.parent{display: table; table-layout: fixed; width: 100%;}
.row{display: table-row;}
.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}

　　结果截图

技术分享图片