CSS 常见布局

已于 2023-01-30 11:18:41 修改
阅读量1.7k 收藏 7
点赞数
分类专栏： # CSS & Less & Sass 文章标签： 前端 布局 单列布局 双列布局 三列布局
于 2023-01-29 17:52:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/128791889
版权

文章目录

CSS 常见布局

单列布局

单列布局（不通栏）

实现方式：

  • 通过对header、content、footer统一设置宽度。
  • 再设置margin: 0 auto实现居中。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单列布局（不通栏）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.header {
				margin: 0 auto;
				max-width: 960px;
				height: 100px;
				background-color: orangered;
			}

			.content {
				margin: 0 auto;
				max-width: 960px;
				height: 400px;
				background-color: seagreen;
			}

			.footer {
				margin: 0 auto;
				max-width: 960px;
				height: 100px;
				background-color: slateblue;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="content"></div>
		<div class="footer"></div>
	</body>
</html>

单列布局（通栏）

实现方式：

  • header、footer宽度不设置，块元素会充满屏幕。
  • content设置width，并通过margin: auto实现居中。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单列布局（通栏）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.header {
				margin: 0 auto;
				height: 100px;
				background-color: orangered;
				overflow: hidden;
			}

			.nav {
				margin: 10px auto 0;
				max-width: 800px;
				background-color: darkgray;
				height: 50px;
			}

			.content {
				margin: 0 auto;
				max-width: 960px;
				height: 400px;
				background-color: seagreen;
			}

			.footer {
				margin: 0 auto;
				height: 100px;
				background-color: slateblue;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="nav"></div>
		</div>
		<div class="content"></div>
		<div class="footer"></div>
	</body>
</html>

双列布局

双列布局，一列固定宽度，另一列填充用剩余空间。

float+overflow:hidden

实现方式：

  • 如果是普通的两列布局，通过浮动+普通元素的margin可以实现。
  • 如果是自适应的两列布局，通过float+overflow:hidden可以实现，这种办法主要通过overflow触发BFC，而BFC不会重叠浮动元素。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双列布局（float+overflow:hidden）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				height: 500px;
				background-color: palevioletred;
				overflow: hidden;
				zoom: 1;
			}

			.left {
				width: 200px;
				height: 100%;
				background-color: lightgreen;
				float: left;
				margin-right: 20px;
			}

			.right {
				height: 100%;
				background-color: lightblue;
				overflow: hidden;
				zoom: 1;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

flex

实现方式：通过flex弹性盒子布局实现。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双列布局（flex）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				height: 500px;
				background-color: palevioletred;
				display: flex;
			}

			.left {
				width: 200px;
				height: 100%;
				background-color: lightgreen;
				margin-right: 20px;
			}

			.right {
				height: 100%;
				background-color: lightblue;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

grid

实现方式：通过grid布局实现。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双列布局（grid）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				height: 500px;
				background-color: palevioletred;
				display: grid;
				grid-template-columns: auto 1fr;
				grid-gap: 20px;
			}

			.left {
				width: 200px;
				background-color: lightgreen;
			}

			.right {
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

三列布局

三列布局（圣杯布局）

实现方式：

  • 通过float: left进行排列。
  • 再通过margin-left和postion: relatvie进行位置调整。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三列布局（圣杯布局）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				min-width: 600px;
				padding-left: 220px;
				padding-right: 220px;
			}

			.left {
				float: left;
				width: 200px;
				height: 400px;
				background-color: indianred;
				margin-left: -100%;
				position: relative;
				left: -220px;
			}

			.center {
				float: left;
				width: 100%;
				height: 500px;
				background-color: greenyellow;
			}

			.right {
				float: left;
				width: 200px;
				height: 400px;
				background-color: skyblue;
				margin-left: -200px;
				position: relative;
				right: -220px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center">center</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

三列布局（双飞翼布局）

在圣杯布局的基础上进一步优化。

实现方式：

  • 通过float: left进行排列。
  • 再通过margin: left调整位置。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三列布局（双飞翼布局）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				min-width: 600px;
			}

			.left {
				float: left;
				width: 200px;
				height: 400px;
				background-color: indianred;
				margin-left: -100%;
			}

			.center {
				float: left;
				width: 100%;
				height: 500px;
				background-color: greenyellow;
			}

			.center .inner {
				margin: 0 200px;
			}

			.right {
				float: left;
				width: 200px;
				height: 400px;
				background-color: skyblue;
				margin-left: -200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center">
				<div class="inner">center</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

等高布局

等高布局（正padding+负margin）

实现方式：

  • 通过padding-bottom和margin-bottom实现等高。
  • 再通过overflow: hidden把溢出剪切掉。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>等高布局（正padding+负margin）</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				min-width: 600px;
				height: 600px;
				padding-left: 220px;
				padding-right: 220px;
				overflow: hidden;
			}

			.left {
				float: left;
				width: 200px;
				background-color: indianred;
				margin-left: -100%;
				position: relative;
				left: -220px;
			}

			.center {
				float: left;
				width: 100%;
				background-color: greenyellow;
			}

			.right {
				float: left;
				width: 200px;
				background-color: skyblue;
				margin-left: -200px;
				position: relative;
				right: -220px;
			}

			.center,
			.left,
			.right {
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center">center</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

仿表格布局

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿表格布局</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.table {
				width: auto;
				min-width: 1000px;
				margin: 0 auto;
				display: table;
			}

			.tableRow {
				display: table-row;
			}

			.tableCell {
				display: table-cell;
				width: 33%;
				height: 500px;
			}

			.cell1 {
				background-color: orangered;
			}

			.cell2 {
				background-color: palegreen;
			}

			.cell3 {
				background-color: steelblue;
			}
		</style>
	</head>
	<body>
		<div class="table">
			<div class="tableRow">
				<div class="tableCell cell1">left</div>
				<div class="tableCell cell2">center</div>
				<div class="tableCell cell3">right</div>
			</div>
		</div>
	</body>
</html>

粘连布局

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>粘连布局</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
			}

			.content {
				min-height: 100%;
				background-color: lightgrey;
				text-align: center;
				overflow: hidden;
			}

			.content .main {
				padding-bottom: 50px;
			}

			.footer {
				height: 50px;
				line-height: 50px;
				background-color: aliceblue;
				text-align: center;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="main">main</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>

代码下载

xiangxiongfly915
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS常见布局面试题总结
10-31
...`<header>`、`<nav>`、`<main>`、`<article>`、`...以上是HTML+CSS常见布局面试题的主要知识点，熟练掌握这些概念和技术，有助于提升前端开发的效率和质量。在实践中不断探索和应用，才能真正成为布局设计的专家。
CSS常见布局方式
weixin_59528719的博客
03-01 1638
移动端和pc端不能使用同一个页面，两个页面的布局不一致，移动端需要自己另外一个布局并使用自己另外设计一个布局并使用不同域名呈现。块级元素是垂直组织的。：不会另起一行，只要在其父级块级元素的宽度内有足够的空间，他们与其他内联元素被安排在同一行。space-around：项目位于各行之前、之间、之后都留有空白的容器内。column-reverse：与 column 相同，但是以相反的顺序。row-reverse：与 row 相同，但是以相反的顺序。row（默认值）：灵活的项目将水平显示，正如一个行一样。
建议收藏！总结了 42 种前端常用布局方案
祈澈菇凉
03-14 818
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为...
常见的CSS布局方法
最新发布
Keep_Calm_的博客
06-21 652
常见的CSS布局方法
前端css样式在线生成器
单人影的博客
08-14 1193
快速生成css样式代码
CSS布局 ——从display，position， float属性谈起
weixin_33950035的博客
10-13 178
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规...
css初入门：网页布局之网格布局-grid
lalala_dxf的博客
04-25 4848
网格列（Grid Columns）网格行（Grid Rows）网格间隙（Grid Gaps）通过以下属性来调整网格间隙。// 竖直间隙// 水平间隙// 是 row-gap 和column-gap 属性的简写属性列线与竖线列之间的线称为列线（column lines）。行之间的线称为行线（row lines）。
前端html通栏做法实践
qq_63656102的博客
05-15 1322
在前端通栏中也有很多种，今天给大家分享我做的一种，大家可以借鉴一下。
CSS网页布局实例 常见的12种网页布局
12-08
本篇文章将深入探讨12种常见的CSS网页布局实例，帮助你为你的网站创建出引人注目的界面。 1. **单一列布局**：这是最基础的布局，整个页面只有一列内容，适用于博客或个人主页，简洁明了。 2. **两列固定宽度布局*...
CSS网页布局全精通
12-10
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章：CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版...
常见的CSS布局
11-14
本文将深入探讨“常见的CSS布局”这一主题，涵盖基本布局概念、常见布局模式以及实现这些布局的技术。 首先，我们需要了解CSS布局的基本原理。CSS布局的核心在于盒模型，它包括内容（content）、内边距（padding）...
CSS两列布局实现方式总结
01-21
两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式 首先想到的是利用 absolute + margin 的方式...
【css】最全布局总结
qq_45406325的博客
08-13 7999
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
利用CSS+DIV进行网页布局
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
CSS常见的布局方式
BYGFJ的博客
11-26 2903
CSS中常见布局方式有哪些？下面本篇文章就来给大家介绍一下CSS中的常见布局方式，希望对大家有所帮助。 在介绍CSS布局方式之前我先简单说明一下html中的三种布局方式： 流动布局（默认） 浮动布局（float） 定位布局（position） 好了，这里就不详细介绍这三种布局了，今天我们的重头戏是探索CSS中常见的布局方式有哪些？ 一、单列布局 常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content .
【六】CSS之网页布局
Chimengmeng的博客
07-04 717
【六】CSS之网页布局 【1】什么是网页布局 所谓的布局就是依靠css布局让html元素，可以按照UI设计师提供的设计稿进行HTML网页的内容排版并实现页面的布局效果。 布局的学习关键就是： 布局方式， 盒模型， css样式。 css中提供了4种布局方式： 分别是流式布局(默认方式) 浮动布局 定位布局 弹性布局(伸缩盒)。 【2】布局属性 (1)表格相关 纯粹的表格布...
CSS之页面布局
Fancymeng的博客
09-03 420
看到了csdn助手的建议，今天就来谈一谈页面布局 本篇文章仍然有着多样的布局方式 同时，此篇依然会连带着VUE一起来谈一谈如果说上一篇文章的导航栏是用户的指南针，那页面布局就是用户的“晴雨表” 好的页面布局自然会使得人耳目一新 反之，如果页面杂乱不堪，相信。。。你们懂的
分享 10 个常见的 CSS 页面布局代码片段
前端达人
02-20 6771
大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Card layo...
html如何制作一个手机商城网页通栏
yoig_的博客
10-28 512
【代码】html如何制作一个手机商城网页通栏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值