双飞翼HTML圣杯布局,关于前端:css圣杯布局的三种方式与双飞翼布局

css圣杯布局的三种形式

一、圣杯布局的简略介绍

圣杯布局就是三栏布局，其中左右两栏固定宽度，两头局部自适应

1.利用box-sizing的border-box属性进行布局

其相干容器的布局，此处用react编写，如果是其余的间接用class替换className即可

爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府

首先进行对三个盒子增加浮动的属性 float: left;对于class名字为left的盒子增加margin-left:-100%的属性使其在两头盒子的左侧，给左边盒子增加margin-left:-200px，这里的-200px是你右侧盒子的宽度。你右侧盒子写多少，就是多少宽度。所有的css代码如下：

.contain{

overflow: hidden;

}

.mide{

width: 100%;

height: 800px;

background-color: #000;

color: #fff;

box-sizing: border-box;

padding: 0 200PX;

float: left;

}

.left{

width: 200px;

height: 800px;

margin-left: -100%;

float: left;

background-color: #215253;

}

.right{

margin-left:-200px;

width: 200px;

height: 800px;

float: left;

background-color: #352625;

}

这里的box-sizing: border-box;属性是的意思是通过从已设定的宽度和高度别离减去边框和内边距能力失去内容的宽度和高度。这样就是一个简略的圣杯布局。

2.利用display:flex属性进行圣杯布局

其是这种事最简略的布局，其css是起码得，我间接贴代码，这里的html与下面的不太一样，请留神辨别

爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府

css代码如下：

.contain{

display: flex;

}

.mide{

height: 800px;

flex: 1;

background-color: #000;

color: #fff;

}

.left{

width: 200px;

height: 800px;

background-color: #215253;

}

.right{

width: 200px;

height: 800px;

background-color: #352625;

}

这中布局是比拟罕用的，如果不思考低版本浏览器的兼容性的话。

3.利用定位属性position: relative;进行布局

其html的代码如下

爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府

css代码如下：

.contain{

overflow: hidden;

padding: 0 200px;

}

.mide{

width: 100%;

height: 800px;

background-color: #000;

color: #fff;

float: left;

}

.left{

position: relative;

left: -200px;

width: 200px;

height: 800px;

margin-left: -100%;

float: left;

background-color: #215253;

}

.right{

margin-left:-200px;

position: relative;

right: -200px;

width: 200px;

height: 800px;

float: left;

background-color: #352625;

}

这种布局是依附定位实现的，我感觉用起来不是很好的样子

双飞翼布局

简介：双飞翼布局与圣杯布局达成的成果相似，只是实现办法有所差异而已。区别在于双飞翼给两头块套了一个容器，通过设置该容器外部的两头块margin属性从而使两头块两侧的内容不被左右块遮挡。

html代码：

爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府

css代码：

.contain{

overflow: hidden;

}

.mide{

width: 100%;

height: 800px;

background-color: #000;

color: #fff;

float: left;

}

.inner{

margin: 0 200px;

}

.left{

width: 200px;

height: 800px;

margin-left: -100%;

float: left;

background-color: #215253;

}

.right{

margin-left:-200px;

width: 200px;

height: 800px;

float: left;

background-color: #352625;

}

以上就是两种布局的形式，如果有新的办法能够通知我，我增加下来，蟹蟹。