css布局

最新推荐文章于 2024-06-23 16:51:10 发布

许家小白

最新推荐文章于 2024-06-23 16:51:10 发布

阅读量79

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_41682005/article/details/120811595

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

三列布局：三列元素，左右元素固定宽度；中间元素自适应

1、绝对定位

css部分：

* {
	margin: 0;
}
#box1 {
	width: 100%;
	height: 100vh;
}
#left {
	position: absolute;
	width: 200px;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: burlywood;
}
#right {
	position: absolute;
	width: 200px;
	height: 100vh;
	top: 0;
	right: 0;
	background-color: burlywood;
}
#main {
	margin: 0 200px;
	height: 100%;
	background-color: cadetblue;
}

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习</title>
		<link rel="stylesheet" type="text/css" href="./src/index.css" />
		<link rel="stylesheet" href="./src/style1.css" />
	</head>
	<body>
		<div id="box1">
			<div id="left">left</div>
			<div id="right">right</div>
			<div id="main">main</div>
		</div>
	</body>
</html>

截图：

注意点：

（1）宽度可以不设置，默认100%；

高度必须设置，如果不设置，默认无高度，或者是被子元素撑开的高度。

（2）margin: a b c d （这里的abcd分别代表上下左右）

margin: a b（这里的a代表上下，b代表左右）

margin: a （这里的a代表的是上下左右四个方向）

本段中如果不设置，中间部分的文本会被左边的块盖住，设置200px是因为左边的块宽度为200px，可以自己设置别的数字看看

2、浮动定位

html部分如上不变，效果图也没有改变

css部分：

* {
	margin: 0;
}
#box1 {
	width: 100%;
	height: 100vh;
}
#left {
	float: left;
	width: 200px;
	height: 100vh;
	background-color: burlywood;
}
#right {
	float: right;
	width: 200px;
	height: 100vh;
	background-color: burlywood;
}
#main {
	height: 100%;
	background-color: cadetblue;
}

注意点：

因为浮动脱离了文档流，所以中间部分main一定要放在三列元素的最后面（html里）

缺点：文字不会跟随屏幕大小而自适应，文字太多会溢出此box1显示在最下方

3、圣杯布局

过程看这个解释，非常详细什么是圣杯布局以及双飞翼布局 - 知乎

注意点：虽然中间center部分设置了100%宽度，但要注意自己设置的padding宽度

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习</title>
		<link rel="stylesheet" type="text/css" href="./src/index.css" />
		<link rel="stylesheet" href="./src/style1.css" />
	</head>
	<body>
		<div id="box1">
			<div id="header">#header</div>
			<div id="container">
				<div id="middle" class="common">#middle</div>
				<div id="left" class="common">#left</div>
				<div id="right" class="common">#right</div>
			</div>
			<div id="footer">#footer</div>
		</div>
	</body>
</html>

css部分：

* {
	margin: 0;
}
#box1 {
	min-width: 550px;
	width: 100%;
	height: 100vh;
}
#header {
	background-color: cornsilk;
	height: 60px;
	text-align: center;
}
#footer {
	background-color: cornsilk;
	height: 60px;
	text-align: center;
}
.common {
	height: 200px;
	float: left;
	position: relative;
}
#container {
	padding-left: 200px;
	padding-right: 100px;
    overflow: hidden;
}
#left {
	width: 200px;
	margin-left: -100%;
	left: -200px;
	/* transform: translateX(-100%); */
	background-color: darksalmon;
}
#right {
	width: 100px;
	margin-right: -100px;
	background-color: green;
}
#middle {
	width: 100%;
	background-color: lightskyblue;
}

4、

许家小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局

三列布局：三列元素，左右元素固定宽度；中间元素自适应1、绝对定位css部分：* { margin: 0;}#box1 { width: 100%; height: 100vh;}#left { position: absolute; width: 200px; height: 100vh; top: 0; left: 0; background-color: burlywood;}#right { position: absolute; width: 20..
复制链接

扫一扫