如何用jQuery获取li的第3,6,9个,让他们的margin值为0

如何用jQuery获取li的第3,6,9个,让他们的margin值为0,第1张

$('li')each(function(index, item){

    if( index % 3 === 0 ){

            var li = $(item);

        licss('margin', 0);

    }

});

margin对div的宽度并不影响,而padding的话,实际显示的宽度是设置的width值加上左右padding的值,比如width:600px;padding:10px;那么实际显示宽度就是620px;

所以布局的时候要用padding的时候设置width属性的时候记得减去padding值

而IE和FF中,padding的实际效果都一样,而margin的话,在FF和IE中的BOX模型解释不一致导致相差2px;

也就是IE会少2px,解决方法是:

margin:30px!important;

margin:28px;

30px是FF调取的,28px是IE调取的

备注:

区别FF,IE7,IE6:

background:green

!important;

background:orange;

background:blue;

IE6能识别,但不能识别

!important,

IE7能识别,也能识别!important;

FF不能识别,但能识别!important;

另外再补充一个,下划线”_“,IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分firefox,IE7,IE6

background:green!important;

background:orange;

_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

你写错啦,应该是margin-right和margin-bottom,margin-right是右边的距离,margin-bottom是底部的距离。简单的写法是margin: 0 10px 20px 0;margin的四个参数值依次代表着上、右、下、左的距离。

正确的缩写为 {margin:18px 6px 0 12px;}

margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。

在css中使用margin可以将margin-top,margin-right,margin-bottom,margin-left,缩写为一个标记,顺序为上右下左(顺时针)。

1、只有上下情况缩写

原始:margin-top:5px; margin-bottom:6px

缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情况缩写

原始:margin-left:5px; margin-right:6px

缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px

margin:0 auto;横向居中;

margin:auto 0;纵向居中;

3、只有三边情况缩写

原始:margin-top:5px; margin-bottom:6px; margin-left:4px

缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四边相同值缩写

原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px

缩写:margin:5px;

5、四边不同值缩写

原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px

缩写:margin:5px 8px 6px 7px;

6、四边其中上下值和左右值各相同缩写

上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px

缩写:margin:5px 7px;

以上就是关于如何用jQuery获取li的第3,6,9个,让他们的margin值为0全部的内容,包括:如何用jQuery获取li的第3,6,9个,让他们的margin值为0、ie 和ff关于 div的宽度计算 margin padding、在body标记里的边距属性rightmargin和bottommargin分别是到哪里的的距离,是到网页右边和底边的距离吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9572114.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存