发表于: 2018-12-11 21:20:25

1 761


今天完成的事:

什么是外边距重叠?

    外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界,边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。只有外边距才可以是负值,内边距不允许为负值。

2.外边距重叠的图示:

    当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生合并。

   当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的顶和底边界也发生合并:

    假设有一个空元素,它有边界,但是没有边框或填充。在这种情况下,顶边界与底边界就碰到了一起,它们会发生叠加:

3.外边距重叠的作用

    当我们上下排列一系列规则的块级元素时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离,这样各处距离就一致了。

4.外边距不重叠的情况。

    水平margin永远不会重合

    设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠

    设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,和子元素之间也不重叠

    设置了display:inline-block的元素,垂直margin不会重叠,和子元素之间也不重叠

    根元素(如html)与body的margin不会重叠

5.防止外边距重叠的方法。

    元素绝对定位postion:absolute;一般用在内层元素

    内层元素 加float:left;或display:inline-block;

    外层元素用padding增加边距

    外层元素设置overflow:hidden;

    内层元素透明边框border:1px solid transparent;

明天计划的事:

继续任务

遇到的困难:

用table的colspan属性的时候总是出现不能按照设定的值显示,总是错位或者没有反应,后面通过实验发现只有设定一个参照物才能达到设定值的效果,虽然实现了效果但是我觉得肯定还有能好的方法,还没有发现、、、、

用ul和li标签,配合bootstrap用,添加了ul,li前面的小圆点总是在padding外,抹掉ul过后小圆点又紧贴文字,但是li不是要包含在ul里面吗,我去掉ul过后依然能用。

收获:

综上所述


返回列表 返回列表
评论

    分享到