页面布局的几种方式

2024年3月7日 146次阅读 来源: 「已注销」

页面布局的五种方式

（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>
    原文作者：「已注销」
    原文地址: https://blog.csdn.net/qq_43661006/article/details/123755435
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞