HTML的布局方式有什么，怎么样实现？
导读：这篇文章给大家分享的是HTML的布局方式，这里给大家介绍了浮动布局、绝对定位布局、flex弹性布局、table-cell表格布局和grid网格布局，每种方式都各有优势，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了...
这篇文章给大家分享的是HTML的布局方式，这里给大家介绍了浮动布局、绝对定位布局、flex弹性布局、table-cell表格布局和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的布局，大家可以关注网络其它的相关文章。
文本转载自PHP中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML的布局方式有什么，怎么样实现？
本文地址： https://pptw.com/jishu/655205.html