CSS常用布局

最新推荐文章于 2024-06-21 16:09:32 发布

chujia3129

最新推荐文章于 2024-06-21 16:09:32 发布

阅读量97

点赞数

原文链接：https://my.oschina.net/yardbaby/blog/1819975

版权

CSS常用布局

定位布局

什么是定位
定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
定位的属性值静态定位相对定位绝对定位固定定位
定位布局技巧子绝父绝子绝父相

流布局
浮动布局
flex和grid布局
三栏布局（圣杯布局 vs 双飞翼布局）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>圣杯布局</title>
		<style>
			* {
		            margin: 0;
		            padding: 0;
				
			}
			body{
		            min-width: 700px;
			}
		    .header,
		    .footer{ 
		           border: 1px solid #333;
		           background: #aaa;
		           text-align: center;
		    }    
		    .left,
		    .middle,
		    .right{
		    	 position: relative;
		 	 float: left;
		    	 min-height: 130px;
		    }
		    .container {
		    	padding: 0 220px 0 200px;
		    	overflow: hidden;
		    }
		    .left {
		    	margin-left: -100%;
		    	left: -200px;
		    	width: 200px;
		    	background: red;
		    }
		    .right {
		    	margin-left: -220px;
		    	width: 220px;
		    	background: green;
		    	right: -220px;
		    }
		    .middle {
		    	width: 100%;
		    	background: yellow;
		    	word-break: break-all;
		    }
		    .footer {
		    	clear: both;
		    }
		</style>
	</head>
	<body>
		<header>header</header>
		<div class="container">
			<section class="middle">middle</section>
			<section class="left">left</section>
			<section class="right">right</section>
		</div>
		<footer>footer</footer>
	</body>
</html>

圣杯布局和双飞翼布局都是左右两栏固定宽度，中间部分自适应。

转载于:https://my.oschina.net/yardbaby/blog/1819975

chujia3129

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常用布局

CSS常用布局定位布局什么是定位定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。定位的属性值静态定位相对定位绝对定位固定定位定位布局技巧子绝父绝子绝父相流布局浮动布局...
复制链接

扫一扫