CSS的框模型(div)与边距（margin、padding）
所谓框模型，例如div标签，你就可以直接把它理解成一个相框。
这个相框里面的相片有高度和宽度，框本身也有一定的宽度。相框和别的相框之间，还有一定的边距。
div设置常见属性
border：边框
padding：内边距
margin：外边距
- 图上的element，就是相片。
- padding就是相片与相框的间距。
- border就是相框本身的宽度。
- margin就是这个相框和别的相框之间的间距。
注意看此图，元素本身的宽度是70px，加上左右两边各5px的内边距，再加上左右两边各10px的外边距。
这个div的实际宽度就达到100px了。
这一点要注意，设置div的宽度，其实只设置了里面元素的宽度。
div的实际的宽度=宽度+内边距+边框+外边距。
由于外边距是看不见的空白，所以
div的可见宽度=宽度+内边距+边框。
同理，div的高度，也是一样的。
下面我们还是用代码来演示。
<html><head><style>div {/* 设置宽度为300px */width:300px;/* 设置高度为300px */height:300px;/* 设置边框为1px的线条 */border:1px solid;/* 设置内边距为5px */padding:5px;/* 设置外边距为10px*/margin: 10px;}</style></head><body><div></div></body></html>
那么请问，此时的div可见大小是多少呢？
312px*312px
此时div的实际大小是多少？
332px*332px
您算对了吗？
CSS的框模型(div)与边距（margin、padding）的更多相关文章
- CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- css的框模型速查
在css中,每个元素被视为一个框. 每个框具有3个属性: border 框的边框 margin 框与相邻框之间的距离 padding 框内容和边框之间的距离 对于margin存在一种特例:当元素底部页 ...
- CSS学习笔记之框模型
1.概述 为了更好的处理 元素内容.内边距.边框 和 外边距 之间的关系,CSS 定义了框模型如下: 内边距.边框 和 外边距 的默认值都是零,可以通过设置元素的 padding.border 和 m ...
- css总结9：内边距（padding）和外边距（margin）
1 css总结9:内边距和外边距 通过css总结8:盒子模型可知:内边距(padding),外边距(margin).可以影响盒子在浏览器的位置. 1.1 padding使用:{padding:上 右 ...
- 纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
- css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）
font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...
- CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...
- CSS 框模型
CSS 框模型 CSS 框模型概述 CSS 内边距 CSS 边框 CSS 外边距 CSS 外边距合并 一,CSS 框模型 (Box Model) 规定元素框处理元素内容.内边距.边框 和 外边距 的方 ...
- CSS 框模型( Box module )
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
随机推荐
- SSH—网上商城之商品图片文件上传
前言 网上商城中的淘宝图片要显示在页面的前提是图片应该已经在数据库里面,那么怎么实现图片的上传功能呢,这就是今天要说的主题. 内容 需求: 商城后台需要添加图片文件,用来图片显示 解决方式: Stru ...
- 微信Dat文件解码
最近在整理磁盘文件,因为经过一段时间的蹂躏后,磁盘实在是太多东西了,不整理一下,简直对不住我的SSD好嘛.偶然发现磁盘中某公司的文件夹占用空间简直不能再大,那可是我的C盘啊,合计才119GB的SSD空 ...
- mac os x忘记了root密码怎么办，忘记登录密码（普通帐号密码）也是一样的
有时候我们给mac设置了root密码,一段时间不用,却忘记了密码,怎么办?下面的办法帮你解决: 步骤1:先关闭你的mac系统 步骤2:开机,按住Command和s两个按键不松手直到出现下面的界面: 步 ...
- Gradle 引入本地定制 jar 包
第 1 步:创建文件夹,拷贝 jar 包 在自己的 Gradle 项目里建立一个名为 “libs” (这个名字可以自己定义,不一定非要叫这个名字)的文件夹,把自己本地的 jar 包拷贝到这个文件夹中. ...
- day32 线程
1. 线程是什么,有了进程为什么还要线程 进程有很多优点,它提供了多道编程,让我们感觉我们每个人都拥有自己的CPU和其他资源,可以提高计算机的利用率.很多人就不理解了,既然进程这么优秀,为什么 ...
- day27 粘包及粘包的解决方案
1. 粘包现象 先了解一个词MTU MTU是Maximum Transmission Unit的缩写.意思是网络上传送的最大数据包.MTU的单位是字节. 大部分网络设备的MTU都是1500个字节, ...
- esper（2）-事件类型
1.pojo package com.ebc.eventtype.pojo.pojo1; import cn.hutool.core.collection.CollUtil; import com.e ...
- gulp不压缩打包layui
从网上下载的layui都是压缩包,如何打包在一个文件且不压缩呢?如下方法: 1.https://gitee.com/sentsin/layui下载源码(本文的为2.4.5版本) 2.安装nodejs( ...
- FCN用卷积层代替FC层原因（转）
分类任务 CNN对于常见的分类任务,基本是一个鲁棒且有效的方法.例如,做物体分类的话,入门级别的做法就是利用caffe提供的alexnet的模型,然后把输出的全连接层稍稍修改称为自己想要的类别数,然后 ...
- apply,call,bind
/*apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向): 如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是 ...