css常见的几种布局

最新推荐文章于 2024-10-01 15:25:46 发布

Karma丶丶

最新推荐文章于 2024-10-01 15:25:46 发布

阅读量3k

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_69658317/article/details/126374559

版权

本文深入探讨了CSS布局技术，包括浮动元素如何脱离文档流影响内联元素，相对与绝对定位的区别及应用场景，以及Flexbox和Grid布局的详细使用方法，如主轴和侧轴的控制、换行与排列方式等。通过实例展示了如何利用这些技术创建复杂的网页布局。

摘要由CSDN通过智能技术生成

1.float 浮动.

浮动元素的顶部，在标准文档流的底部.

浮动会脱离文档流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就表现得如同浮动框不存在一样。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: rgb(241, 0, 221);
			float: left;
		}
		.box2{
			width: 500px;
			height: 100px;
			background-color: rgb(240, 156, 0);
			/* float: left; */
		}
		.box3{
			width: 400px;
			height: 200px;
			background-color: rgb(24, 223, 123);
			float: left;
		}
		.box4{
			width: 300px;
			height: 400px;
			background-color: rgb(0, 132, 255);
			float: left;
		}
	</style>
</head>
<body>
	<div class="box1">div1</div>
	<div class="box2">div2</div>
	<div class="box3">div3</div>
	<div class="box4">div4</div>
</body>
</html>

2.position 定位

relative 相对定位：相对原来位置，便宜一定距离
absolute 绝对定位：相对position不为static的父元素，偏移一定距离
fixed 固定定位：相对浏览器定位
static 没有定位：
top 上 bottom 下 left 左 fight 右

父相子绝

3.flex布局

flex-direction 主轴方向

row   				行排布
row-reverse			同一行反向排布
column				列排布
column-reverse		同一列反向排布

justify-content 主轴子元素排列

flex-start  		从头部排列
flex-end			从尾部排列
center				居中排列
space-around		平分剩余
space-between		两边贴边，平分剩余

align-items 侧轴子元素排列方式

flex-start			从上到下
flex-end			从下到上
stretch				拉伸（子元素去掉高度）
center				居中

flex-wrap 是否换行

wrap    换行
no-wrap    不换行

align-content 侧轴多行换行属性

flex-start		侧轴头部排列
flex-end		侧轴尾部排列
center			居中排列
space-around	恻轴平分空间
space-between	侧轴两端对齐

4.grid布局

Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

html文件

<div class="container">
	<header></header>
	<sidebar></sidebar>
	<content></content>
	<footer></footer>
 </div>

css部分

		.container {
			/* 设置为grid布局 */
			display: grid;
			/* 设置列宽和行高 */
			grid-template-columns: 100px 100px 100px;
			grid-template-rows: 100px 100px 100px 100px;
			/*间隔*/
			grid-row-gap: 10px;
			grid-column-gap: 10px;
			/* 进行位置排布 */
			grid-template-areas:
				"header header header"
				"sidebar content content"
				"sidebar content content"
				"footer footer footer"
			;
		}

		/*给子元素起名字*/
		header {
			grid-area: header;
			background: #ef757f;
		}

		sidebar {
			grid-area: sidebar;
			background: #ffc65f;
		}

		content {
			grid-area: content;
			background: #70cfff;
		}

		footer {
			grid-area: footer;
			background: #73db91;
		}