例子:
.box {
width: 200px;
border: 10px solid #99c;
padding: 15px;
margin: 20px;
}
<p class="box"> 内容</p>
正如你能看到的,一个盒子由四个独立部分组成,最外面的是边界(margin)总是透明的第二部分是边框(border),边框可以有不同的样式。第三部分是补丁(padding),补丁用来定义内容区域与边框(border)之间的空白。第四部分是内容区域。
背景(Background)就是在边框以内的区域,包括补丁(padding)和内容区域。
当你使用CSS定义你的盒子的width和height时,你定义的并不是内容区域、补丁、边框和边界所占的总区域。实际上你定义的是内容区域的width和height
。
为了计算盒子所占的区域必须加上padding、border和margin。所以,
盒子的总长度为;
左margin +左 border + 左padding+ width +右padding +右 border + 右margin
即上面盒子的总长度为:20px+10px+15px+200px+15px+10px+20px=390px.这意味着上面盒子占390px的水平空间。
盒子的总高度为:
上margin +上border + 上padding+ height +下padding + 下border + 下margin
即上面盒子的总高度为:20px+10px+15px+200px+15px+10px+20px=390px.这意味着上面盒子占390px的垂直空间。
分享到:
相关推荐
CSS布局案例.pdf CSS网页布局基础.pdf css网页布局案例.rar css背景与列表ppt.pdf css背景和列表源代码.rar float.pdf float源码.rar font属性简写 (1).pdf font属性简写.pdf HTML标签默认样式汇总.pdf position定位...
Day05-CSS布局-盒子模型
迅速入门弹性盒子模型:一个使用Flex布局的网页(包括HTML和CSS),可以作为网页的模板,也可以用来学习弹性盒子模型在实例中的具体应用方式。
10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的...
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种...
CSS盒子模式(DIV布局快速入门),关于前台的设计必须的。
css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、相对定位、固定定位,相对定位与绝对定位组合; css弹性盒模型:flex属性,横轴排列,纵轴排列,flex占比; 行内元素水平居中设置; 定...
页面布局的W3C盒子模型.ppt
专门讲CSS盒子模型布局的,对网页制作技术的提高有很大的帮助
轻松搞定网页设计html+css+javascript ...3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom编程详解、正则表达式)
一个值得学习的css布局设计,盒子模型示例,可换肤,实现简单好看,很不错的参考.
盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型!
前端基础知识的思维导图和思维导图软件
理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写...
保证你能彻底明白css的盒子模型,我就看完了这个讲解就彻底的可以css+div布局了,千万不要错过
本书详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然地得出结论,使...
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使它们的大小是未知或者动态的,这里简称Flex。 CSS3引入...
10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 ...