《CSS+DIV网页样式与布局从入门到精通》第九章学习笔记（一）盒模型

知识总结：

1.如果给某元素加上背景色或者背景图片，那么该元素的背景色或者背景图片也将出现在内边距之中

2.如果既给元素设置背景颜色又设置背景图片，那么背景图片将在背景色的上一层

3.如果元素不以块状显示，定义盒模型属性将不会直观的呈现（貌似是左右的margin,padding等都能正常显示并作用于其他相邻元素，但是上下的显示就会出问题，width和height的设置会失效），当为行内元素定义外边距时，读者只能看到左右外边距对于版式的影响

4.margin，padding的设置是从顶部开始，按照顺时针方向分别定义的

5.用户 不能使用外边距来调节行内元素与其他对象的位置关系，但是可以调节行内元素之间的水平距离（书上是这样写的，但是我自己的理解还是原来的知识，行内元素的内外编剧什么的，只有左右方向是可以正常呈现的，上下方向不能正确显示），对于块状元素来说，可以自由的使用外边距来调节网页版式和元素之间的距离。

6.一旦被定义为浮动显示，就拥有了完整的盒模型结构。当为浮动元素定义外边距后，所呈现的效果会很复杂，与我们设想会大不相同。这回存在很大的不确定性，因为不同浏览器对此的解析标准不同。也就是说在浮动元素中使用外边距可能会引发一些问题。

7.绝对定位元素依然拥有外边距，但是考虑到外边距在绝对定位中没有实际作用，我们完全可以使用元素边框等来定位，所以可以忽略该属性。

8.内边距

1）当元素没有定义边框时，读者可以把 内边距当做外边距来使用，用来调节元素与其他元素之间的距离。而且内边框的一大好处是不用担心出现重叠问题。

2）设置背景色或者背景图片的时候，内边距的区域是可以显示出来的，外边框的部分是没法显示出来的

3）行内元素的内边距能够影响元素边框的大小，而外边框不存在这样的问题。

9.任何元素都可以定义边框。当元素 各边边框定义为不同的颜色时，边角会以平分来划分颜色的分布，利用这个特殊的效果，可以设计出不同形状的样式效果。

10.宽和高，这里要区分 三个概念：

1）元素的总宽度和总高度:width+padding+border+margin

2）元素的实际高度和实际宽度:width+padding+border

3）元素的宽度和高度：width/height

   说明: 上面的三个概念也不能这么生硬的理解，比如说当元素没有边框的时候，元素的实际宽高就是width/height；

在IE5.5及以下的版本，盒模型的解析和标准浏览器有一些差异，它认为width是上面我们说的实际高度和宽度，所以这里有一个浏览器兼容性问题需要处理，这本书 上给出的解决方案是使用IE5.5不能识别的voice-family(但是我自己测试发现这种写法没有效果)下面是这段兼容性的样式的代码

   

div{
            height: 180px;              /*IE5.5及以下版本中解析的高度*/
            width: 280px;               /*IE5.5及以下版本中解析的宽度*/
            border: 20px solid red;     /*边框*/
            margin: 20px;               /*外边距*/
            padding: 20px;              /*内边距*/
            voice-family: "\"}\"";      /*设置播放的声音*/
            voice-family: inherit;      /*设置播放的声音*/
            width: 200px;               /*非IE5.5及以下版本中解析的宽度*/
            height: 100px;              /*非IE5.5及以下版本中解析的高度*/
        }

说明：这是我自己总结的清华大学出版社《CSS+DIV网页样式与布局从入门到精通》第九章第一节盒模型的学习笔记，就是按照顺序写的，没有太多条理，如果要看的话建议对照着这本书看，都是一些小细节，也没什么特深奥的东西，看一遍，记下来就好了。还有这一节的代码我都自己测试过，有的没有效果，但是只是我测试这没有效果，也有可能是我自己的软件或者操作系统的问题，仅代表个人观点，建议如果阅读的话也在自己的计算机上测试一下。