这些属性我们可以用日常生活中的常见事物——盒子(箱子)作一个比喻来理解,所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
结构:
1、内容(content),指的就是装的东西。
2、填充(padding),指的是防止重要的东西损坏而添加的泡沫或者其它抗震的辅助材料。
3、边框(border),指的就是盒子本身。
4、边界(margin),指的盒子摆放的时候的不能全部堆在一起,要留一定空隙、空间保持通风,同时也为了方便取出。
在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的,填充只有宽度属性,每个HTML标记都可看作一个盒子。
---以上内容摘至于百度全科
一、盒子模式概念
1、生活中的盒子
2、盒子模式(Box Model)
在网页布局中,为了能够使纷繁复杂的各个部分合理地进行组织,通过研究,总结出了一套完整的、行之有效的原则和规范,这就是“盒子模型”的由来。
在CSS中,一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成:
- 内容(content):对应盒内物品。
- 边框(border):对应包装盒的纸壳,具有厚度。
- 填充(padding):位于边框内部,是内容与边框的距离,对应包装盒的填充部分。
- 边界(margin):位于边框外部,是边框外面周围的间隙,对应纸壳外围间隙。
二、盒子模式属性
1、内容(content)
2、填充(padding)
3、边框(border)
注:
border-style--边框的样式:
- solid--实线边框
- dashed--虚线边框
- double--双线边框
- groove--根据 border-color 的值画3D凹槽
- ridge--根据 border-color 的值画3D凸槽
- inset--根据 border-color 的值画3D凹边
- outset--根据 border-color 的值画3D凸边
4、边界
用于控制元素之间的距离,会占据空间。
可设置盒子模型上、右、下、左4个方向的外边距值;margin属性的值可以为0,即无外边距。
注:body本身是个盒子,默认情况下,有若干像素填充、边界。
由于不同浏览器的内外边距不同,所以统一使用body,div{padding: 0;margin: 0;}清除默认的内外边距。不建议使用*{padding: 0;margin: 0;}
5、盒子模式的总尺寸
盒子模式的总尺寸=margin+border-width+padding+content(宽度/高度)
元素的尺寸=border-width+padding+content(宽度/高度)
如下:
#div1 {
width: 100px;
height: 100px;
padding: 70px;
border: 70px solid red;
margin: 40px;
background-color: blue;
color: white;
text-align: center;
}
div的尺寸=border-left + padding-left + content + padding-right + border-right
= 70 + 70 + 100 + 70 + 70 = 380px