Css3学习笔记（七）：布局

最新推荐文章于 2022-10-13 09:49:43 发布

原创最新推荐文章于 2022-10-13 09:49:43 发布 · 841 阅读

0 ·

CC 4.0 BY-SA版权

前台设计专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了多栏布局和盒布局的概念、属性及应用，包括如何使用CSS设置宽度、列数、间距和样式，以及如何通过盒布局实现响应式设计。重点阐述了两者的区别，以及如何通过box-flex和box-orient属性调整元素排列方向和顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 多栏布局

div[id='test1']{
	width:400px;
	column-count:2;
	margin:2px;
	background-color:#f33a3a;
	border:solid 1px #a50a0a;
}

使用多栏布局的时候width的宽度是元素的总宽度。
column-count: 将一个元素分为多栏显示。
column-width: 每栏的宽度。
column-gap: 多栏间的距离。
column-rule：栏与栏之间增加一条间隔线. 如：column-rule:dotted 1px black;

2. 盒布局

将外部的div的display改成box来应用盒布局。Firefox中使用-moz-box，Chrome或者Safari中使用-webkit-box。

div[id='container']{
	display:box;
	display:-moz-box;
	display:-webkit-box;
}
div[id='left_side']{
	width:200px;
	padding:20px;
	background-color:orange;
}
div[id='main']{
	width:300px;
	padding:20px;
	background-color:yellow;
}
div[id='right_side']{
	width:200px;
	padding:20px;
	background-color:limegreen;
}

盒布局和多栏布局的区别：多栏布局各栏的宽度是相等的，比较适合显示文章内容。而盒布局每个栏宽度可不同，比较适合用来搭建网页结构。
如果想要让盒布局的宽度对应于浏览器窗口的宽度而作变化，可以使用box-flex属性。Firefox下为-moz-box-flex，Safari或者Chrome下为-webkit-box-flex。

div[id='main']{
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1;
	padding:20px;
	background-color:yellow;
}

改变显示顺序：box-ordinal-group, Firefox下为-moz-box-ordinal-group，Safari或者Chrome下为-webkit-box-ordinal-group。这里可以指定一个表示序号的整数。浏览器会根据其从小到大来显示元素。
改变元素排列方向:默认是水平排列，可以通过修改box-orient来实现。Firefox下为-moz-box-orient，Safari或者Chrome下为-webkit-box-orient。如：-webkit-box-orient: vertical;
改变水平方向与垂直方向的对齐方式：box-pack，Firefox下为-moz-box-pack，Safari或者Chrome下为-webkit-box-pack。
box-align，Firefox下为-moz-box-align，Safari或者Chrome下为-webkit-box-align。可选值为：start、center、end。