网页盒子水平布局方式

CSS布局技巧：浮动、弹性盒子与网格布局

最新推荐文章于 2023-02-16 18:31:04 发布

原创最新推荐文章于 2023-02-16 18:31:04 发布 · 3.9k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

html+css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了三种常见的CSS布局方式：浮动布局、弹性盒子布局和网格布局。浮动布局适用于简单的元素排列，但灵活性较低。弹性盒子是CSS3的布局模式，适合响应式设计，通过justify-content属性调整子元素对齐方式。网格布局则提供了更自由的布局方式，允许快速创建复杂的二维布局，无需浮动或定位。

盒子水平布局方式简单一览

使用浮动 < div >;< ul >;< ol >
使用弹性盒子 display: flex;
使用网格布局 display: grid;

1 - 浮动

< div >
用div盒子进行大盒子套小盒子进行布局，使用浮动进行水平排列，元素间距用“外间距-margin”和“内间距-padding”来控制

	<style>
		.parent {
			width: 510px;
			height: 400px;
			background: #f7f7f7;
			padding-left: 20px;
		}
		.children {
			width: 150px;
			height: 280px;
			float: left;
			background: #dddddd;
			margin: 20px 20px 0 0;
		}
	</style>
	-------
	<body>
		<div class="parent">
			<div class="children"></div>
			<div class="children"></div>	
			<div class="children"></div>
		</div>
	</body>

这样布局缺点也很明显，不够灵活，在间距控制上并不方便，如果只是简单的几个元素布局可以用一下。ps：如果浮动影响了后面的布局，可以用 “clear: both;” 清除浮动。

< ul >或者< ol >
使用列表跟直接用div作用相差并不是很大，用法也跟div的用法差不多，只不过在列表里除了浮动还可用display进行布局。

使用浮动float；

	<style>
		.parent {
			width: 510px;
			height: 400px;
			background: #f7f7f7;
			padding-left: 20px;
			list-style: none;
		}
		.children {
			width: 150px;
			height: 280px;
			float: left;
			background: #dddddd;
			margin: 20px 20px 0 0;
		}
	</style>
	-------
	<body>
		<ul class="parent">
			<li class="children"></li>
			<li class="children"></li>
			<li class="children"></li>
		</ul>
	</body>

使用display；

	<style>
		.parent {
			width: 510px;
			height: 400px;
			background: #f7f7f7;
			padding-left: 20px;
			list-style: none;
			font-size: 0;
		}
		.children {
			width: 150px;
			height: 280px;
			display: inline-block;
			background: #dddddd;
			margin: 20px 20px 0 0;
		}
	</style>
	-------
	<body>
		<ul class="parent">
			<li class="children"></li>
			<li class="children"></li>
			<li class="children"></li>
		</ul>
	</body>

使用display: inline-block; 时< li >标签之间会有间距，是因为浏览器把inline元素之间的空白字符渲染成一个空格；
解决办法：
1), 可以通过在< ul >里设置font-size: 0; 然后在< li >里面重新设置字体字号等；
2), 将所有< li >标签写在一行内；
3), < li >标签不闭合；
4), 尝试更换为浮动float；

2 - 弹性盒子

弹性盒子是 CSS3 的一种新的布局模式，当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

	<style>
		.parent {
			width: 510px;
			height: 400px;
			background: #f7f7f7;
			padding-left: 20px;
			display: flex;
		}
		.children {
			width: 150px;
			height: 280px;
			background: #dddddd;
			margin: 20px 20px 0 0;
		}
	</style>
	-------
	<body>
		<div class="parent">
			<div class="children"></div>
			<div class="children"></div>	
			<div class="children"></div>
		</div>
	</body>

	<style>
		.parent {
			width: 510px;
			height: 400px;
			background: #f7f7f7;
			padding-left: 20px;
			list-style: none;
			display: flex;
		}
		.children {
			width: 150px;
			height: 280px;
			background: #dddddd;
			margin: 20px 20px 0 0;
		}
	</style>
	-------
	<body>
		<ul class="parent">
			<li class="children"></li>
			<li class="children"></li>
			<li class="children"></li>
		</ul>
	</body>

弹性盒子，这里可以看到，用< div >盒子或者< ul >列表，都是可以进行布局的，弹性容器外及弹性子元素内是可以正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局，弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行。

弹性盒子属性很多，此篇文章只简单介绍一下 “justify-content 属性” ，其他属性可以通过文章结尾的链接去详细查看。

justify-content 属性

justify-content: flex-start | flex-end | center | space-between | space-around

1), justify-content: flex-start; 子元素从左侧紧挨着填充。这个是默认值。
左对齐的样式
2), justify-content: flex-end; 子元素从右紧挨着填充。
右对齐的样式
3), justify-content: center; 子元素居中紧挨着填充。
居中对齐的样式
4), justify-content: space-between; 子元素平均分布在该行上。
水平等距分布样式
5), justify-content: space-around; 子元素平均分布在该行上，子元素不紧挨最左和最右，而是空出元素间距一半的间距。
水平等距左右不紧挨样式

3 - 网格布局

网格布局可以理解为css为更好地进行网页布局而退出一个方便的布局样式；可以不用浮动和定位就能完成网页布局的应用。

	<style>
		.parent {
			background: #f7f7f7;
			display: grid;
			grid-template-columns: auto auto auto;
		}
		.children {
			background: #dddddd;
			padding:10px 20px;
		}
	</style>
	-------
	<body>
		<div class="parent">
			<div class="children">这是第一个盒子</div>
			<div class="children">这是第two个盒子</div>
			<div class="children">这是第3个盒子</div>
		</div>
	</body>

我们看到使用网格布局是非常自由的，你甚至不需要定义宽度和高度，为了美观，可以加一点内外间距；最快捷的只需要用 “grid-template-columns: auto auto auto;” 来定义几列和列宽: “auto” 等距平分，也可以用像素或者百分比，有几个数就表示有几列。关于网格布局这里不在过多解释，详情可以通过文章最后的链接进行仔细查阅。