css中利用margin来隐藏元素

叁歲伎倆 2022-07-17 00:29 263阅读 0赞

例如



 

i am okok

1.将margin-left:设置成比元素宽度还大的负值，就能将元素相左移动出body（或包含框），这样在效果上就像把元素隐藏起来了，只是之后跟随的段落不会，不会忽视div的高度，仍然保持原位置，除非设置了margin-bottom，

2.如果把元素的margin-bottom也设置为负值，那么之后跟随的元素(如p元素)会上浮，如果负值的绝对值大于元素的高度，之后跟随的元素(如段落)会好上浮到元素的顶部以上。

3.元素(如div)只有贴着那一边，才能有效的实施margin 的负值效果。

如







这种情况之下实施margin-top margin-left会有效果 实施marign-bottom时之后跟随的元素会有相应的上下位置变化，实施margin-right时不会有太大效果。

如果把div浮动float到right时，marin-right会有效果，margin-left不会。

4.如果是元素左右侧有元素时



 
 


i am okok



如果是两个元素并排，div.one的margin-left为负值时，这两个元素整体相左移动。

如果div.one的margin-right为负值时，div.two会向左移动覆盖一部分div.one.

如果div.two的margin-right也为负值时，i am okok这段文字就会向左偏移，位于div.two中一部分。因为margin为负值时就相当于元素的边界缩小。

如果div.two的margin-bottom为负值且绝对值足够大时，相对于元素的高度足够小时，这时i am okok这段文字就会向左移动，相对于div.two不纯在一样。

实例代码：




无标题文档





 


 

i am okok



实例图片：

发表评论

表情：
评论列表 （有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS隐藏元素

    ①opacity opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。 ②vi

    旧城等待，旧城等待，/ 0 赞/ 18 阅读

    相关 CSS隐藏元素

     在制作网页时，隐藏内容也是一种比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。使用CSS即可使

    小咪咪小咪咪/ 0 赞/ 290 阅读