1 margin

margin 是外边距的意思,是边框到外部另一元素之间的距离,允许使用负值

语法结构:

margin:5px auto;                  意思上下为5,左右平均居中
margin-top: 20px;                 上外边距
margin-right: 30px;               右外边距
margin-bottom: 30px;           下外边距
margin-left: 20px;                  左外边距
margin:1px                            四边统一边距
margin:1px 1px                    上下边距,左右边距
margin:1px 1px 1px             上,左右,下边距
margin:1px 1px 1px 1px       上,右,下,左边距
注释:允许使用负值。
 
 
2 padding
pdding是内边距的意思,设置所有当前或者指定元素内边距属性,不允许使用负值。
 
语法结构:
 
padding-top:20px;         上内边距
padding-right:30px;        右内边距
padding-bottom:30px;       下内边距
padding-left:20px;         左内边距
padding:1px             四边统一内边距
padding:1px 1px           上下,左右内边距
padding:1px 1px 1px        上,左右,下内边距
padding:1px 1px 1px 1px     上,右,下,左内边距
 
3 top;left;right;bottom
1、top、bottom、left、right是绝对定位,必须设置position为absolute。 margin一系列设置是相对定位。注意:如果用top等,而position未设置为absolute,那设置是不起作用的。
2、top这些在绝对定位的前提下,这个绝对定位,是相对body  或者  position:relative的父级元素的绝对定位。margin的相对定位,是指相对相邻元素的定位。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

css 样式中 margin padding和top类定位的区别的更多相关文章

  1. jQuery获取CSS样式中的颜色值的问题

    转自:http://blog.csdn.net/cwj649956781/article/details/23261529 jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法,需 ...

  2. CSS样式中” 大于号”

    CSS样式中” 大于号” 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGROUND-IMAGE: ...

  3. canvas基础入门(一)canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  4. 针对firefox ie6 ie7 ie8的css样式中的line-height属性

    针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...

  5. css样式中@import引入样式

    css样式中@import引入样式 学习了:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

  6. CSS样式中ClearBoth的理解

    在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位 ...

  7. 说说CSS样式中你不知道的“大于号”

    继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要.下面是Css中处理继承的一个方法.在一段CSS代码中见到一个大于 ...

  8. css样式中position和_position的区别

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3IAAAEUCAIAAADhh5PYAAAgAElEQVR4nO3dPa/rNoLGcX6dW6UL+B ...

  9. c#中结构体(struct)和类(class)的区别

    一.类与结构的示例比较: 结构示例: public struct Person { string Name; int height; int weight public bool overWeight ...

随机推荐

  1. IO多路复用(IO Multiplexing)

    什么是IO多路复用 为什么要有IO多路复用 作者总结 遵循学习新知识的三部曲:是什么?为什么?怎么用? 作者前言:IO多路复用本质上是网络通信过程中的一个技术名词. 什么是IO多路复用 一个用机场管理 ...

  2. 树莓派 Raspberry PI之GPIO

    树莓派 Raspberry PI之GPIO 树莓派各版本硬件原理图:https://www.raspberrypi.org/documentation/hardware/raspberrypi/REA ...

  3. [vijos1883]月光的魔法<递归>

    题目链接:https://vijos.org/p/1883 这道题还有另外一种版本叫天神下凡,属于模拟题,可是模拟题数据太水以至于模拟题A了都不一定在vijos上A.... 在模拟题里我用的是一种类似 ...

  4. 【cs224w】Lecture 5 - 谱聚类

    Spectral Clustering 前面的课程说到了 community detection 并介绍了两种算法.这次来说说另外一类做社区聚类的算法,谱聚类.这种算法一般分为三个步骤 pre-pro ...

  5. 《Java基础复习》-控制执行流程

    最近任务太多了,肝哭我了,boom 参考书目:Thinking in Java <Java基础复习>-控制执行流程 Java使用了C的所有流程控制语句 涉及关键字:if-else.whil ...

  6. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test_vue_0613@1.0.0 dev: 错误的解决方法

    错误原因在于由于文件 node_modules 太大,在项目上传时有些人会删掉 导致我们下载的项目中缺少这个文件 在尝试把自己项目的 node_modules文件夹直接复制过去之后发现问题还没有得到解 ...

  7. 1049 Counting Ones (30分)

    The task is simple: given any positive integer N, you are supposed to count the total number of 1's ...

  8. Genetic CNN: 经典NAS算法,遗传算法的标准套用 | ICCV 2017

    论文将标准的遗传算法应用到神经网络结构搜索中,首先对网络进行编码表示,然后进行遗传操作,整体方法十分简洁,搜索空间设计的十分简单,基本相当于只搜索节点间的连接方式,但是效果还是挺不错的,十分值得学习 ...

  9. pycharm 永久激活方法

    打开终端,执行: cd /etc/ sudo vim hosts 在最后一行加上: 0.0.0.0 account.jetbrains.com 打开pycharm,选择Activation Code ...

  10. Vue生成分享海报(含二维码)

    本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 功能需求: 海报有1张背景 ...