页面布局的几种方式

「已注销」

已于 2022-03-26 16:14:04 修改

阅读量3.4k

点赞数

文章标签：前端

于 2022-03-26 16:12:03 首次发布

本文链接：https://blog.csdn.net/qq_43661006/article/details/123755435

版权

页面布局的五种方式

（1）、栅格布局

bootstrap地址：[https://v5.bootcss.com/docs/getting-started/introduction/]

（2）、响应式布局

1、媒体查询
@media 查询，可以针对不同的媒体类型定义不同的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>响应式布局</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<style>
			
			@media screen and (max-width: 960px){
			 body{
			 background-color:#FF6699
			 }
			}
			@media screen and (max-width: 768px){
			 body{
			 background-color:#00FF66;
			 }
			}
			@media screen and (max-width: 550px){
			 body{
			 background-color:#6633FF;
			 }
			}
			@media screen and (max-width: 320px){
			 body{
			 background-color:#FFFF00;
			 }
			}
		</style>
	</head>
	<body>
	
	</body>
</html>

（3）、双飞翼布局

两边固定盒子固定宽高，中间盒子自适应大小

   <!DOCTYPE html>
      <html lang="en">
      <head>
      <style>
          .main {
          float: left;
          width: 100%;
          }
          .content {
          height: 200px;
          margin-left: 110px;
          margin-right: 220px;
          background-color: green;
          }
          
          .main::after {
          display: block;
          content: '';
          font-size: 0;
          height: 0;
          clear: both;
          zoom: 1;
          }
      .left {
          float: left;
          height: 200px;
          width: 100px;
          margin-left: -100%;
          background-color: red;
      }
      .right {
          width: 200px;
          height: 200px;
          float: left;
          margin-left: -200px;
          background-color: blue;
      }   
      </style>
      </head>
      <body>
      <div class="main">
          <div class="content"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
	  
      </body>
      </html>

（4）、定位

1、默认定位 ： position:static      默认样式
2、相对定位 ：position:relative     相对于自身定位 ，不会脱离文档流

.box{
    width:100px;
    height:100px;
    border:1px solid green;
	position:relative;
	left:10px;
	top:10px;
}

3、绝对定位 ：position:absolute  相对于父元素定位，如果父元素没有定位，则会相对于<html>定位，会脱离文档流

.box{
    width:100px;
    height:100px;
    border:1px solid green;
	position:absolute;
	left:10px;
	top:10px;
}

4、固定定位 ：position:fixed   相对于视口定位   ，会脱离文档流

.box{
    width:100px;
    height:100px;
    border:1px solid green;
	position:fixed;
	right:10px;
	bottom:10px;
}

5、粘性定位 ：position:sticky   鼠标滚轮滚动一段距离后，固定位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				width:100%;
				height:2000px;
			}
			.item1{
				width:100px;
				height:100px;
				background-color: skyblue;
				
			}
			.item2{
				width:100px;
				height:100px;
				background-color: green;
				position: sticky;
				top:0px;
			}

		</style>
	</head>
	<body>
		<div class="container">
			<div class="item1"></div>
			<div class="item2"></div>
		</div>
	</body>
</html>

（5）、浮动

在父元素下有很多小盒子时可以使用浮动，但要注意清除浮动，防止后面的盒子错位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动与清除浮动</title>
		<style type="text/css">
			.con{
				width:120px;
				height:120px;
				border:1px solid green;
			}
			.item{
				width:100px;
				height:100px;
				border:1px solid black;
				float: left;
			}
			.wrapper{
				width:120px;
				height:120px;
				border:1px solid black;
				clear: both;  //清除浮动 如果不设置浮动，该盒子就会和前面的盒子重叠，但是盒子里面的文字不会重叠到前面的盒子里面。
			}
		</style>
	</head>
	<body>
		<div class="con"></div>
		<div class="item">aaa</div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="wrapper">11</div>
	</body>
</html>