所谓框模型，例如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;
  8. /* 设置高度为300px */
  9. height:300px;
  11. /* 设置边框为1px的线条 */
  12. border:1px solid;
  14. /* 设置内边距为5px */
  15. padding:5px;
  17. /* 设置外边距为10px*/
  18. margin: 10px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div></div>
  24. </body>
  25. </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. 【bzoj3813】: 奇数国 数论-线段树-欧拉函数

    [bzoj3813]: 奇数国 题意:给定一个序列,每个元素可以分解为最小的60个素数的形式.(x=p1^k1*p2^k2*......p60^k60)(p1=2,p2=3,…,p60=281) 支持 ...

  2. 智能合约安全事故回顾（3）-DOS漏洞导致的KotET事件

    现实世界中的网络都是有带宽限制的,想象一下,一个访问量稳定的网站,突然有人利用某种方式爆发式的将网站的访问量提升,这个时候系统会作何反应?如果系统没有合理的防DOS攻击的方式,这种时候往往会造成服务器 ...

  3. Html再学

    1.  Html是网页的载体.内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字.图片.视频等. 2.  CSS样式是展现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边 ...

  4. Cardinality (基数)

    名词 Cardinality:    优化器在计算成本的时候,需要从统计信息中取得数据,然后去估计每一步操作所涉及的行数,叫做Cardinality.    比如,一张表T有1000行数据,列COL1 ...

  5. ubuntu14.04 搭建samba

        1.安装软件      sudo apt-get remove libwbclient0      sudo apt-get remove samba-common      sudo apt ...

  6. 【转】C#中HttpWebRequest的GetRequestStream执行的效率太低，甚至偶尔死掉

    http://www.cnblogs.com/summer_adai/archive/2013/04/26/3045261.html

  7. kuangbin专题十六 KMP&&扩展KMP HDU3068 最长回文

    给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 回文就是正反读都是一样的字符串,如aba, abba等 Input输入有多组case,不超过120组,每组输入为 ...

  8. 整合feign过程中出现问题:

    一:编译器报错 这个地方是由于没有被spring管理,编译器报错,可以选择加上@comoponent这个注解 也可以选择不加,启动程序是不会报错的. 二 报错为空: org.springframewo ...

  9. 微信小程序 WebSocket 使用非 443 端口连接

    前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在 ...

  10. 江西财经大学第一届程序设计竞赛 E

    链接:https://www.nowcoder.com/acm/contest/115/E来源:牛客网 题目描述 当你的好友给你发来一条消息,你的消息列表上就会置顶显示该好友的名字以及该好友发给你的消 ...