css十八般武艺

最新推荐文章于 2023-04-26 09:59:59 发布

乔治9

最新推荐文章于 2023-04-26 09:59:59 发布

阅读量172

点赞数

分类专栏：前端

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

单列布局

1、细腰

header和footer占据整个浏览器，content和header、footer内容却不会占满浏览器宽度。

header、footer的内容宽度为100%，但是header、footer的内容区以及content统一设置max-width，并通过margin：0 auto；实现居中

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

.layout{

width: 960px;

margin: 0 auto;

border: 1px solid blue;

}

.content{

width: 60%;

border: 1px dashed royalblue;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

2、H形的一列三格

一般宽度不会占满整个浏览器，所以对外层设置width，然后设置margin：0 auto；居中

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

.layout{

width: 960px;

margin: 0 auto;

}

.header,.footer,.content{

border: 1px solid red;

}

</style>

</head>

<body>

</div>

</body>

</html>

三列布局

1、圣杯布局（float+负margin+padding+position）

原理说明：

主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。

布局步骤:

三者都设置向左浮动。
设置main宽度为100%，设置两侧栏的宽度。
设置负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。
设置main的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位，left的left值为负的left宽度，right的right值为负的right宽度。

一些说明

DOM元素的书写顺序不得更改。
当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。

二列的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

.main{

float: left;

width: 100%;

height: 200px;

border: 1px solid blue;

}

.left{

float: left;

width:190px;

height: 200px;

margin-left: -100%;

position: relative;

left: -190px;

border: 1px solid blue;

}

.right{

float:left;

width: 100px;

height: 200px;

margin-left: -104px;

position: relative;

right: -100px;

border: 1px solid blue;

}

.contain{

padding: 0 100px 0 190px;

border: 1px solid blue;

}

.clear{

clear: both;

height: 0;

line-height: 0;

font-size: 0;

}

</style>

</head>

<body>

</div>

</body>

</html>

2、双飞翼布局(float+负margin+margin)

原理说明：

双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。

布局步骤:

三者都设置向左浮动。
设置main-wrap宽度为100%，设置两个侧栏的宽度。
设置负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
设置main的margin值给左右两个子面板留出空间。

一些说明

圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 190px; ,可以实现sub+extra+main的布局。

二列的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main-wrap的margin-right值，其他操作相同。反之亦然。

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

.main-wrap{

float: left;

width:100%;

border: 1px solid red;