本文详细解析了CSS盒模型的各个组成部分，如width、height、padding、border和margin，并探讨了IE盒模型的特点。此外，还介绍了外边距叠加现象及如何避免，以及CSS中的三种定位机制：普通流、浮动流和绝对定位流。文中还提到了行内元素与块级元素的区别和转换方法。
盒模型
widht height padding border margin
IE和盒模型
对于ie6的盒模型中，浏览器的width属性不是内容的宽度，而是内容加上内边距加上边框的总和。
没有特殊要求的话，不要给元素添加指定宽度的内边距，而尝试将内边距或者外边距添加到元素的父元素或者子元素上面去。
外边距叠加
当两个或者更多的垂直外边距相遇的时候，他们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度的较大者。
当一个元素包含在另外一个元素中，他们顶部和底部边距也会发生叠加。
例如一个空元素，他有外边距，但是没有边框或者内边距，在这种情况下面，顶外边距与底外边距就会碰到一起去，发生了叠加。
空元素中已经叠加的外边距与另外一个空元素的外边距发生叠加。
ps: 针对于行内框，浮动框，绝对定位框的外边距是不好叠加的。
定位概念
块级元素
行内元素
display block， display none；
在css中存在三种定位机制：普通流，浮动流，绝对定位流。
对于行内框，可以使用水平内边距，边框，外边距，但是垂直行内边距，边框，外边距不影响行内框的高度。
在行内框中设置显示的高和宽是没有影响的。
由一行形成的水平框称之为行框
设置行高可以增加框的高度，因此修改行内框的唯一方法就是修改行高或者水平边框，内边距，外边距。
在css2.1中，可以将原始设置为display:inline-block
设置了这样之后，可以是得原始像行内元素一样水平的排列，但是，框的内容依旧符合块级的行为，例如可以显示的设置宽度和高度，垂直外边框和内边距。
匿名块框
相对定位
position ：relative
如果一个元素进行了相对定位，他将出现在他所在的位置上，然后可以通过设置垂直或者水平位置，让这个元素相对的移动起来。
ps: 相对于本来应该存在位置上面。
pps: 在使用相对位置的时候，无论是否移动了，元素仍然占据原来的空间。因此移动元素会导致他覆盖其他框。
绝对定位“：
相对定位实际上被看做普通定位模型的一部分，因为元素的位置相对于他在的普通流中的位置，
而对于绝对定位，使得元素的位置与文档无关，因此不占据空间。
ps: 绝对定位的位置是相对于距离他最近的那个已经定位好的祖先的元素确定的。
如果元素没有已经定位好的祖先，那么他的位置就是相对于初始包含块的，根据用户代理的不同，初始包含块可能是画布也可能是html
对于绝对定位，可以从她的包含块向上，下，左，右移动。
可以结合 z-index 设置文档叠加顺序。
ps: bug：：：：：
浮动
浮动会导致元素脱离文档流。
要想阻止浮动，可以对这些行框的元素应用clear属性。left,right,both ,none； 表示那一边不应该挨着浮动框。
对于清除浮动
方法1
div{
clear:both;
}方法二
overflow属性定义在包含的内容对于指定的尺寸太大的情况下回怎么办，默认情况下面，内容会溢出。进入到相邻的空间去。
但是，如果使用hidden 或者 auto的overflow会有一个副作用，会自动清除包含任何浮动元素。
因此这是一种有用的元素清理方法，不需要添加额外标记。但是这种方式不适合所有的场景，因为设置框的overflow属性会影响他的表现。这种方式会造成产生滚动轴或者截断内容。
在css的使用，结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容。
因为不希望新内容占据垂直空间或者在页面上面显示，所以需要将height设置为0，将visitibility 设置为hidden。因为被清的元素在他们的顶外边距上面添加了内容，所以生成了内容需要将他的display属性设置为block。
.clearfix:after{
content:'';
height:0;
visibility:hidden;
disply:block;
clear:both;
}
.clearfix{
display:inline-block;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
