CSS盒子模型(Box Model)

  所谓的盒子模型是将html元素看成一个盒子。在日常生活中,盒子是最常见到的物品。比如一盒月饼,有外包装盒,里面是一般铁盒,再里面的是朔料或者是纸类包装,一盒大包装里有好几个小包装。一样的道理,在html中每个标签看成一个有型的盒子,标签之间的可以看成盒子与盒子的关系。

  盒子模型组成:内容(content):元素要呈现的东西

         填充(padding):内容和边框之间的距离

         边框(border)

         外边距(margin):盒子之间的距离

  width和height属性是内容(content)的宽度和高度属性,并不是元素的宽度和高度。

  元素的宽度=左外边距+左边框+左填充+width+右填充+右边框+右外边距

  元素的高度=上外边距+上边框+上填充+height+下填充+下边框+下外边距

  由上面的公式可以推断出可以分别设置每个边的属性(按顺时针方向)。

  例如:padding:10px;(等同于设置为padding:10px 10px 10px 10px;)

  padding:10px 20px;(等同于:padding:10px 20px 10px 20px;)

  padding:10px 15px 20px;(等同于:padding:10px 15px 20px 15px;)

  其他margin和border同理。

时间: 09-12

CSS盒子模型(Box Model)的相关文章

盒子模型(Box Model)

盒子模型(Box Model) ■ 盒子模型--概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属性. 细节说明: ?html 元素都可以看成一个盒子 ?盒子模型的参照物不一样,则使用的 css 属性不一样.比如:从 div1 的角度看,是 margin-right,从 div2 看,则是 margin-left. ?如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可

详细认识一下CSS盒子模型

定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域(例如文本,图像等)"."内容周围填充的区域"."边框" 和"边界区域"的方式. PS: 为了方便区分概念,通常也会把"填充"叫做"内边距",把"边界"叫做"外边距&qu

(5)css盒子模型

CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin), CSS盒子模型都具备这些属性. ***属性我们可以把它转移到我们日常生活中的盒子(箱子)来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型. 盒子模型是css控制页面是一个很重要的概念. 所有网页的页面中的元素都可以看成是一个盒子,占据着一定的页面空间. 一

深入理解CSS盒子模型

前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方面也给大家参考,让更多的人受益. 这篇文章适合初级web设计朋友,让你对盒子模型有更近一步的理解.但是在阅读这篇文

我给女朋友讲编程CSS系列(4) CSS盒子模型

什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school.com.cn/css/css_boxmodel.asp 接着把[CSS内边距],[CSS外边距],[CSS外边距合并]看看. 小结: (1)    一般,在样式表中,都会先把所有元素的外边距和内边距设置为0 * {   margin: 0;  padding: 0;  } * 是通配符,就是一个符

css 盒子模型理解

盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西:而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框就是盒子本身了:至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定

【CSS】Css盒子模型

盒子模型解释 元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式.盒子模型示意图如下: 把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width).盒子的高度(height).盒子的边框(border).盒子内的内容和边框之间的间距(padding).盒子与盒子之间的间距(margin). 设置宽高 width:200px; /* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */ height:200px;

2015.12.1CSS3转换、过渡、动画效果及css盒子模型

css3转换 1.元素偏移 tranlate 通过translate()的方法元素从当前位置移动到给定的left (x坐标)和top(y坐标)位置参数 代码如下: div{ transform:translate(50px,100px): -ms-transform:translate(50px,100px): /*IE9*/ -webkit-transform:translate(50px,100px): /*谷歌苹果*/ -o-transform:translate(50px,100px):

CSS盒子模型的理解

标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.那么内容(CONTENT)就是盒子里装的东西:而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框 (BORDER)就是盒子本身了:至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要