cssmargin顺序,css中margin什么意思

http://www.itjxue.com  2023-01-17 00:43  来源:未知  点击次数: 

CSS的盒模型中,Margin属性的数值赋予顺序为()?

如果后面1个值,四个方位边距都统一是这个

如果后面是2个值,第1个表示上下,第2个表示左右

如果后面是3个值,第1个表示上,第2个表示左右,第3个表示下

如果后面是4个值,则分别是上 右 下 左

在CSS中 { margin:0 196px 0 330px;}是什么意思?

margin表示外边距;

问题上的那段代码可解释为:上边距0px、右边距196px、下边距0px、左边距330px。这样使用margin的参数顺序是顺时针。

另外padding代表内边距,它的使用方法与margin类似。

呵呵,祝你好运!

将CSS代码缩写一行:margin-left:12px;?margin-top:?18px;?margin-right:6px;

正确的缩写为

{margin:18px

6px

12px;}

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

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

1、只有上下情况缩写

原始:margin-top:5px;

margin-bottom:6px

缩写简写为:margin:5px

6px

0或margin:5px

auto

6px

auto

2、只有左右情况缩写

原始:margin-left:5px;

margin-right:6px

缩写简写为:margin:0

6px

5px或margin:auto

6px

auto

5px

margin:0

auto;横向居中;

margin:auto

0;纵向居中;

3、只有三边情况缩写

原始:margin-top:5px;

margin-bottom:6px;

margin-left:4px

缩写:margin:5px

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;

css中margin和padding区别以及用途是什么?刚学css被这两个东西困扰了很久

一、margin属性

CSS中的margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。margin是四个外边距属性设置的简写。四个外边距属性设置分别是:?margin-top,?margin-right,?margin-bottom?和?margin-left。margin 属性接受任何长度单位,可以是像素、英寸、毫米或 px。

设置Margin属性的几种方式:

1、同时设置给定元素的四个外边距

//设置h1元素具有向上20px、向右30px、向下30px、向右20px的外边距。

h1 {

margin-top: 20px;

margin-right: 30px;

margin-bottom: 30px;

margin-left: 20px;

}

这样是看上去是不是很复杂呢?前面我们介绍了margin属性是四个外边距属性设置的简写。所以我们可以将上面设置h1元素外边距的代码简写为:

h1{

margin: 20px 30px 30px 20px;

}

? ? ?设置值的顺序是从上外边距开始围着元素顺时针旋转的器对应关系如下:

h1{

margin: top right bottom left;

}

2、margin属性中不一定必须要传入四个属性值,它分为一下几种情况:

·?只有一个??值时,这个值会被指定给全部的?四个边。

·?两个?值时,第一个值被匹配给?上和下, 第二个值被匹配给?左和右。

·?三个?值时,第一个值被匹配给?上, 第二个值被匹配给?左和右, 第三个值被匹配给?下。

·?四个?值时,会依次按?上、右、下、左?的顺序匹配?(即顺时针顺序)。

示例如下:

h1{margin: 1px;}//等价于 h1{1px 1px 1px 1px}

h1 {margin: 0.5px 1px;}// 等价于 h1{0.5px 1px 0.5px 1px }

h1 {margin: 0.25px 1px?0.5px;}//等价于h1{?0.25px 1px 0.5px 1px}

3、设置单边或多边外边距的语法

//设置向上外边距为20px。

h1{margin-top: 20px;}

//设置上外边距和左外边距均为20px

h1{margin-top: 20px; margin-left: 20px;}

二、padding属性

padding属性则是设置给定元素内边距的属性,它和margin属性一样也是四个内边距属性的简写,四个内边距属性分别是:padding-top、padding-right、padding-bottom、padding-left。它的使用方法与margin属性的使用方法也是相类似的,这里就不再说明了。

三、padding属性和margin属性的区别

padding属性和margin属性的区别这就涉及到了CSS中的盒模型了。下图是一个盒模型的图示。当你的浏览器展现一个元素时,这个元素会占据一定的空间。这个空间由四部分组成。中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距,外边距将该元素与其它元素分开。padding属性是设置是内容框与边框之间的距离的属性,而margin属性则是设置元素外边框与其他元素的距离。这就是他们的区别。这些内容都是属于CSS中的基础知识。在一个叫做秒秒学的网中有相关的介绍,有兴趣可以看看。

(责任编辑:IT教学网)

更多

推荐新手入门文章