CSS中的几个重要基本属性代码详解大全

1、Margin 和 padding 属性代码

讲解：margin 是外边距标签，padding 是内边距标签。它们有一个共同点，就是都可以定义四个方向的位置：top、right、bottom、left。这里为什么先写 right，后写 left 呢？举个例子说明下吧。例：margin:1px 2px 3px 4px;这里的四个参数代表的意思分别是：外边距距离上面 1px，外边距距离右边 2px，外边距距离下面 3px，外边距距离左边 4px。

测试：padding:1px 2px 3px 0;

当然，也有些特殊情况，例：margin:3px 4px;这里只定义了两种参数，那这又是什么意思呢？其实原理是一样的，这里的 3px 代表的是外边距距离上面

和下面为 3px，4px 代表的是外边距距离右边和左边为 4px。这下子明白了吧！

测试：padding:0px 3px;

最后，还有一种特殊的情况，例：margin:0px。这下子大家可能又迷糊了，这又代表什么意思呢？不用急，对照上面两种情况想想，你一定可以发现，其实原理是一样的，这里的 0px 代表的是外边距距离上、右、下、左都为 0px。

测试：padding:10px;

下面介绍一种在后面用得比较多的一个相当重要的代码：margin:0 auto; 居中当然，margin 和 padding 的用法还不止这些，假如我们想只定义外边距距离上面的距离为 5px,那定义方法又如何呢？小编来告诉你：margin-top:5px;相同，如果我只想定义外边距距离下面的距离呢？这个相信学到这儿的你一定可以轻松解决了。

 

2、border 属性代码

 

讲解：border 是边框代码，可以用来定义边框的大小粗细、颜色之类的属性代码。例：border:1px solid #000000; 其中，1px 代表边框的粗细为 1px，一般我们做网站的时候是设为 0px 的;solid 代表边框为实线，（dashed 代表虚线，dotted 代表点线）;#000000 代表边框的颜色。当然，我们也可以分开定义边框：

例：定义上边框为 1px，虚线，白色

答：border-top:1px dashed #ffffff;

测试：定义左边框为 5px，点线，黑色

 

3、background 属性代码

 

讲解：background 是背景属性代码，可以定义背景的颜色、图片、位置以及重复方式等等。这里主要讲解常用的四种属性代码：

background-color:#000000; 背景颜色

 

background-image:url() ; 背景图片

 

background-position: 背景位置

 

background-repeat 背景的重复方式

 

4、clear、color 和 direction 属性代码

 

讲解：clear 清除代码，color 颜色代码，direction 方向代码。

 

5、display:#属性代码

 

讲解：display 即显示方式隐藏代码，#可以设置成 hidden(隐藏)

 

6、float 属性代码

 

讲解：float 浮动代码，主要用到的两种方式为 left 和 right，这里的用法也是很有讲究的，用法不当，很有可能导致整个网站错位。

 

例：现在准备开发班班网，首页有一个框架，分为左中右三块，这里我要设置浮动，我们应该怎么设置呢？

 

答：这是我们在做网站经常遇到的一种情况，而这种答案也肯定是唯一的，

 

我们应该将左边的模块设置成:float:left，将中间的模块设置成：float:left，将右边的模块设置成：float:right。从这个例子我们可以发现，不管有多少个模块，我们都必须把前面的 N-1 个模块的浮动效果设置成 float:left，而将最后第 N 个模块的浮动效果设置成 float:right。

 

7、font 属性代码

 

讲解：在上面，我们已经接触到 font 代码里，这里将更深一步的讲解下 font代码。font-family:字体， 这里有个比较特殊的字体，Microsoft Yahei 微软雅黑，这个要记住哦。）font-size，定义字体的大小;font-weight:bold，定义字体粗细

 

（normal 为正常）

 

8、z-index 属性代码

 

讲解：z-index 代表元素的堆叠顺序，它的取值范围为：-999~999，取值的数字越大，越靠上，而且这个参数只有在 position:absolute（绝对位置）的情况下才能生效。

 

9、letter-sapcing:1px; 字符间距

 

line-height:22px; 行距

 

10、overflow:#属性代码

 

讲解：overflow:#代表超出对象指定的高度和宽度时候如何显示内容，#处常用的三种参数如下：hidden(隐藏)auto(自动)scroll(滚动)

 

11、text-align 属性代码

 

讲解：text-align 代表文字的对齐方式，常用的对齐方式有 left（左）right

 

（右）center（居中）。

 

text-decoration:underline; 文字的装饰

 

underline 下划线

 

align 水平对齐方式

 

vertical-align 垂直对齐方式

 

 

12、style 样式

 

inherit 继承

 

 

其实主要的属性代码也就这些，具体的我们在操作中要灵活使用，本文地址：http://www.jinshare.com/2013/07/biaoqian/