溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“html頁面的布局技術是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“html頁面的布局技術是什么”吧！
html布局技術有：1、浮動布局技術，兼容性比較，但頁面寬度不夠時會影響布局；2、絕對定位布局技術；3、flex彈性布局技術，自適應好，高度能自動撐開；4、table-cell表格布局技術；5、grid網格布局技術。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html頁面的布局技術
一、浮動布局技術
<!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>浮動布局的兼容性比較好，但是浮動帶來的影響比較多，頁面寬度不夠的時候會影響布局。
二、絕對定位布局技術
<!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彈性布局技術
<!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>自適應好，高度能夠自動撐開
四、table-cell表格布局技術
<!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>兼容性好，但是有時候不能固定高度，因為會被內容撐高。
五、grid網格布局技術
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網格布局</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">
網格布局
</div>
<div class="right"></div>
</div>
</body>
</html>感謝各位的閱讀，以上就是“html頁面的布局技術是什么”的內容了，經過本文的學習后，相信大家對html頁面的布局技術是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
