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