原创CSS网页布局[九]外边距折叠与预防
盒模型复习：
CSS盒模型是定义元素周围的间隔，尺寸，外边距，边框以及文本内容和边框之间内边距的一组属性的集合。
从内至外：
元素宽度和高度，内边距，边框，外边距。
width,height
padding
border
margin – 外边距，可以单独设置盒模型上，右，下，左四条边的外边距。
⒈带有4个值的margin属性,单独设置盒模型的各个外边距.
·margin-top
·margin-right
·margin-bottom
·margin-left
⒉带有三个值的margin属性.[上下不同,左右相同.]
·margin:15px 5px 10px; 上,右和左,下.
⒊带有两个值的margin属性.[上下相同,左右相同]
·margin:10px 5px;上下,右左.
⒋带有一个值的margin属性.
·margin:10px;
外边距的特殊性：外边距折叠性.[内边距,边框都没有此特性]
外边距折叠是如何发生的：
在CSS中,当一个元素的上或下外边距正好和另一个元素的上或下外边距直接接触时就会产生外边距折叠。[左右外边距接触不会发生外边距折叠]
外边距折叠表现：
⒈两个盒子的外边距中更小的那个减少为零。
⒉如果两个元素的外边距具有相同的长度，那么其中一个被减小为零。
如图：
在某些浏览器中,外边距折叠不仅发生在相邻元素之间的上下外边距接触.它还会表现在父子元素之间.
外边距折叠不仅发生在两个元素不嵌套的上下外边距接触时.
在一个元素在另一个元素包含在里面时也会发生外边距折叠行为。
[总结，两个外边距在什么地方接触是无关紧要的，如果两个外边距接触，那么即使是另一个元素里面的元素也会和它的父元素发生外边距折叠。]
当一个子元素的外边距接触到了父元素的外边距，那么就会发生外边距折叠.
就和相邻同属元素的情况一样，比较大的外边距会被应用。
这个外边距总是会应用在父元素上，子元素的外边距总是会被折叠。
如图：
总结下：
[相邻]当2个元素的上或下外边距直接接触时,就会发生外边距折叠行为。[外边距折叠的发生条件]
[包含] 当2个元素的上或下外边距直接接触时,就会发生外边距折叠行为。[外边距折叠的发生条件]
[表现一]当2个元素不包含时[相邻],外边距折叠总是较大的胜利,失败的则取消。相同的外边距折叠则取其中任意一个。
[表现二]当2个元素包含时,依旧是较大的外边距胜利。但是胜利的外边距总是应用到父元素上，子元素的外边距总是被折叠。相同的外边距折叠则取其中任意一个。
浏览器识别CSS的不同
我们知道,浏览器的不同品牌.有微软出品的IE浏览器.还有其他的很多种,比如火狐.所以,在理解CSS规则上,有各自的理解方式,因为这种差异性,导致同一份CSS文档可能出现不同的或者相同的表现.
上述资料的发散思维：
不同的浏览器只要在市场存在,没有被淘汰或者消失在市场上.那么就占据一定的市场份额,简单的说就是其拥有一定的用户群体.我们制作网站,目的是面向所有用户,无论它使用什么品牌的浏览器.我们都希望这些用户可以获得相同的用户体验.
所以,我们制作网页的时候,就要考虑到主流浏览器的差异性,了解这些可以帮助我们制作出面向“最多”用户的网页.
了解了上述的概念后，我们来看看如何防止外边距折叠。
我们知道外边距折叠的原因是两个元素的外边距直接接触了。
对于相邻的元素,我们可以在2个拥有上下外边距的元素之间加入一个没有上下外边距的元素来狙断他们之间的外边距直接接触.
对于父子元素的外边距折叠，我们可以为父元素设置内边距和边框。狙断外边距直接接触.
前提：就是必须包含文档类型和命名空间.
<!DOCTYPE html PUBLIC "-//W
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"
lang="zh-CN">
[Qurik呈现模式]
使用margin属性对齐元素的方法：
auto 的含义是自动.
margin:10px auto 10px 0; 左对齐
margin:10px auto; 居中对齐
margin:10px 0 10px auto; 右对齐
文本流的概念
默认的是竖向排列.默认的文本流/
我们制作网站,当然要打破这个默认的文本流.[浮动属性…下下节课]
仿站咨询扫二维码
仿站教程推荐
- 相关链接：
- 教程说明：
原创CSS网页布局[九]外边距折叠与预防
。
