CSS布局

最新推荐文章于 2024-08-07 11:21:21 发布

原创最新推荐文章于 2024-08-07 11:21:21 发布 · 742 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了CSS中max-width、box-sizing等属性的应用技巧，通过实例解释了这些属性如何帮助开发者更好地控制网页布局，特别是在响应式设计方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，max-width

<html>
	<head><title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			.main{
				max-width:600px;
				margin:20px auto;
				border:solid 1px;
			}
		</style>
	</head>
	<body>
		<div class="main">在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。
在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。</div>
	</body>
</html>

2,box-sizing

<html>
	<head><title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			.simple {
				  width: 500px;
				  margin: 20px auto;
				  -webkit-box-sizing: border-box;
					 -moz-box-sizing: border-box;
						  box-sizing: border-box;
				border: solid blue 10px;
				}

			.fancy {
				  width: 500px;
				  margin: 20px auto;
				  padding: 50px;
				  border: solid blue 10px;
				  -webkit-box-sizing: border-box;
					 -moz-box-sizing: border-box;
						  box-sizing: border-box;
				}
		</style>
	</head>
	<body>
		<div class="simple">盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。</div>
		<div class="fancy">所以开发者们把以下CSS代码放在他们页面上：* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}这样可以确保所有的元素都会用这种更直观的方式排版。</div>
	</body>
</html>

3, clear

<html>
	<head><title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			.box {
			  float: left;
			  width: 200px;
			  height: 100px;
			  margin: 1em;
			  border:solid 1px;
			}
			.after-box {
			  clear: left;
			  border:solid 1px;
			}
		</style>
	</head>
	<body>
		<div class="box">我感觉好像我在漂浮！</div>
		<div class="after-box">使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。</div>
	</body>
</html>

4, overflow

<html>
	<head><title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			img{
				float:right;
				width: 50%;
			}
			.clearfix {
				max-width:600px;
				margin:0 auto;
				border:solid 1px;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div class="clearfix">这个图片比包含它的元素还高， 而且它是浮动的，为了防止它溢出到了容器外面！就得使用overflow.
		如果你想要支持IE6，你就需要再加入:zoom:1;
		<p>百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！</p>
			<img src="img.png"/>
		</div>
		
	</body>
</html>

5, column

<html>
	<head><title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			.three-column {
				max-width:700px;
				background-color:red;
				  padding: 1em;
				  -moz-column-count: 3;
				  -moz-column-gap: 1em;
				  -webkit-column-count: 3;
				  -webkit-column-gap: 1em;
				  column-count: 3;
				  column-gap: 1em;
				}
		</style>
	</head>
	<body>
		<h1>这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。</h1>
		<div class="three-column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</div>
	</body>
</html>

6, flexbox

<html>
	<head><title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			.container {
				  display: -webkit-flex;
				  display: flex;
				  
				}
				.initial {
				  -webkit-flex: initial;
						  flex: initial;
				  width: 200px;
				  min-width: 100px;
				  background-color:red;
				}
				.none {
				  -webkit-flex: none;
						  flex: none;
				  width: 200px;
				   background-color:green;
				}
				.flex1 {
				  -webkit-flex: 1;
						  flex: 1;
				 background-color:red;
				}
				.flex2 {
				  -webkit-flex: 2;
						  flex: 2;
				 background-color:green;
				}
		</style>
	</head>
	<body>
		<div class="container">
		<div class="initial">空间足够的时候，我的宽度是200px，如果空间不足，我会变窄到100px，但不会再窄了。</div>
		<div class="none">无论窗口如何变化，我的宽度一直是200px。</div>
		<div class="flex1">余宽度的1/3。</div>
		<div class="flex2">我会占满剩余宽度的2/3。</div>
		</div>
	</body>
</html>

7, position

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			.fixed{
				position:fixed;
				bottom:0;
				right:0;
				width:200px;
				height:100px;
				background-color:yellow;
				border:solid 1px;
			}
			.relative{
				position:relative;
				width:600px;
				height:400px;
				border:solid 1px;
				background-color:red;
			}
			.absolute{
				position:absolute;
				top:120px;
				right:0;
				width:300px;
				height:200px;
				border:solid 1px;
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div class="relative">这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。
		
		<div class="absolute">这个元素是绝对定位的。它相对于它的父元素定位。</div>
		</div>
		
		
		<div class="fixed">我是固定在屏幕右下角的哦</div>
	</body>
</html>

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			.container{
				position:relative;
			}
			.nav{
				position:absolute;
				left:0px;
				width:200px;
				background-color:yellow;
				
			}
			.section{
				<!--position is static by default-->
				margin-left:200px;
				background-color:red;
			}
			.footer{
				position:fixed;
				bottom:0;
				left:0;
				height:70px;
				background-color:green;
				width:100%;
			}
			body{margin-bottom:120px;}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="nav">
				<ul>
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
				</ul>
			</div>
		
			<div class="section">section s的 margin-left 样式确保了有足够的空间容纳 nav 元素。</div>
			<div class="section">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</div>
			<div class="section">注意当你调整浏览器窗口时发生了什么。效果很赞！</div>
		<div class="footer">如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！我在 body 上面加了 margin-bottom 。</div>
		
		</div>
	</body>
</html>

8,float

<html>
	<head><title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			* {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			#main{
				max-width:600px;
				margin:20px auto;
				border:solid 1px;
			}
			#div1{
				max-width:600px;
				margin:20px auto;
				padding:50px;
				border:solid 1px;
			}
			img{float:right;margin:0 0 1em 1em;}
		</style>
	</head>
	<body>
		<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
		<img src="img.png"/>
		</div>

	</body>
</html>