所谓框模型,例如div标签,你就可以直接把它理解成一个相框。

这个相框里面的相片有高度和宽度,框本身也有一定的宽度。相框和别的相框之间,还有一定的边距。

div设置常见属性

border:边框

padding:内边距

margin:外边距

  1. 图上的element,就是相片。
  2. padding就是相片与相框的间距。
  3. border就是相框本身的宽度。
  4. margin就是这个相框和别的相框之间的间距。


注意看此图,元素本身的宽度是70px,加上左右两边各5px的内边距,再加上左右两边各10px的外边距。

这个div的实际宽度就达到100px了。

这一点要注意,设置div的宽度,其实只设置了里面元素的宽度。

div的实际的宽度=宽度+内边距+边框+外边距。
由于外边距是看不见的空白,所以
div的可见宽度=宽度+内边距+边框。

同理,div的高度,也是一样的。

下面我们还是用代码来演示。

  1. <html>
  2. <head>
  3. <style>
  4. div {
  5. /* 设置宽度为300px */
  6. width:300px;
  7. /* 设置高度为300px */
  8. height:300px;
  9. /* 设置边框为1px的线条 */
  10. border:1px solid;
  11. /* 设置内边距为5px */
  12. padding:5px;
  13. /* 设置外边距为10px*/
  14. margin: 10px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div></div>
  20. </body>
  21. </html>

那么请问,此时的div可见大小是多少呢?

312px*312px

此时div的实际大小是多少?

332px*332px

您算对了吗?

CSS的框模型(div)与边距(margin、padding)的更多相关文章

  1. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  2. css的框模型速查

    在css中,每个元素被视为一个框. 每个框具有3个属性: border 框的边框 margin 框与相邻框之间的距离 padding 框内容和边框之间的距离 对于margin存在一种特例:当元素底部页 ...

  3. CSS学习笔记之框模型

    1.概述 为了更好的处理 元素内容.内边距.边框 和 外边距 之间的关系,CSS 定义了框模型如下: 内边距.边框 和 外边距 的默认值都是零,可以通过设置元素的 padding.border 和 m ...

  4. css总结9:内边距(padding)和外边距(margin)

    1 css总结9:内边距和外边距 通过css总结8:盒子模型可知:内边距(padding),外边距(margin).可以影响盒子在浏览器的位置. 1.1 padding使用:{padding:上 右 ...

  5. 纯CSS气泡框实现方法探究

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

  6. css(字体,文本,边距,边框,阴影,背景,渐变,多重背景,列表)

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  7. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  8. CSS 框模型

    CSS 框模型 CSS 框模型概述 CSS 内边距 CSS 边框 CSS 外边距 CSS 外边距合并 一,CSS 框模型 (Box Model) 规定元素框处理元素内容.内边距.边框 和 外边距 的方 ...

  9. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

随机推荐

  1. node mysql问题:Client does not support authentication protocol requested by server; consider upgrading MySQL client!

    node后台 mysql处理模块(版本:2.16.0) 执行connect方法时报错: Client does not support authentication protocol requeste ...

  2. [转载]什么情况下应该设置 cudnn.benchmark = True?

    总的来说,大部分情况下,设置这个 flag 可以让内置的 cuDNN 的 auto-tuner 自动寻找最适合当前配置的高效算法,来达到优化运行效率的问题. 一般来讲,应该遵循以下准则: 如果网络的输 ...

  3. php 安装扩展库

    liunx系统 1. /usr/local/php/bin/php-config php 配置文件位置 [ php-config是一个脚本文件,用于获取所安装的php配置的信息 ] 在编译扩展时,如果 ...

  4. [USACO19FEB]Moorio Kart(DP)

    Luogu5243 题解 即O(N^2)暴力统计出每个森林的路径,从ctgn个集合中各选出一个数,使得长度>=Y的方案数. 用背包统计.具体实现: \(dp[i+j][0]\leftarrow ...

  5. echarts分段(一段一种颜色)显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Docker 使用samba 共享文件

    Docker 使用samba 共享文件   docker run -it --name samba \ -p 139:139 -p 445:445 \ -v /home/develop/code/de ...

  7. json转译的问题

    今天遇到一个之前没遇到的情况 这边调用接口的时候,一串json数据我直接解析成php的时候,太长导致我在使用 $json = json_encode($list);转译成的时候,里面有一个数据是时间戳 ...

  8. NPOI2.0导出excel之添加样式、边框和表头

    //优化后导出excel public System.IO.Stream ExcelStream(string search) // { var orderBusiniss = Containers. ...

  9. CopyOnWriteArrayList的增删改查实现原理

    https://www.cnblogs.com/simple-focus/p/7439919.html 篇文章的目的如下: 了解一下ArrayList和CopyOnWriteArrayList的增删改 ...

  10. python django bootstrap_导入 201901

    参考 http://www.liujiangblog.com/course/django/124 AdminLTE-2.4.5 http://www.liujiangblog.com/course/d ...