浅谈盒子模型

前言：盒子模型主要应用在页面布局。规定页面中各个元素如何显示以及元素之间相互的位置关系
一、盒子模型中的属性
边框（border）、内容（content）、外边距（margin）、内边距（padding）
二、行内元素、块级元素对于盒模型的支持
1、行内元素对盒子模型中的部分属性支持
对边框、padding都支持。对margin-left、margin-right也能支持，而对margin-top、margin-bottom、宽高都不支持
行内元素可以当成是文本，可以对它设置行高。（行高只能给文本或行内元素使用。控制是里面的文本内容。行高包括文字高度、上边空白区域）
2、块级元素都能支持
三、内容部分
1、当盒模型中的内容溢出时：
在标准文档流中， 溢出内容是不会占空间位置，会与其他块的内容重合。特殊情况长单词（没有空格）默认情况下，浏览器不会自动换行。要让长单词内部换行，需要设置white-wrap :pre-wrap；
使用overflow：hidden（溢出部分被裁剪，内容不会再显示）。设置为scroll内容隐藏，用滚动条形式显示
2、文本内容溢出 text-overflow（css3中新增标签）
前提：必须和overflow属性一起使用才有效果
a: text-overflow:clip; 溢出部分被裁剪
b:text-overflow:ellipsis; 溢出部分用省略号显示 。这里要多加一个设置：white-wrap：nowrap;不换行

四、盒模型的外边距—— margin
注意：margin可以是负值进行微调，但是在实际应用上尽量少用负值。
不同情况取值情况：
1. 两个块级元素垂直分布时，它们之间的距离取决于第一块的margin-bottom值和第二个块级元素的margin-top值，谁的margin值大就取谁的margin值作为距离。
2、两个块级元素（或行内块元素或行内元素）横向浮动（不浮动）排列时，它们之间的距离是左右margin之和
3、 两个行内块级元素纵向排列时，上面元素 的margin-bottom与下面元素的margin-top之和

五、盒模型的内边距（元素边框与元素内容之间的区域）——padding
用法：用来调整内容在容器中的位置关系；调整子元素在父元素中的位置关系（padding属性必须添加到父元素上）；padding值是额外添加在元素原有的大小之上，想保证元素大小不变，徐聪元素宽高上减去添加到padding属性值

六、盒模型尺寸的计算
宽= 左右margin+左右border+左右padding+内容宽
高 =上下margin+上下border+上下padding+内容高