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 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
随机推荐
- PAT天梯赛 L1-049 天梯赛座位分配
题目链接:点击打开链接 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i 所学校有 M[i] ...
- spring读取配置文件,且获取bean实例
import org.springframework.beans.factory.BeanFactory;import org.springframework.beans.factory.xml.Xm ...
- Python自动化开发学习20-Django的form组件
武沛齐老师的Django的FORM组件:http://www.cnblogs.com/wupeiqi/articles/6144178.html 转自:http://blog.51cto.com/st ...
- Vscode 配置 maven debug
# maven.cmd 上方设置此变量 set MAVEN_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=y,address= ...
- Codeforces Round #520 (Div. 2) B math(素数因子的应用)
题意: 给出一个n ; 有两个操作: 1,mul A , n=n*A : 2,sqrt() , n=sqrt(n) 开更出来必须是整数 : 求出经过这些操作后得出的最小 n , 和 ...
- BestCoder Round #66 1002
GTW likes gt Accepts: 75 Submissions: 261 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 1 ...
- 及时从数据库中取得数据填放进Form表单的多选框中
#写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...
- 线程池ThreadPoolExecutor分析: 线程池是什么时候创建线程的,队列中的任务是什么时候取出来的?
带着几个问题进入源码分析: 1. 线程池是什么时候创建线程的? 2. 任务runnable task是先放到core到maxThread之间的线程,还是先放到队列? 3. 队列中的任务是什么时候取出来 ...
- 懒汉式单例要加volatile吗
private static volatile Something instance = null; public static Something getInstance() { if (insta ...
- Kafka Intro - Configuration
#Notes: /opt/kafka/config/zookeeper.properties sample # the directory where the snapshot is stored.d ...