css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
toooooop85 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_11 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy13 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全19 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101222 分钟前
[前端]1.html基础
前端·笔记·学习·html
白水清风31 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy32 分钟前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全41 分钟前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐1 小时前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou1 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台