📐 CSS盒子模型详解

在学习jQuery尺寸方法之前，必须理解CSS盒子模型。每个HTML元素都可以看作是一个盒子，这个盒子由四个部分组成：

Margin（外边距）
Border（边框）
Padding（内边距）
Content（内容）
  • Content（内容）：元素的实际内容（文本、图像等）
  • Padding（内边距）：内容周围的透明区域
  • Border（边框）：围绕内容和内边距的边界
  • Margin（外边距）：边框外部的透明区域，用于与其他元素保持距离

💡 jQuery尺寸方法主要是用来获取或设置这些不同部分的尺寸值。

🔧 核心尺寸方法

演示元素

width() / height()

—

内容区域宽度/高度（不包括内边距、边框和外边距）

innerWidth() / innerHeight()

—

内容 + 内边距的宽度/高度

outerWidth() / outerHeight()

—

内容 + 内边距 + 边框的宽度/高度

outerWidth(true) / outerHeight(true)

—

内容 + 内边距 + 边框 + 外边距的宽度/高度

// 获取元素宽度
var w = $(“#element”).width();

// 获取元素内部宽度（包括内边距）
var innerW = $(“#element”).innerWidth();

// 获取元素外部宽度（包括内边距和边框）
var outerW = $(“#element”).outerWidth();

// 获取元素外部宽度（包括内边距、边框和外边距）
var outerWMargin = $(“#element”).outerWidth(true);
方法 包含内容 示意图
width() / height() 仅内容区域 Content
innerWidth() / innerHeight() 内容 + 内边距 Content + Padding
outerWidth() / outerHeight() 内容 + 内边距 + 边框 Content + Padding + Border
outerWidth(true) / outerHeight(true) 内容 + 内边距 + 边框 + 外边距 Content + Padding + Border + Margin
️ 注意：当元素被隐藏（display: none）时，这些方法可能返回0，因此在获取尺寸前确保元素可见。

🌐 窗口与文档尺寸

jQuery还提供了获取浏览器窗口和整个文档尺寸的方法：

$(window).width()

—

浏览器视口宽度

$(window).height()

—

浏览器视口高度

$(document).width()

—

整个文档的宽度

$(document).height()

—

整个文档的高度

// 获取窗口宽度和高度
var winWidth = $(window).width();
var winHeight = $(window).height();

// 获取文档宽度和高度
var docWidth = $(document).width();
var docHeight = $(document).height();

// 监听窗口大小变化
$(window).resize(function() {
  console.log(“窗口大小变化了：” + $(window).width());
});
💡 窗口尺寸方法常用于创建响应式网页，根据浏览器窗口大小调整布局。

🎛 设置尺寸

除了获取尺寸，jQuery也可以设置元素尺寸：

// 设置宽度和高度（仅内容区域）
$(“#element”).width(200);
$(“#element”).height(150);

// 使用函数设置尺寸
$(“#element”).width(function(index, currentWidth) {
  return currentWidth + 50; // 增加50像素
});

// 设置内部宽度（内容+内边距）
// 注意：innerWidth()不能直接设置，只能通过CSS
$(“#element”).css({“padding”: “20px”, “width”: “160px”});
️ 注意：innerWidth()/innerHeight() 和 outerWidth()/outerHeight() 主要用于获取尺寸，不能直接用于设置值。 要设置内部尺寸（包括内边距），需要分别设置宽度和内边距属性。

🔄 实际应用场景

1. 响应式设计

根据窗口大小调整元素布局：

$(window).resize(function() {
  if ($(window).width() < 768) {
    // 小屏幕布局
    $(“.sidebar”).css(“width”, “100%”);
  } else {
    // 大屏幕布局
    $(“.sidebar”).css(“width”, “30%”);
  }
});

2. 居中元素

动态计算元素位置使其居中：

function centerElement() {
  var winWidth = $(window).width();
  var winHeight = $(window).height();
  var elemWidth = $(“#element”).outerWidth();
  var elemHeight = $(“#element”).outerHeight();

  var leftPos = (winWidth – elemWidth) / 2;
  var topPos = (winHeight – elemHeight) / 2;

  $(“#element”).css({
    position: “fixed”,
    left: leftPos + “px”,
    top: topPos + “px”
  });
}

// 页面加载和窗口变化时居中
$(window).on(“load resize”, centerElement);

3. 等高列布局

使多个列具有相同的高度：

列 1
列 2
列 3
function setEqualHeight() {
  // 重置高度
  $(“.responsive-box”).height(“auto”);

  // 找出最高列的高度
  var maxHeight = 0;
  $(“.responsive-box”).each(function() {
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });

  // 设置所有列为相同高度
  $(“.responsive-box”).height(maxHeight);
}

// 页面加载和窗口变化时调整
$(window).on(“load resize”, setEqualHeight);