3種常見的CSS頁面布局--雙飛翼布局、粘連布局、左右兩列布局-有解無憂

一、左右兩列布局

1、代碼如下，可先粘貼復制，自行運行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兩列布局</title>

<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
min-width: 600px;
}
.lef{
width: 100px;
height: 400px;
background: hotpink;
float: left;
}
.rig{
height: 400px;
background: yellowgreen;
margin-left: 50px;
/*給right開啟BFC
利用BFC的特性：
bfc的區域不會與浮動的box重疊*/

/* 溢位內容部分被切割,所以使用省略號表示 */
overflow: hidden;
/*出現省略號需要四個設定：
* display: block;
* overflow: hidden;
* white-space: nowrap;
* text-overflow: ellipsis
* */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
}
.con{
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div >
<div >left</div>
<div >
lzprightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
rightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
rightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
rightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
</div>
</div>
</body>
</html>

2、必要說明

外層容器con如果為固定寬度，right元素的overflow: hidden;是必須的，否則會出現rig中的字體不在rig里面

外層容器con寬度如果是100%，或者默認，此時right元素的overflow: hidden;可有可無，頁面不會因此受到影響

二、粘連布局

1、代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"/>
<title>粘連布局</title>

<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.wrap{
/* 設定wrap的最小高度,當main元素中的內容較少或者為空時，也能保持100%高度 */
min-height: 100%;
background: yellowgreen;
text-align: center;
}
.main{
/*main的height值由內容決定*/
/*當內容不足一屏時，下面的設定不會撐開父元素wrap，此時wrap的min-height設定生效，
* 當內容剛好一屏時，下面的設定開始撐開父容器，其height值為100%+50px，
* 拉開這50px的原因是防止footer遮蓋住main內容，這個值不是固定死的，由footer的高度值決定
* 為footer向上填充margin-top: -50px;做準備
* */
padding-bottom: 50px;
}
.footer{
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
</style>
</head>
<body>
<div >
<div >
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
mlzpain<br />
</div>
</div>

<div >
footer
</div>
</body>
</html>

三、雙飛翼布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙飛翼三列布局</title>
<style type="text/css">
/*清除瀏覽器默認樣式*/
*{
padding: 0;
margin: 0;
}
/*設定body的最小寬度*/
body{
min-width: 600px;
}
/*左浮動*/
.fl{
float: left;
}
/*雙飛翼三列布局*/
.mid{
width: 100%;
}
.lef{
width: 200px;
background: mediumpurple;
margin-left: -100%;
}
.rig{
width: 200px;
background: orangered;
margin-left: -200px;
}
.inn_mid{
margin: 0 200px;
background: pink;
}
/*等高布局*/
/* 先使子元素溢位父盒子范圍，然后在父盒子中設定overflow:hidden;清除溢位部分，從而由原來的不等高達到等高效果 */
.mid, .lef, .rig{
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.con{
border: 5px solid deepskyblue;
overflow: hidden;
}
</style>
</head>
<body>
<div >
<div >
<div >
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
</div>
<div >left</div>
<div >right</div>
</div>
</body>
</html>

end，至此三個常見布局介紹完畢，建議稍微花點時間琢磨一下，其中微妙之處只可意會不可言傳

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/127133.html

標籤：其他

上一篇：前端開發CSS清除浮動的方法有哪些？

下一篇：問問自己，你真的會用防抖和節流么？？？？