溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“html頁面的布局技術(shù)是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“html頁面的布局技術(shù)是什么”吧！
html布局技術(shù)有：1、浮動布局技術(shù)，兼容性比較，但頁面寬度不夠時會影響布局；2、絕對定位布局技術(shù)；3、flex彈性布局技術(shù)，自適應(yīng)好，高度能自動撐開；4、table-cell表格布局技術(shù)；5、grid網(wǎng)格布局技術(shù)。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
html頁面的布局技術(shù)
一、浮動布局技術(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮動布局</title>
<style type="text/css">
.wrap1 div{
min-height: 200px;
}
.wrap1 .left{
float: left;
width: 300px;
background: red;
}
.wrap1 .right{
float: right;
width: 300px;
background: blue;
}
.wrap1 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮動布局
</div>
</div>
</body>
</html>浮動布局的兼容性比較好，但是浮動帶來的影響比較多，頁面寬度不夠的時候會影響布局。
二、絕對定位布局技術(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對定位布局</title>
<style type="text/css">
.wrap2 div{
position: absolute;
min-height: 200px;
}
.wrap2 .left{
left: 0;
width: 300px;
background: red;
}
.wrap2 .right{
right: 0;
width: 300px;
background: blue;
}
.wrap2 .center{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap2 wrap">
<div class="left"></div>
<div class="center">
絕對定位布局
</div>
<div class="right"></div>
</div>
</body>
</html>絕對定位布局快捷，但是有效性比較差，因為脫離了文檔流。
三、flex彈性布局技術(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex布局</title>
<style type="text/css">
.wrap3{
display: flex;
min-height: 200px;
}
.wrap3 .left{
flex-basis: 300px;
background: red;
}
.wrap3 .right{
flex-basis: 300px;
background: blue;
}
.wrap3 .center{
flex: 1;
background: pink;
}
</style>
</head>
<body>
<div class="wrap3 wrap">
<div class="left"></div>
<div class="center">
flex布局
</div>
<div class="right"></div>
</div>
</body>
</html>自適應(yīng)好，高度能夠自動撐開
四、table-cell表格布局技術(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-cell表格布局</title>
<style type="text/css">
.wrap4{
display: table;
width: 100%;
height: 200px;
}
.wrap4>div{
display: table-cell;
}
.wrap4 .left{
width: 300px;
background: red;
}
.wrap4 .right{
width: 300px;
background: blue;
}
.wrap4 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap4 wrap">
<div class="left"></div>
<div class="center">
表格布局
</div>
<div class="right"></div>
</div>
</body>
</html>兼容性好，但是有時候不能固定高度，因為會被內(nèi)容撐高。
五、grid網(wǎng)格布局技術(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網(wǎng)格布局</title>
<style type="text/css">
.wrap5{
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.wrap5 .left{
background: red;
}
.wrap5 .right{
background: blue;
}
.wrap5 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap5 wrap">
<div class="left"></div>
<div class="center">
網(wǎng)格布局
</div>
<div class="right"></div>
</div>
</body>
</html>感謝各位的閱讀，以上就是“html頁面的布局技術(shù)是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對html頁面的布局技術(shù)是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼