css中盒模型有哪些

标准盒模型(w3c盒模型)

在标准盒模型中,元素的width和height只包括内容区域,不包括内边距、边框、外边距。也就是元素的实际宽高是内容区域加上内边距、边框、外边距。

例如:一个元素的宽度设置为100px,内边距为10px,边框为5px,那么该元素的实际宽度将是130px(100 + 10**2 + 5**2)

怪异盒模型(IE盒模型)

怪异盒模型与标准盒模型不同,它的widthheight 属性不仅包括内容区域,还包括内边距和边框,但不包括外边距。这意味着,如果你设置了相同的widthheight ,在怪异盒模型中,内容区域会比在标准盒模型中小,因为内边距和边框也被包含在内。在怪异模式下,一个块的总宽度等于width 加上margin (左右),其中width 已经包含了paddingborder值。

相关推荐
安妮的小熊呢6 分钟前
CRMEB开源商城系统 & 标准版系统(PHP)开发规范
开发语言·javascript·php
BY组态12 分钟前
Ricon组态系统技术深度解析:打造高性能Web可视化平台
前端·物联网·iot·web组态·组态
山屿落星辰25 分钟前
Flutter 高级特性实战:动画、自定义绘制、平台通道与 Web 优化
前端·flutter
坚定信念,勇往无前1 小时前
electron-vite 安装better-sqlite3
javascript·数据库·electron
@菜菜_达1 小时前
jquery.inputmask插件介绍
前端·javascript·jquery
QuZhengRong1 小时前
【Luck-Report】缓存
java·前端·后端·vue·excel
jiayong231 小时前
前端面试题库 - 浏览器与网络篇
前端·网络·面试
Csvn1 小时前
小程序开发:微信小程序与 uni-app 实战指南
前端
摸鱼小李上线了1 小时前
vue项目页面添加水印实现方法
前端·javascript·vue.js
砍材农夫2 小时前
物联网 基于netty构建mqtt协议规范(主题通配符订阅)
java·前端·javascript·物联网·netty