介绍 html * {
保证金:0;
填充:0;
}
.layout {
margin-bottom: 20 px;
}
.layout{条
宽度:100%;
}
.layout文章比;div {
最小高度:100 px;
}
.layout .left{条
宽度:300 px;
背景:红色;
}
.layout .center{条
背景:橙色;
}
.layout铃声{条
宽度:300 px;
背景:蓝色;
} & lt; !——浮动布局——比;
& lt;部分类=安季謋loat"祝辞
& lt; style>
.layout。浮动.left {
浮:左;
}
.layout。浮动铃声{
浮:正确;
}
& lt;/style>
& lt;文章类=發eft-center-right"祝辞
& lt; div类=發eft"祝辞& lt;/div>
& lt; div类=皉ight"祝辞& lt;/div>
& lt; div类=癱enter"祝辞
& lt; h3>这是浮布局& lt;/h3>
& lt; p>这是一段文字& lt;/p>
& lt; p>这是一段文字& lt;/p>
& lt;/div>
& lt;/article>
& lt;/section> & lt; !——定位布局——比;
& lt;部分类=安季謅bsolute"祝辞
& lt; style>
.layout。绝对.left-center-right祝辞div {
位置:绝对的;
}
.layout。绝对.left {
左:0;
}
.layout。绝对.center {
左:300 px;
右:300 px;
}
.layout。绝对的铃声{
右:0;
}
& lt;/style>
& lt;文章类=發eft-center-right"祝辞
& lt; div类=發eft"祝辞& lt;/div>
& lt; div类=癱enter"祝辞
& lt; h3>这是绝对的布局& lt;/h3>
& lt; p>这是一段文字& lt;/p>
& lt; p>这是一段文字& lt;/p>
& lt;/div>
& lt; div类=皉ight"祝辞& lt;/div>
& lt;/article>
& lt;/section> & lt; !——flex布局——比;
& lt;部分类=安季謋lex"祝辞
& lt; style>
.layout。flex {
margin-top: 140 px;
}
.layout。flex .left-center-right {
显示:flex;
}
.layout。flex .center {
flex: 1;
}
& lt;/style>
& lt;文章类=發eft-center-right"祝辞
& lt; div类=發eft"祝辞& lt;/div>
& lt; div类=癱enter"祝辞
& lt; h3>这是flex布局& lt;/h3>
& lt; p>这是一段文字& lt;/p>
& lt; p>这是一段文字& lt;/p>
& lt;/div>
& lt; div类=皉ight"祝辞& lt;/div>
& lt;/article>
& lt;/section> & lt; !——表布局——比;
& lt;部分类=安季謙able"祝辞
& lt; style>
.layout。表.left-center-right {
显示:表;
身高:100 px;
}
.layout。表.left-center-right比;div {
显示:表格单元;
}
& lt;/style>
& lt;文章类=發eft-center-right"祝辞
& lt; div类=發eft"祝辞& lt;/div>
& lt; div类=癱enter"祝辞
& lt; h3>这是表布局& lt;/h3>
& lt; p>这是一段文字& lt;/p>
& lt; p>这是一段文字& lt;/p>
& lt;/div>
& lt; div类=皉ight"祝辞& lt;/div>
& lt;/article>
& lt;/section> & lt; !——网格布局——比;
& lt;部分类=安季謌rid"祝辞
& lt; style>
.layout。网格.left-center-right {
显示:网格;
grid-template-columns: 300 px汽车300 px;
}
& lt;/style>
& lt;文章类=發eft-center-right"祝辞
& lt; div类=發eft"祝辞& lt;/div>
& lt; div类=癱enter"祝辞
& lt; h3>这是网格布局& lt;/h3>
& lt; p>这是一段文字& lt;/p>
& lt; p>这是一段文字& lt;/p>
& lt;/div>
& lt; div类=皉ight"祝辞& lt;/div>
& lt;/article>
& lt;/section>
这篇文章主要介绍css中常见页面布局有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
公共样式部分代码:
浮布局
绝对布局
flex布局
表布局
网格布局
以上是css中常见页面布局有哪些的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
