程序员经验分享-hwhale

CSS的盒模型

2023-11-11

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分

盒子模型分为两种:

  1. 第一种是W3C标准的盒子模型（标准盒模型）
  2. 第二种IE标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的表现效果的区别之处：

  1. 标准盒模型中
    width指的是内容区域content的宽度
    height指的是内容区域content的高度
    标准盒模型下盒子的大小 = content + border + padding + margin
    在这里插入图片描述

  2. 怪异盒模型中
    width指的是内容、边框、内边距总的宽度（content + border +padding）
    height指的是内容、边框、内边距总的高度
    怪异盒模型下盒子的大小=width（content + border + padding）+ margin
    在这里插入图片描述

可以通过属性box-sizing来设置盒子模型的解析模式

  1. content-box：默认值，
    border和padding不算到width范围内
    可以理解为是W3c的标准模型(default)。
    总宽=width+padding+border+margin

  2. border-box：
    border和padding划归到width范围内
    可以理解为是IE的怪异盒模型
    总宽=width+margin

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html5css3

css

前端

javascript

CSS的盒模型 的相关文章

随机推荐

  • vue插件开发以及发布

    vue插件开发

  • 关于串口通信思考

    如何给串口通信口增加LED灯作为通信指示灯 以下给出2种电路设计参考 第一种 第二种 思考 以上哪种电路更优 为什么 第一种电路 LED灯使用共阴极连接 这种方法有什么好处呢 就是在TX在高电平情况下会点亮二极管 低电平情况下不会 这个问题

  • 刷脸支付成为全球科技巨头们主攻研发方向

    相对于已经熟悉的二维码支付 一些民众对于刷脸支付是否安全表示担忧 蚂蚁金服资深算法专家李亮表示 通过软硬件的结合 智能算法与风控体系综合保证准确性和安全性 目前识别的准确率为99 99 而扫码极易植入木马和钓鱼软件 反而存在更大的安全隐患

  • [人工智能-深度学习-78]：开发环境 - pip install cv2下载失败的解决办法

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 https blog csdn net HiWangWenBing article details 122320433 目录 1 出错现象

  • TypeScript 枚举使用整理

    一 定义 enum 使用枚举我们可以定义一些有名字的数字常量 枚举通过enum关键字定义 枚举的定义和C 中有些类似 enum Direction Up 1 Down Left Right console info Direction co

  • java.lang.StackOverflowError出现的原因

    严重 Exception initializing page context java lang StackOverflowError at javax servlet http HttpServletRequestWrapper getS

  • sys.argv和argparse和os.environ/python命令行中键入参数的三种方式

    参考 命令行运行Python脚本时传入参数 3种方法 https blog csdn net helloasimo article details 124210144 x 1 sys argv sys argv类似于c中main函数中的ar

  • 区块链技术发展面临七大关键挑战以及未来的五大展望

    经过十多年的发展 区块链技术逐渐走入大众视野 并融入各行各业的建设中 今年国家也首次将区块链技术纳入新基建的范畴 近日 梳理了区块链技术的基础架构 扩展技术 挑战 并对未来区块链技术的发展进行展望 随着对区块链技术价值的发掘 区块链技术逐渐

  • 【玩转数据系列十六】机器学习PAI通过声音分辨男女（含语音特征提取相关数据和代码）...

    背景 随着人工智能的算法发展 对于非结构化数据的处理能力越来越受到重视 这里面的关键一环就是语音数据的处理 目前 许多关于语音识别的应用案例已经影响着我们的生活 例如一些智能音箱中利用语音发送指令 一些搜索工具利用语音输出文本代替键盘录入

  • Java基础——语法

    1 变量与数据类型 1 1 标识符 命名规范参考Java开发手册 嵩山版 Java对包 类 方法 参数和变量等要素命名时使用的字符序列称为标识符 命名规则如下 由字母 数字 下划线 和美元符号 组成 不能以数字开头 区分大小 长度无限制 不

  • PHP基础巩固【PHP导入导出EXCEl，TP实用封装函数，可定义表格样式】

    这个方法是自己封装了 方法确实也好用 自己也用了好几年了 但是最近发现好多小年轻用到都是PhpOffice 咱也应该与时俱进 就先把这方法分享出来 等熟悉下phpoffice再贴出更新后的版本 把以下代码写入公共函数 导入EXCEL par

  • Spigot插件开发, 使用IDEA初始化maven项目并完成简单的世界保护功能 (Spigot开发笔记-1)

    文章目录 笔记提要 开发环境 初始化项目 1 安装 IDEA 中 MineCraft 开发辅助插件 2 利用插件创建 Spigot 项目 3 填写 Spigot 项目初始化选项 4 填写 bukkit yml 选项 5 完成创建 初始化插件

  • 使用阿里云和PicGo搭建个人图床

    使用阿里云和PicGo搭建个人图床 图床 顾名思义 就是一个存储图片的云盘 可以用于作为写笔记和博客的工具 平时做笔记时直接通过截图保存的图片一般都存储在本地 一当本地图片受不可抗力被删除或者是希望把文档分享给他人或上传到自己的博客的时候

  • jquery-migrate.min.js兼容jQuery版本

    一 情形描述 已知live 方法在 jQuery 版本 1 7 中被废弃 在版本 1 9 中被移除 特殊原因下 你需要在已引用jquery 2 1 1 js的页面中使用live 那么肯定是无效的 1 代码

  • 先记录一下转化json特殊处理

    JsonProperty n private String name JsonProperty u private String url JsonProperty i 先记录一下转化json特殊处理

  • mongodb shell中显示更多数量的结果

    DBQuery shellBatchSize 300 url http stackoverflow com questions 3705517 how to print out more than 20 items documents in

  • AngularJs、RequireJs、AngularAMD、ui-router搭建的JS文件动态加载

    如今页面的复杂度极高 需要加载的脚本文件极多 降低了用户体验 所以写了这个动态加载脚本的demo 欢迎交流 1 主页 requireJs 入口 data main mian js 如下 b b

  • 递归和循环的区别

    针对需要重复地多次计算相同的问题 通常可以选择递归或者循环两种不同的方法 递归是在一个函数的内部调用这个函数本身 循环是通过设置计算的初始值及终止条件 在一个范围内重复计算 我们以计算1 2 3 n为例 我们可以采用递归和循环两种方式求出结

  • 三菱plc pwm指令_【三菱PLC指令教程】步进指令STL和RET(单序列状态转移图编程)

    戳上方 蓝字 PLC课程 关注我们哦 一 状态继电器 状态继电器 S 是PLC内部软继电器的一种 它和输入继电器 X 和输出继电器 Y 一样 有无数对常开触点和常闭触点 如不作步进状态软元件 可作一般的辅助继电器 M 使用 FX2N系列PL

  • CSS的盒模型

    盒子模型 Box Modle 可以用来对元素进行布局 包括内边距 边框 外边距 和实际内容这几个部分 盒子模型分为两种 第一种是W3C标准的盒子模型 标准盒模型 第二种IE标准的盒子模型 怪异盒模型 标准盒模型与怪异盒模型的表现效果的区别之

热门标签