css常用属性

a.几个常用的css缩写；
font：【风格】
【字母样式】 【粗细】 【大小】/【行高】 【字体种类】；
【风格】：可省略。就是填font-style的值。用斜体的可以填“italic”。
【字母样式】：可省略，将小写字母变成大写，但大小还是小写的一样。就是填font-variant的值。不太常用，需要大写是可填“small-caps”。
【粗细】：可省略，默认300、normal。可填100-900整百数，一般用normal（默认正常）、bold（加粗），就是填font-weight的值。
【大小】：必须填、如“18px”。当然你也可以填其他的大小，就是填font-size的值。
【行高】：可省略，不填时要把前面的斜杠“/”去掉，默认浏览器值。当然你也可以填其他的大小，就是填line-height的值。
【字体种类】：必须填，可多填，需逗号“,”隔开，如“宋体”。当然你也可以填其他的字体，就是填font-family的值。为了提高用户体验，可填"serif"、"sans-serif"，浏览器默认字体；
完整例子，font:italic bold 16px/20px  serif,sans-serif;

background：【颜色】
【图片路径】 【铺放情况】 【绝对定位】 【横纵位置】；
【颜色】：可省略。没什么好说的，就是填背景颜色background-color的值，可以和背景图片叠加，颜色在图片下面，如“#fff”。
【图片路径】：可省略。可填绝对路径，也可以填相对路径，语法url('images/logo.png')，就是填background-images的值。
【铺放情况】：可省略，就是填backg
4000
round-repeat的值。默认为自动铺满。
【绝对定位】：可省略，就是填background-attachment的值。默认为scroll，可设置成“fixed”，背景将会固定在屏幕。
【横纵位置】：可省略，默认为0% 0%。就是填background-position的值。
完整例子，background:#000 url('images/logo.png') no-repeat center;

border：【大小】
【边框类型】 【颜色】；
【大小】：必须填，就是填border-size值。如“1px”。
【边框类型】：必须填，就是填border-style值。如“solid”。普及一下,solid实心线，dotted点状线，double双线，dashed虚线。
【颜色】：必须填，就是填border-color值。如“#000”。
完整例子，border:1px solid #111;

还有几个是css3的，这里提及一下，就不详细说了，以后会用到再说，我现在只要你入门就可以了。

边框阴影：
-webkit-box-shadow: 3px 3px 3px #0CC;  //Safariand Google chrome10.0-
-moz-box-shadow: 3px 3px 3px #0CC;  //Firefox4.0-
box-shadow: 3px 3px 3px #0CC;  //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9

文字阴影：
-webkit-text-shadow: 3px 3px 3px #0CC;  //Safariand Google chrome10.0-
-moz-text-shadow: 3px 3px 3px #0CC;  //Firefox4.0-
text-shadow: 3px 3px 3px #0CC;  //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9

圆角边：
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

PS：注意属性顺序，属性之间用空格隔开。

b.display属性；
display，里面有很多值，这里只说4个，none 、block、inline 、inline-block。
在说之前，先说一下两个词，块级元素和内联元素。

常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

内联元素也叫行内元素。一般情况下，行内元素只能在块状元素里面，这是w3c的标准。

块状元素display：block，而行内元素display：inline；那么明显的区别在哪呢？老端这就告诉你。
快状元素并排放置，页面显示的效果是一行一行的，而行内元素并排放置，页面显示的效果是排成一排。

重点：为什么有时候给元素设置高宽不起作用呢？有时候margin和padding的值也不可以？因为它就是内行元素inline

说明一下：
①inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
②inline元素设置width,height属性无效。
③inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom,
margin-top, margin-bottom不会产生边距效果。
那么需要怎么解决呢？可能你需要displa
c48e
y:block:

最后一个——none，很简单的一个作用，元素不呈现在网页，也不占网页的布局位置。好像没啥用，做出来了还不给显示，还不如不做来得轻松。但是，当你开始接触JS的时候，就能显出它的强大之处了。

c。margin和padding



margin就是元素外边的距离，padding就是元素到内容的距离，作用是这样，但是有时候显示并不是酱紫，解决估计不能直接给方法你，毕竟问题错综复杂，但是对这方面的经验有一些，下面分享一下（例子就不举了，然老了都忘了）：
①浏览器兼容。大部分问题出现所在，可以去网上找相关这方面的兼容来看。
②元素问题，可能对margin或padding部分不起作用。
③positian属性对margin或padding有影响。
④float属性对margin或padding有影响。

重点：块状元素设置margin:0 auto;可以左右居中，但不能使用position和float。

d.position
position，4个值static（默认）、fixed（绝对定位）、absolute（绝对定位）、relative（相对定位）。
设置的位置用top、bottom、left、right，一般用px单位，也可以用%。有时候还需要一个层的属性z-index，值是数字，同一层，z-index值越高，就会被顶置，可以设置负数。

static，默认值，不设置的position时候，是怎么样的就是怎么样的。
fixed、absolute，两个都是绝对定位，但是它们的参照物不同。fixed参照物是浏览器窗口，无论你怎么努力将网页往下拉，窗口依旧，只是窗口内容变化，而被fixed附属的元素也是如此。absolute是以浏览器窗口里的内容为参照物，官方的定义是：生成绝对定位的元素，相对于
static 定位以外的第一个父元素进行定位。简单来说，就是以它的父元素为参照物定位，并且这父元素position的值不是static，如果都是static，那就是页面最顶端为参照物。