第四章 CSS布局与定位（下）

最新推荐文章于 2024-12-09 15:12:28 发布

原创最新推荐文章于 2024-12-09 15:12:28 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

Web前端开发专栏收录该内容

10 篇文章

订阅专栏

本文介绍了浮动定位的left和right属性以及clear属性在网页布局中的使用，展示了如何通过浮动实现多列布局。同时，探讨了层定位的position属性，包括fixed、relative和absolute的含义和应用场景，并提及了left、right、top、bottom和z-index属性在定位中的作用。通过实例代码，详细解析了如何利用这些定位方式创建复杂网页布局。

二.浮动定位

float属性：left-左浮动

right-右浮动

none-不浮动

clear属性：both，清除左右两边的浮动

left和right只能清除一个方向的浮动

none是默认值

div{
    width:200px;
    height:200px;
    border:1px solid red;
    float:left;
}

<div id="box1"></div>
<div id="box2"></div>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4行3列</title>
    <style type="text/css">
		*{
	margin: 0;
	padding: 0;
}
body { 
	font-family:"微软雅黑"; 
	font-size:14px; 
}

#container {
	margin:0 auto; 
	width:900px; 
}

#header { 
	height:100px;
	background:#6cf; 
	margin-bottom:5px;
}

#nav{ 
	height:30px;
	background:#09c; 
	margin-bottom:5px;
}

#main{ 
	height:500px;
	/*background:#cff; */
	margin-bottom:5px;
}
.aside{
	float:left; 
	width:100px; 
	height:500px; 
	background:#6cf;
}
#aside1 { 

}
#aside2 { 
    margin-left:5px;
}
#content{ 
	float:left; 
	margin-left:5px;
	width:690px; 
	height:500px; 
	background:#cff;
}
#footer { 
	height:60px; 
	background:#6cf;
}
	</style>
</head>
<body>
<div id="container">
 
  <div id="header">
  </div>

  <div id="nav">
  </div>

  <div id="main"> 
	  <div id="aside1" class="aside">
	  </div>

	  <div id="content"> 
	  </div>

	  <div id="aside2" class="aside">
	  </div>
  </div>

  <div id="footer">
  </div>
</div>

</body>
</html>

三.层定位

position属性：fixed、relative、absolute

left属性

right属性

top属性

bottom属性

z-index属性

1.position属性

static：默认值 top、bottom、left、right、z-index无效

fixed：固定定位相对于浏览器窗口进行定位

relative：相对定位相对于其直接父元素进行定位

absolute：绝对定位相对于static定位以外的第一个父元素进行定位