CSS margin用法详解

CSS的margin用法详解:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
margin属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法。
此属性用来定义对象的外边距的,也称之为外补白,所谓的外边距就是围绕边框外侧的空白区域。可以单独定义上下左右某一方位的外边距。代码实例如下:
实例一:
子div没有外边距的情况:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
  width:400px;
  height:400px;
  border:1px solid red;
}
.children{
  width:100px;
  height:100px;
  border:1px solid green;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"></div>
</div>
</body>
</html>

实例二:
设置了左边距以后子div:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
  width:400px;
  height:400px;
  border:1px solid red;
}
.children{
  width:100px;
  height:100px;
  border:1px solid green;
  margin-left:20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"></div>
</div>
</body>
</html>

以上代码设置了子div的左外边距,这样就是比较清晰的明白外边距的意思了。
当然我们可以通过margin-right、margin-top和margin-bottom设置各自方位的外边距。虽然通过各自方位的外边属性设置外边距比较明确,但是也略显冗余,所以可以使用margin属性一次性设置多个方位的外边距。代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
  width:400px;
  height:400px;
  border:1px solid red;
}
.children{
  width:100px;
  height:100px;
  border:1px solid green;
  margin:20px 30px 50px 50px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"></div>
</div>
</body>
</html>

以上代码中通过使用margin属性一次性设置了对象的四个外边距。
下面是margin属性值的作用特点:
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。 
如果只提供一个,将用于全部的四边。 
如果提供两个,第一个用于上、下,第二个用于左、右。 
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4657

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-11-03 11:01:19

CSS margin用法详解的相关文章

1:CSS中一些@规则的用法小结 2: @media用法详解

第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule是一个声明,为CSS提供执行或怎么表现的指令.每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么.这是一个通用的语法,尽管每个at-rule有其它语法变体.常规规则 常规规则遵循下面的语法: 复制代码 代码如下: @[KEYWORD] (RULE); @charset

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

CSS的padding用法详解

CSS的padding用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域.可以单独定义上下左右某一方位的内边距.代码实例:实例一:没有设置父div的内边距的时候: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"

offsetleft属性用法详解

offsetleft属性用法详解:本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一下参考.此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的.(1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离.(2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离.语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值.代码实例: <!DOCTYPE html> <html&

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 创建Extjs Window 创建Extjs Window的代码如下: //创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500

三元运算符用法详解

三元运算符用法详解: 此运算符是一种非常常用的元素符号,如果使用得当可以省却不少代码.三元运算符也可以称作为条件运算符,可以说是if...else语句的一种简化形式,下面就结合实例简单介绍一下如何实现次运算符,先看一下运算符的语法结构: 表达式一?表达式二:表达式三 三元运算符之所以称作三元,就是因为具有三个操作数.当表达式一的返回值为true的时候,则返回表达式二的值,否则返回表达式三的值.下面看一段代码实例: <!DOCTYPE HTML> <html> <head>

jQuery的offset()和position()用法详解

offset()和position()用法详解: 这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这两个方法的用法. 下面先看一下它们基本的定义: 1.offset()方法的定义: 此方法获取或者设置匹配元素在当前document的相对偏移. 此方法只对可见元素有效. 当获取偏移量时,方法的返回值是一个包含两个整型属性(top和left)的对象. 设置偏移量时,此方法的参数是带有top和left属性的对象. 具体用法可以参阅jQuery的offset()方法一章节. 2.positio

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

window.onload用法详解

window.onload用法详解: 网页中的javascript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的低端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成. 二.通过window.onload来执行脚本代码. 第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个更好的选择.window.onloa