CSS入门（6）－margin、padding和top，绝对定位与覆盖的问题

来源：互联网发布：java web消息推送框架编辑：程序博客网时间：2024/05/19 01:13

在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

一、padding

序号语法含义 1 padding-left:10px 左内边距 2 padding-right:10px 右内边距 3 padding-top:10px 上内边距 4 padding-bottom:10px 下内边距 5 padding:10px 四边统一内边距 6 padding:10px 20px 上（10px）、左（20px）内边距 7 padding:10px 20px 30px 上、左右、下内边距 8 padding:10px 20px 30px 40px 上、右、下、左内边距

通常可能取的值如下：

序号可能取的值含义 1 length 规定具体单位记的内边距长度 2 % 基于父元素的宽度的内边距的长度 3 auto 浏览器计算内边距 4 inherit 规定应该从父元素继承内边距

浏览器兼容问题：
（1）所有浏览器都支持padding属性
（2）任何版本IE都不支持属性值“inherit”

二、margin

序号语法含义 1 margin-left:10px 左外边距 2 margin-right:10px 右外边距 3 margin-top:10px 上外边距 4 margin-bottom:10px 下外边距 5 margin:10px 四边统一外边距 6 margin:10px 20px 上下、左右外边距 7 margin:10px 20px 30px 上、左右、下外边距 8 margin:10px 20px 30px 40px 上、右、下、左外边距

通常可能取的值如下：

序号可能取的值含义 1 length 规定具体单位记的外边距长度 2 % 基于父元素的宽度的外边距的长度 3 auto 浏览器计算外边距 4 inherit 规定应该从父元素继承外边距

浏览器兼容问题：
（1）所有浏览器都支持margin属性
（2）任何版本IE都不支持属性值“inherit”

margin和padding的区别用图表示为：

这里写图片描述

3. top和margin-top的区别

简单说一些top、margin-top的区别：

1、top、bottom、left、right是绝对定位，必须设置position为absolute。margin一系列设置是相对定位。

注意：如果用top等，而position未设置为absolute，那设置是不起作用的。

2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。

margin的相对定位，是指相对相邻元素的定位。

例如：top这些在绝对定位的前提下，这个绝对定位，相对position：relative的父级元素的绝对定位。

需要注意的是：z-index默认是0

看一个实例：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#reddiv{    height:100px;    background:red;} #container{    position:relative;    height:400px;    width:500px;    background:yellow;    overflow:hidden;}  .three {    position:absolute;    background-color:green;    height:60px;    width:inherit;    top:20px;}#header{    /* position:relative; ① */    height:200px;    width:300px;    z-index:2;    background:blue;}     </style></head><body><div id="reddiv"></div><div id="container">      <div id="header">        这是第一行<br>        大厦发生地<br>        这是第三行<br>        对方受到非<br>        这是第五行<br>        大多数的的二位    </div>    <div class="three">        我是绿色层的字哦！！<br>        我还是在绿色层。。。<br>    </div></div></body></html>

通过上面的例子我发现一个奇怪的问题：

3. 要想让一层覆盖另外一层，必须要使用绝对定位，并且设置好高度和宽度。其父容器也必须使用position进行定位，绝对定位或者相对定位都可以。

0 0

CSS入门（6）－margin、padding和top，绝对定位与覆盖的问题

一、padding

通常可能取的值如下：

二、margin

通常可能取的值如下：

margin和padding的区别用图表示为：

3. top和margin-top的区别

简单说一些top、margin-top的区别：

1、top、bottom、left、right是绝对定位，必须设置position为absolute。margin一系列设置是相对定位。

2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。

需要注意的是：z-index默认是0

看一个实例：

通过上面的例子我发现一个奇怪的问题：

1. 就是有绝对定位的元素three（position:absolute;），会覆盖没有定位的元素！！！哪怕它的z-index比被覆盖的还要低！上面的three默认z-index是0，而header的z-index是2。

2. 只要被覆盖的元素也有定位（无论是绝对定位，还是相对定位），由于z-index比较高的原因，它会立刻覆盖比较低的那个。上例只要去掉①处的注释，three就会被header覆盖。

3. 要想让一层覆盖另外一层，必须要使用绝对定位，并且设置好高度和宽度。其父容器也必须使用position进行定位，绝对定位或者相对定位都可以。