margin设置,margin设置为负数

http://www.itjxue.com  2023-01-08 21:06  来源:未知  点击次数: 

css 为什么有时MARGIN 不起作用,

css有时MARGIN 不起作用是设置错误造成的,解决方法为:

1、新建一个HTML文件,命名为test.html

2、为了测试出明显的效果,在test.html使用div定义了一个带边框的模块,里面放一个p标签。下面以p标签的外边距设置为例,详细讲解margin的使用。

3、使用margin设置p标签的左外边距。主要使用margin-left的方法定义左外边距的样式,值越大,距离左边就越大。

4、使用margin设置p标签的右外边距。主要使用margin-right的方法定义右外边距的样式,值越大,距离右边就越大。

5、使用margin设置p标签的上外边距。主要使用margin-top的方法定义上外边距的样式,值越大,距离上边就越大。

6、使用margin设置p标签的下外边距。主要使用margin-bottom的方法定义下外边距的样式,值越大,距离下边就越大。

网页制作中margin是什么意思,为什么后面还要跟个0?

默认情况下,html标签都有margin属性外边距,如果不设置0,会有间距不好看,为了清理这个默认的间距,所有需要给元素设置css属性margin:0

margin:0 为简写,意思是上下左右全部设置外边距为0,如果要设置右间距为10px,其它方向为0

可以这么设置 margin:0 10px 0 0 意思为 上外边距为0 右外边距为10px 下外边距为0 左外边距为0

写到这里应该明白了吧 margin简写顺序为 上 右 下 左

更多教程:lanye.org

【css】外边距margin的属性和使用方法

外边距很好理解,就是指边框以外的距离,可以表示和其它元素之间的距离,使用margin属性来设置。

margin后面可跟多个值,中间用空格分离,含义如下:

(1)首先我们放置三个盒子,颜色不同,宽高均为100px。

(2)我们给中间的橙色盒子加上一个10px的上外边距,可以看到橘黄色的盒子向下移动了10px,上面多了一个上外边距。

(3)接下来我们去掉上外边距,改成给橘黄色盒子加上一个10px的下外边距,发现橘黄色盒子并没有移动,移动的是下面的黄色盒子,所以margin-top和margin-bottom的用法一定要区分开。

(4)外边距可以是赋值,我们给橘黄色盒子添加一个-50px的上外边距,可以看到橘黄色盒子向上移动了。

(1)我们放置一个大的红色盒子,里面包着一个小的橘黄色盒子,当我们为橘黄色盒子添加了一个50px的上外边距的时候,本来应该只是小盒子多了上外边距然后导致向下移动。结果发现,效果就好像是给大盒子加了上外边距一样,大盒子跟着小盒子一起塌陷下去了,并不是我们想要的效果。

(2)如果大盒子有边框,或者橘黄色盒子上面还有元素,情况会是正常的,可以达到我们想要的效果,不会出现塌陷:

(3)解决方法

在外部元素上面没有边框,其内部上方也没有其它元素挡着的时候,给其子元素设置上外边距,会导致塌陷,达不到想要的效果。目前我们只能在遇到这种情况的时候尽量使用padding去设置,不要使用margin,当然还有很多别的解决方法,就不细说啦。

我们放置两个盒子,给上面的盒子添加一个100px的下外边距,给下面的盒子添加一个50px的上外边距,最终效果如图所示,两个盒子最后中间只隔了100px:

当下方元素的上外边距遇到上方元素的下外边距,是会发生重合效果的,设置的时候一定要注意。

块元素才可以设置上下左右外边距,内联元素设置上下外边距是无效的。

Android如何在java代码中设置margin?

1、比如imageView,有一个getLayout方法,获得的layout在强转类型到LinearLayout或者其他,然后再设定margin什么的。

2、我们平常可以直接在xml里设置margin,如:

Xml代码 ImageView?android:layout_margin="5dip"?android:src="@drawable/image"?/

但是有些情况下,需要在java代码里来写,可是View本身没有setMargin方法,怎么办呢?

通过查阅android api,我们发现android.view.ViewGroup.MarginLayoutParams有个方法

setMargins(left, top, right, bottom)。

其直接的子类有: FrameLayout.LayoutParams, LinearLayout.LayoutParams and RelativeLayout.LayoutParams。

Android Dialog 设置Margin方式总结

在日常开发中,总是会遇到各种Dialog的使用,调整根据UI设计的不同,会经常调整Dialog在屏幕中的位置,这篇文章主要介绍,在使用 DialogFragment 时设置Margin的几种方式。

如下是最后实现的效果:

设置两边margin效果:

设置顶部margin效果:

全屏的Dialog设置顶部Margin:

这个比较容易,主要就是设置一个高度wrap_content,宽度match_parent的dialog,然后在dialog的布局中设置margin就可以了。

如下是xml文件:

然后在DialogFragment的onResume里对Window做一些处理:

这种情况margin可以通过 WindowManager.LayoutParams 的 verticalMargin 属性来实现。 verticalMargin 和xml里面设置的layout_margin不一样, verticalMargin 是通过设置一个0-1的float变量,来标识margin在屏幕中的占比。

如下是在DialogFragment的onResume中的处理:

xml文件(和1的类似,没有什么特别):

这里如果使用2中的方法,没有任何效果。这里使用另外一种方式实现-- insetDrawable 。

这里的实现是在xml里面写一个 inset :

在DialogFragment的onResume方法中:

padding和margin的数值设置方式

?padding也是复合属性 padding:20px 上右下左都是20px?

?顺序是按照 上右下左的顺序来设置的(padding: 20px 15px 10px 5px;?)

?分开设置: padding-top:20px;

? ? ? ? ? ? ? ? ? ? padding-right:15px;

? ? ? ? ? ? ? ? ? ? padding-bottom: 10px;

? ? ? ? ? ? ? ? ? ? padding-left:5px;

?下面的会把上面的属性值覆盖: padding:20px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-top:40px;?

?padding:10px 20px 15px:(?上10px ?左右20px 下15px)? ? ?

上下 10px 左右 20px :(?padding:10px 20px;)

上右下左的外边距都是30px :margin:30px

上边距30 左右20 下40 :(?margin:30px 20px 40px;)

上下10 左右30 :(? margin:10px 30px;?)

也可以分开写:margin-top: 10px;

? ? ? ? ? ? ? ? ? ? ? ? ?margin-right: 20px;

? ? ? ? ? ? ? ? ? ? ? ? ?margin-bottom: 30px;?

margin可以给负值,会超出边界 :?margin-left: -40px;

下面的会把上面相同属性的值覆盖 :margin:30px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?margin-left:-30px;?

(责任编辑:IT教学网)

更多

推荐linux服务器文章