css中的五种常见页面布局

公共样式部分代码：
（推荐教程：
CSS教程） html * {
margin: 0;
padding: 0;
}
.layout {
margin-bottom: 20px;
}
.layout article {
width: 100%;
}
.layout article > div {
min-height: 100px;
}
.layout article .left {
width: 300px;
background: red;
}
.layout article .center {
background: orange;
}
.layout article .right {
width: 300px;
background: blue;
}
float布局

这是float布局

这是一段文字

这是一段文字

absolute布局

这是absolute布局

这是一段文字

这是一段文字

flex布局

这是flex布局

这是一段文字

这是一段文字

table布局

这是table布局

这是一段文字

这是一段文字

grid布局

这是grid布局

这是一段文字

这是一段文字

以上就是css中的五种常见页面布局的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
css 页面布局本文转载于：
csdn，如有侵犯，请联系a@php.cn删除
上一篇：
css怎样实现DIV高度自适应
下一篇：
利用css实现鼠标悬停效果相关文章相关视频CSS页面布局常用知识汇总（文本样式）CSS页面布局常用知识汇总（页面背景）CSS页面布局常用知识汇总（超链接样式）CSS页面布局常用知识汇总（列表样式）css中的五种常见页面布局使用CSS3动画属性使用CSS3渐变、倒影属性使用CSS3多列布局属性 [做网站css教程]