当前位置: 首页 > Web前端 > CSS

挖掘margin属性的内涵

时间:2023-03-30 14:17:37 CSS

1.边距合并问题块级元素的上下边距有时会合并或折叠成一个边距。捕获的重要信息只出现在块级元素中,不包括浮动元素和绝对定位元素。它只发生在当前文档在垂直于流向的方向上(由于默认文档流是水平流,合并的边距是垂直方向)会出现三种边距合并的基本情况1.相邻元素之间

第一行

第二行

p{margin:1em0;}第一行和第二行之间的间距还是1em,因为第一行的margin-bottom和margin-bottomofthesecondlinetopmerges2、父元素与其第一个或最后一个子元素之间,当父元素与其第一个子元素之间没有border、padding、inlinecontent或clearfloating时,margin-top两者的分隔相同当父元素和最后一个子元素之间没有border,innermargin,inlinecontent,height,min-height/max-height来分隔两者的margin-bottom,那么此时,两个外边距将被合并,并且ch的外边距ild元素会溢出到父元素之外(父元素的外边距为两者之和,子元素的外边距为0)。默认情况下,下面三个设置是等价的
3.空块级元素当块级元素不包含任何内容时,其边距之间没有边框、填充、内联内容、高度和最小高度-top和margin-bottom将两者分开,此时边距会合并/div>.father{overflow:hidden;}.son{margin:1em0;}此时.father所在的父
元素的高度只有1em,因为空的.son-top和margin-bottom的元素合并在一起。marginmerge的计算规则是positive和positive:取较大的值。正负值相加:取计算值。意义1.兄弟元素的边距合并使得图形信息的排版更加舒适自然,保证了元素之间的间距一致。原块布局3.自身边距合并的意义可以避免不小心留下或产生空标签影响排版和布局,防止上述边距合并的发生。1.防止合并margin-top(只满足一个条件)父元素设置为阻止格式化上下文元素(如overflow:hidden)父元素设置border-top值父元素设置padding-top值在父元素之间添加内联元素andfirstchildelementtoseparate2,preventmargin-bottomMergeparentelementsettoblockformattingcontextelementparentelementsetborder-bottomvalueparentelementsetpadding-bottomvalue在父元素和最后一个子元素之间添加内联元素以分隔父元素集高度、最小高度或最大高度3。防止合并空标签。设置垂直边框。设置垂直填充。添加内联元素。设置高度或最小高度。以上条件的组合会产生更复杂的边距,即使某个外边距为0,这些规则仍然适用,所以即使父元素的边距为0,仍然会出现第二种情况。如果合并涉及的边距包含负值,则合并后的边距等于最大边距和最小边距。边距之和如果合并涉及的边距全部为负,则合并后的边距等于最小边距的值2.深入理解margin:automargin:auto填充规则如果一侧是fixed,一侧是auto,那么auto就是剩余空间的大小。此时.son的左边距为20px,右边距为80px。如果两边都是auto,剩余的空间会平分。文本左对齐控件居中右对齐呼应了3.为什么容器的高度是固定的,元素的高度是固定的,margin:auto不能垂直居中。默认文档流是水平的。解决方案是使用writing-mode来改变文档流的方向。:vertical-lr;}.son{height:100px;margin:auto;}此时.son是垂直居中,但是水平方向不能自动居中margin:autocenterofabsolutepositioningelement.father{width:300像素;背景色:#999;高度:200px;职位:相对;}.son{宽度:200px;背景色:#ccc;高度:100px;左:0;margin:auto;}IE8及以上浏览器才支持,但它是块级元素最好的垂直居中对齐方式