css中利用margin来隐藏元素

例如

<style>

div

{

width:200px;

height:200px;

background-color:lightlue;

margin:0px 0px 0px -999em;

}

</style>

<div>

</div>

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

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

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

如

<style>

div

{

width:200px;

height:200px;

}

</style>

<body>

<div>

</div>

</body>

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

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

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

<style>

div

{

width:200px;

height:200px;

float:left;

}

div.one

{

background-color:yellow

margin-left:-100px;

}

div.two

{

background-color:blue;

}

</style>

<body>

</body>

如果是两个元素并排，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不纯在一样。

实例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

body
{
width:1000px;
height:1000px;
margin:200px auto;
border:1px solid red;
color:#f00;
}

div.one
{
padding:0px;
float:left;
width:200px;
height:200px;
background-color:blue;
margin-bottom:-190px;

}

div.t
{
width:200px;
height:200px;
background-color:yellow;
float:left;

}

p
{
background-color:lightpink;
height:300px;
}

</style>
</head>

实例图片：

css中利用margin来隐藏元素相关推荐

html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
html设置float后不能垂直居中,垂直居中CSS中的“float：right”元素
我已经尝试设置行高,表格单元格和其他解决方案,但不幸的是它们都不适用于我的案例.垂直居中CSS中的"float:right"元素下面是HTML ?= time(); ?>& ...
CSS中文本超出部分隐藏并用省略号代替
CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到,这种只需要css三行代码就可以实现首先先写好基本的结构 <div> <p>今天天气很好,适合出去玩耍,不要再打 ...
CSS 中的 margin、border、padding 区别（内边距、外边距）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一 ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
css中实现显示和隐藏
CSS中的display和visibility 在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...
知方可补不足～CSS中的几个伪元素
对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
css中伪类和伪元素有什么不一样
css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器,有时候我们用的是[:],有时候用的又是[::],有时候又好像两者都行,这到底是为什么呢?今天我们就来看看这两个东西到底有 ...
css的内联是什么,css中什么是内联元素
css中的内联元素也称为行内元素:内联元素包括布局中常用的标签如a.span.em.b.strong.i等:内联元素和它的兄弟元素之间一个挨着一个,并且都在同一行按从左至右的顺序显示,不单独占一行. ...

css中利用margin来隐藏元素

css中利用margin来隐藏元素相关推荐

最新文章

热门文章