CSS的基本样式总结（一）

最近在看CSS，随手整理一下笔记，希望给刚看的朋友带来点帮助，有不对的地方欢迎留言，看到一定回复！

width  宽
height  高
backgroud  背景色

背景色

   background-color: 颜色值  (英文单词  十六进制  rgb)

   背景图

   background-image:url("图片路径“)

   背景图平铺

   background-repeat: no-repeat   repeat-x   repeat-y

   背景图定位

   background-position: 第一个值(X轴的位置)  第二个值(Y轴的位置)

         第一个值：left  center  right 30px;

   第二个值：top  center  bottom  100px;

   复合写法(注意顺序)

   background：color   image   position   repeat;

例子：

background-color : #db7791;

background-color : rgb(219, 119, 145);

background-color : blue;

background-image : url("img/test.jpg");

background-repeat : no-repeat;

background-position : right bottom;

background : red  url("img/test.jpg")  30px  100px  no-repeat;

border  边框

   复合写法

border ： border-width  border-style  border-color;

border-width  边框宽度

border-style  边框样式  solid 实线 dashed 虚线 dotted 点线 (点线IE6不认)

border-color  边框颜色  英文单词  十六进制  rgb 

border-radius  圆角

transparent  透明

例子：

     border-top : 100px  solid  #ccc;

border-right : 100px  solid  transparent;

border-bottom : 100px  solid  #ccc;

border-left : 100px  solid  #ccc;

border-radius : 50%;

border : 10px  solid  yellow;

padding  内边距  内填充

   padding-top: 上内边距

   padding-right: 右内边距

   padding-bottom: 下内边距

   padding-left: 左内边距

   padding的复合写法：

   padding: 10px;  一个值代表上右下左都是10px

   padding: 10px 20px; 两个值  第一个代表上下   第二个代表左右

   padding: 10px 20px 40px;  三个值 第一个代表上  第二个代表左右  第三个代表下

   padding: 10px 20px 40px 80px; 四个值  第一个代表上 第二个代表右 第三个代表下 第四个代表左

margin  外边距

   margin-top: 上外边距

   margin-right: 右外边距

   margin-bottom: 下外边距

   margin-left: 左外边距

   margin的复合写法：

   margin: 10px;  一个值代表上右下左都是10px

   margin: 10px 20px; 两个值  第一个代表上下   第二个代表左右

   margin: 10px 20px 40px;  三个值 第一个代表上  第二个代表左右  第三个代表下

   margin: 10px 20px 40px 80px; 四个值  第一个代表上 第二个代表右 第三个代表下 第四个代表左

margin有两个需要特别注意的问题：

1、子级的margin-top会在特定的情况下穿透父级。

规避方法：

a、给父级加边框

b、给父级加overflow:hidden;

2、兄弟关系的margin-top 和margin-bottom会叠压。

background  背景色

padding的复合写法：

background: color  image  position  repeat;

注意：div实际占地面积 = div的长度 + border + padding