首页 > 其他分享 >简单理解盒子模型

简单理解盒子模型

时间:2024-04-27 18:12:24浏览次数:20  
标签:盒子 border 模型 padding 理解 margin 4px

1. 什么叫盒子模型
在html中大部分元素,特别是块元素display:block;都可以被看做一个盒子。网页布局就是一个一个盒子的平铺,堆叠,嵌套摆放。这么多的盒子放在一起,最重要的就是去关注他们的各种尺寸,边界等等,主要怕意料外的重叠一类导致的显示不正常。

2. W3C和IE盒子模型指的什么?

  • W3C标准盒子模型

    如图,它由content,padding,border,margin几个属性构成,这几个都是css里面用到最多的一些属性设置项。在这个图里可以知道为啥css的一些属性要这么设置,以及值是怎么来的。
    下图可以直观的表示margin/padding的作用范围:

    padding和margin之间的虚线线宽,就可以称作边界border
    padding和margin都有上下左右的作用范围,写作-left,-right,-top,-bottom
    padding和margin长度设置方法可以用auto,legth(px/cm单位),%(父元素宽度的百分比计算),inherit(集成父元素的边距)
    padding和margin可以用组合属性,感觉有些约定俗成的东西在里面,如下理解,顺序方向记住就行:
    • margin:4px表示上下左右都是4px(表示四个方向
    • margin:4px 8px表示上下4px,左右8px(前一个表示上下,后一个表示左右
    • margin:4px 8px 5px表示上4px,左右8px,下5px(第一个用于上,第二个用于左右,第三个用于下
    • margin:4px 8px 5px 3px表示上4px,右8px,下5px,左3px(顺时针,上右下左

关于盒子尺寸的计算,如下简单加减法:

# 在W3C模型中
actual width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
actual height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
  • IE标准盒子模型

    和W3C盒子模型不一样的是,IE盒子模型把border的(left+right)算到width里面去了,把border的(top+bottom)算到height里面去了;
    如此看来,IE的设置精度和W3C比起来算是变差了。

  • 如何让浏览器选择对应的盒子模型
    不同的盒子模型就带来了不一样的差异,这就是为什么用不同的浏览器,显示效果有时会有差异的原因
    <DOCTYPE>中加入声明,让浏览器知道应该以那种方式解释盒子

3. margin使用的一些注意事项

  • 增加块marigin-bottom或者margin-top值之后,元素却没有变化
    这是因为合并后的就发生交叉重叠。

    这种效果就和PPT置入顶层置于底层的效果是一样的

标签:盒子,border,模型,padding,理解,margin,4px
From: https://www.cnblogs.com/xiacuncun/p/18162230

相关文章

  • EPAI手绘建模APP资源管理和模型编辑器1
    (10) 资源① 打开资源管理页面。图 15 资源列表-模型 图 16 资源列表-图层 图 17 资源列表-相机 图 18 资源列表-灯光② 资源管理页面包括模型列表、图层列表、相机列表、灯光列表;包括颜色选择页面、贴图选择页面、材质选择页面、样式选择页面。③ 模型......
  • 深入理解Python协程:从基础到实战
    title:深入理解Python协程:从基础到实战date:2024/4/2716:48:43updated:2024/4/2716:48:43categories:后端开发tags:协程异步IO并发编程Pythonaiohttpasyncio网络爬虫第1章:协程基础1.1协程概念介绍协程(Coroutines)是一种特殊的软件构造,它允许程序在执......
  • EPAI手绘建模APP模型库
    (9) 库① 打开手绘建模模型集。 图 11 手绘建模模型集② 宫格显示所有创建和保存的模型,每个模型包括模型图片文件、模型文件名称、模型文件大小、修改日期。③ 在收藏的模型的图片左上角用☆标记。④ 点击搜索按钮,进入搜索;输入搜索关键字,显示所有符合条件的模型。......
  • 盒模型
    盒模型box:盒子,每个格元素在页面中都会生成一个矩形区域(盒子)行盒在页面中不换行,块盒独占一行盒子的组成部分内容content填充padding边框border外边距margin扩展box-size:盒子尺寸,宽高范围background-clip:背景覆盖范围word-break:断词规则,影响文字在什么位置被截......
  • 实验12-使用keras预训练模型完成猫狗识别
    版本python3.7tensorflow版本为tensorflow-gpu版本2.6运行结果:这里我用Gpu进行加速,训练一回9秒,如果不启用gpu,训练一回会很慢。  代码:#-*-codeing=utf-8-*-#@Time:2022/10/211:44#@Author:程浩#@File:猫狗识别.py#@Software:PyCharmimporttensorflow......
  • 笔记本1050ti跑autoformer模型,环境搭建过程
    ##1、选显卡对应得驱动程序https://www.nvidia.com/Download/index.aspxnotebook是笔记本,下载类型选sd。不更新驱动会报:RuntimeError:TheNVIDIAdriveronyoursystemistooold(foundversion8000).PleaseupdateyourGPUdriverbydownloadingandinstallinganew......
  • 笔记本1050ti运行DLinear模型遇到的问题
    1、windows没法运行shgitbash可以,但我需要在conda环境中,使用sh运行脚本,所以应该在安装conda后,先配环境变量,然后在gitbash窗口中执行condainitbash,就可以用在bash窗口中通过condaactivate进入conda环境了。2、运行sh,报错加载不到模块看报错最后一行上面的模块,pipuninsta......
  • 再次理解平均负载
    平均负载的含义单位时间内的平均活跃进程数,包括可运行状态和不可中断状态的进程。平均负载和CPU使用率的区别平均负载反映整体负载情况,CPU使用率只是CPU繁忙情况的统计。合理的平均负载范围理想情况是等于CPU个数,超过CPU个数表示系统过载。分析平均负载的方法观察1分钟、5......
  • 初中中考阅读理解难题一网打尽!句子结构深度解析+答案揭秘,助你轻松冲刺高分!-012
    PDF格式公众号回复关键字:ZKYDT012原文1Richardfoundthebirdintheforest,didn’the?解析1Richard,found发现了,thebird这只鸟,intheforest在森林里,didn’the?不是吗理查德在森林里发现了这只鸟,不是吗?2Hesawastrangebirdinabush.他在灌木丛......
  • 探索 DTD 在 XML 中的作用及解析:深入理解文档类型定义
    DTD是文档类型定义(DocumentTypeDefinition)的缩写。DTD定义了XML文档的结构以及合法的元素和属性。为什么使用DTD通过使用DTD,独立的团体可以就数据交换的标准DTD达成一致。应用程序可以使用DTD来验证XML数据的有效性。内部DTD声明如果DTD在XML文件内声......