DIV布局页面

  1. 盒子模型（DIV布局基础）

所有DIV元素都遵循CSS盒子模型，由内到外依次为：

  • 内容区（content）：元素实际内容，宽高由 width/height 定义

  • 内边距（padding）：内容与边框之间的距离，会撑大盒子

  • 边框（border）：盒子的边框，可设置样式、宽度、颜色

  • 外边距（margin）：盒子与其他元素之间的距离

关键属性： box-sizing: border-box ，让宽高包含padding和border，避免盒子溢出，是DIV布局必备属性。

  1. 页面居中布局

  • 水平居中：块级DIV设置 margin: 0 auto +固定宽度

  • 垂直居中：Flex布局（父元素 display: flex; align-items: center ）、绝对定位+transform

  1. 自适应布局

  • 宽度用百分比、 vw 单位，替代固定像素

  • 配合 max-width / min-width 限制最大/最小宽度

  • Flex/Grid布局自动适配不同屏幕

  1. 嵌套布局规则
  • 父元素设置相对定位，子元素绝对定位，实现精准嵌套布局
  • 嵌套层级不宜过多，避免结构混乱、代码冗余
  • 合理划分页面模块（头部、导航、内容、侧边栏、底部）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div布局页面</title>
		<style type="text/css">
			*{
margin:0;padding:0
}
			div.parent
{
				margin: 0
 auto; 
				width: 1000px
;
				height: 600px
;
				background-color
: plum;
			}
			div.son1
{
				background-color
: pink;
				height:50%
;
				/*width:50%*/
			}
			div.son2
{
				background-color
: skyblue;
				height:50%
;
				/*width:50%*/
			}
		</style> 
	</head>
	<body>
		<div class="parent">
        	<div class="son1">
			    DIV1
		    </div>
		    <div class="son2">
		    	DIV2  	
		    </div>
        </div>
	</body>
</html>
posted @ 2026-04-13 13:15  今今日晴  阅读(17)  评论(0)    收藏  举报