-
依旧是margin重叠问题<br> 因为div是fixed，所以脱离标准文档流。X元素设置了上边距，body距离html也有一个上边距，但是body没有border,padding属性，所以由于margin有垂直外边局合并问题，body的上边距也变为15px，div会紧贴body上边。所以，div与浏览器上边界相距15px。 在普通文档流中，当垂直方向上的两个外边距相遇时，会发生外边距合并，最后的外边距取两个外边距较高的值。这种合并现象发生在普通文档流的块级元素上，而行内框、浮动框以及定位框则不会受影响。 因为div元素设置了fixed属性,则其就会脱离标准文档流.然后x元素就成了在标准文档流中紧邻body元素的元素,随即他们在纵轴方向上相遇了.这就产生了magin重叠问题.根据重叠原则(上一节有讲),body的magin-bottom就隐含成了15px. 但是,这里设置了fixed的div元素并没有设置top属性,则其仍按父包裹层(body)的位置不动. 所以,根据以上分析,div元素 和 x元素都与浏览器可视窗口上边界相距15px.查看全部
-
关于 fixed 定位和 absolute 定位，老师在一个细节上犯了错误： 元素设置了 fixed 定位和 absolute 定位后，当未设置偏移量时，元素的位置为正常文档流中的初始位置。 而不是老师所讲的： 父元素的左上角，或者 有已定位祖先元素 以祖先元素为基准定位；无已定位祖先元素 以浏览器窗口为基准定位。 我发现关于 position 都是同一位老师讲的，但是在未设置偏移量这点上，始终是错误甚至前后矛盾的。特此详细说明，如有错误，望指正： position：absolute 1.一般特点： ①建立了以包含块为基准的定位； ②完全脱离了文档流； ③随即拥有了偏移属性和 Z-index 属性； ④隐性改变 display 类型为 inline-block. 2.未设置偏移量的位置： 无论是否存在已定位的祖先元素，初始位置不变。 3.设置偏移量的位置： ①无已定位的祖先元素，以<html>为偏移参考基准； ②有已定位的祖先元素，以距其最近的已定位祖先元素为偏移参考基准。 position：fixed 1.一般特点： ①建立了以浏览器可视窗口为基准的定位； ②完全脱离了文档流； ③随即拥有了偏移属性和 Z-index 属性； ④隐性改变 display 类型为 inline-block. 2.未设置偏移量的位置： 无论是否存在已定位的祖先元素，初始位置不变。 3.设置偏移量的位置： 以浏览器可视窗口为基准偏移；查看全部
-
1.关于fixed的定位及偏移量基准参照 由于给top选择器设置fixed固定定位时，(top层已经脱离了标准文档流)没有对其设置偏移量，以其父包裹层定位，（当top选择器fixed固定定位设置了偏移量时，则top层的位置按照所设置的偏移量的位置定位） 2.margin重叠问题 fixed固定条的父包裹层body的margin与mainbody的上margin值发生了重叠，（此时的body与mainbody属于标准文档流）mainbody的上margin值大于body的margin值，选择了mainbody的上margin值20px（标准文档流中上下margin发生重叠时选择margin值大的那个）所以body下移20px；top层又以body层定位，从而导致了top层与浏览器可视窗口产生了距离。为了保持top层与浏览器窗口紧挨着，则需对top层的固定定位设置偏移量top:查看全部
-
1.position属性,又称position定位,有3种形式的定位：静态定位、相对定位、绝对定位。 影响因素： 1.属性的取值，2.元素偏移量，3.元素偏移参照基准 position属性值：static-静态定位， relative-相对定位，absolute-绝对定位，fixed-固定定位。 绝对定位特点【absolute与fixed同属于绝对定位】：完全脱离标准文档流，兄弟元素不再受其影响查看全部
-
在普通文档流中，当垂直方向上的两个外边距相遇时，会发生外边距合并，最后的外边距取两个外边距较高的值。这种合并现象发生在普通文档流的块级元素上，而行内框、浮动框以及定位框则不会受影响。查看全部
-
任务1:margin：0 auto； 任务2:position：fixed；top:0; 任务3:margin-top：63px；(因为top的border只有bottom一条边为1px,top自身height为42px) 所以:42+1+20=63px查看全部
-
文档流中，当两个垂直边界（margin-top或margin-bottom）相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。详细请百度。 补充解决方案： 1.外层padding 2.透明边框border:1pxsolidtransparent; 3.绝对定位postion:absolute: 4.外层DIVoverflow:hidden; 5.内层DIV 加float:left;display:inline; 6.外层DIV有时会用到zoom:1;查看全部
-
若没有设置偏移量时，都以父元素左上角为基准；若设置了偏移量，则查看全部
-
又是一个比较重要的基础知识点： 文档流中，当两个垂直边界（margin-top或margin-bottom）相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。<br> 补充解决方案：<br> 1.外层padding<br> 2.透明边框border:1pxsolidtransparent;<br> 3.绝对定位postion:absolute:<br> 4.外层DIVoverflow:hidden;<br> 5.内层DIV 加float:left;display:inline;<br> 6.外层DIV有时会用到zoom:1;查看全部
-
任务1:margin：0 auto； 任务2:position：fixed；top:0; 任务3:margin-top：63px；(因为top的border只有bottom一条边为1px,top自身height为42px) 所以:42+1+20=63px查看全部
-
absolute与fixed的不同点： 设置偏移量时：absolute：1、无已定位祖先元素，以html为基准；2、有已定位祖先元素，以距其最近，已定位的祖先元素为基准。fixed：有无已定位祖先元素都以浏览器可视窗口为基准偏移。 表现形式（产生滚动条时）：absolute：位置随滚动条变化；fixed：1、位置不随滚动条变化；2、被其遮盖的元素可从其下穿过。查看全部
-
已知一 div 高 35px，紧邻其后的 X 元素上外边距为 15px，为该 div 设置 fixed 定位后——div与浏览器可视窗口上边界相距15px 解析：因为X元素15px的上外边距与body的0px上外边距信息重叠了，所以body也跟着下移15px；又因为，div在父元素body内，且没有设置偏移量，所以div相对其父元素body进行绝对定位 （当绝对定位，未设置偏移量时，显示在body元素的左上角）查看全部
-
任务1:margin：0 auto； 任务2:position：fixed；top:0; 任务3:margin-top：63px；(因为top的border只有bottom一条边为1px,top自身height为42px) 所以:42+1+20=63px查看全部
-
1.由于给top选择器设置fixed固定定位时，(top层已经脱离了标准文档流)没有对其设置偏移量，以其父包裹层定位，（当top选择器fixed固定定位设置了偏移量时，则top层的位置按照所设置的偏移量的位置定位），而其父包裹层body的margin与mainbody的上margin值发生了重叠，（此时的body与mainbody属于标准文档流）mainbody的上margin值大于body的margin值，选择了mainbody的上margin值20px（标准文档流中上下margin发生重叠时选择margin值大的那个）所以body下移20px；top层又以body层定位，从而导致了top层与浏览器可视窗口产生了距离。为了保持top层与浏览器窗口紧挨着，则需对top层的固定定位设置偏移量top:0； 2.第一步对top层设置偏移量后top层紧随其后的兄弟元素会占据其原来的位置，所以mainbody层上移占据原来top层的位置。导致原来top层与mainbody层20px的间距没有了。在mainbody层的上外填充加上一定的高度就可以解决了。查看全部
-
mainbody的margin-top属性应为63px，不是64px。 因为top的border只有bottom一条边，为1px，top自身height为42px。 所以42+1+20=63px。查看全部
举报
0/150
提交
取消