做人第一 学习第二

脱离文档流的方式

1.block元素独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度block元素可以设置width、height、margin、padding属性;

  • inline元素不会独占一行,多个相邻的会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

  • inline元素设置width、height属性无效。

  • inline元素的margin和padding属性。

  • 水平方向的padding-left, ..-right,..-left, ..-right都产生边距效果;但竖直方向的padding-top, ..-bottom, ..-top, ..-bottom不会产生边距效果。

  • 这些是以上两个的文档流排列方式?


2.文档流:元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

脱离文档流的方式:绝对定位absolute和浮动float。


3.脱离文档流:

   也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

     

   使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。

      

   而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。


    Fixed,固定定位!

此文如未标注转载均为本站原创,自由转载请表明出处 宋子宪博客 » 脱离文档流的方式

发表评论

游客 表情
送你一朵小花花~

帅人已评:(0)