常用的CSS属性

一：margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2
margin:10px 5px 15px;
上边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4
margin:10px;
所有 4 个外边距都是 10px
二：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
float: left;左浮动
float: right;右浮动
float: none;无浮动
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

三，内边距：padding 属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

    padding-top
    padding-right
    padding-bottom
    padding-left

您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

内边距的百分比数值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

<div style=”width: 200px;”>
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。