CSS知识点汇总（第二篇）

边框属性

上边框：border-top    下边框：border-bottom

左边框：border-left    右边框：border-right

综合样式就是在所属边框的后面加上-style/-width/-color

边框样式（border-style）属性值

none:没有边框； dashed:边框为虚线；

solid:边框为单实线； dotted:边框为点线；

double:边框为双实线；

边框样式（border-style）遵循值复制原则：

border-style:solid ; 四边均为实线

border-style：solid dotted; 上下实线，左右点线

border-style：solid dotted dashed; 上实线，左右点线，下虚线

border-style:solid dashed dotted double ;上实线，右虚线，下点线，左双实线

边框样式（border-width）属性值

注意：在设置边框宽度时，必须同时设置边框样式，如果未设置样式或者样式为none,不论宽度为多少都无效。（常用取值单位为像素）

其中border-width的用法与border-style类似，透明色为transparent

综合设置边框样式

border-top/-bottom/-left /-right:所选边框的宽度 样式 颜色；

实例：border: 1px #F0C6C7 solid;

内边距属性（padding）

知识点概述：内边距指的是元素内容与边框之间的距离，也常常称为内填充。能调整内容在盒子中的显示位置。（与border类似）

上内边距：padding-top 下内边距：padding-bottom

左内边距：padding-left 右内边距：padding-right

四边内边距：padding

注意：

1、内边距不允许使用负值。

2、如果设置内外属性值为百分比，不论上下或左右的内外边距，都是相对于父元素宽度width的百分比，随父元素width的变化而变化，和高度height无关。

外边距属性(margin)

知识点概述：指元素边框与相邻元素之间的距离，可以拉开盒子与盒子之间的距离，合理地布局网页。

上外边距：margin-top 下外边距：margin-bottom

左外边距：margin-left 右外边距：margin-right

四边外边距：margin

内外边距的区别：margin可以取负值，padding不能取负值

块元素水平居中的方法

知识点概述：当对块元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中。

实例：margin:0 auto; /*利用margin实现块元素水平居中*/

margin:5px auto; /*利用margin实现块元素水平居中,并且上下拉开5像素边距*/

内外边距清除

知识点概述：为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。

*{
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
}

注意:如果没有明确定义标签的宽高时，内边距相比外边距的容错率更高。

盒子模型的总宽度与总高度总结

盒子总宽度=width+左右内边距之和+左右边框之和+左右外边距之和；

盒子总高度=height+上下内边距之和+上下边框之和+上下外边距之和；

设置背景颜色（background-color）

知识点概述：在css中，网页元素的背景颜色使用background-color属性来设置。

知识点补充：需要整个页面都设置背景颜色时可以对body设置背景颜色。

设置背景图像（ background-image）

知识点概述：在css中，可以将图像作为网页元素的背景，通过background-image属性实现。

例如：
body{
    background-image:url(图片路径);
}

注意：同时设置background-color和background-image时，图片会将颜色覆盖掉；

设置背景图像平铺（background-repeat）

知识点概述：默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果不希望背景图像平铺，或只沿一个方向平铺，可以通过background-repeat属性来控制。

平铺属性值：

repeat:沿水平和竖直两个方向平铺（默认值）；

no-repeat:不平铺（图像位于元素的左上角，只显示一次）；

repeat-x:只沿水平方向平铺；

repeat-y;只沿竖直方向平铺；

设置背景图像的位置（background-position）的参数

1、单位数值：设置图像左上角在元素中的坐标，例如：background:20px 30px;（意思是距左侧边框20px,距上方边框30像素）

2、预定义的关键字：水平方向（left,center,right）,垂直方向（top,center,bottom），例如：background: center;

3、百分比：

0% 0%（图像左上角与元素的左上角对齐）；

50% 50%（图像50% 50%中心点与元素50% 50% 的中心点对齐）；

20% 30%（图像20% 30%的中心点与元素20% 30%的点对齐）；

100% 100%（图像右下角与元素的右下角对齐，而不是图像充满元素）；

例如：background: 0% 0%；

设置背景图像固定（background-attachment）

参数设置：

scroll:图像随页面元素一起滚动（默认值）。

fixed:图像固定到屏幕上，不随页面元素滚动。

实例：

background-attachment：scroll；
background-attachment：fixed;

设置元素背景(background)

知识点概述：CSS中的背景属性也是一个符合属性，可以将背景相关样式都综合定义在一个复合属性background中。

格式：background:背景色 url("图像") 平铺 位置 固定；(顺序任意，中间用空格隔开，不需要的样式可以省略)。

实例：

background:url("图像") no-repeat 50px 80px fixed;

元素类型

块元素：1、在界面中以区域块的形式出现；2、每个块元素通常都会独自占据一整行或多整行；3、可以对其设置宽度、高度、对齐等属性。（<div>  <h1> ~ <h6>  <p>）

行内元素：1、不占有独立的区域； 2、仅仅靠自身的字体大小和图像尺寸来支撑结构； 3、一般不可以设置宽度、高度、对齐等属性。(<strong> <em>)

区别：块元素无论宽度为多少都会独自占据一行；而行内元素一行可以占据多个。

注意：在行内元素中有几个特殊的标签如<img>和<input>,对它们可以设置宽高和对齐属性，有些资料会称它们为行内块元素。

< span>标签

1、< span>标记是一个行内标记；

2、< span>  与 < /span> 之间只能包含文本和各种行内标记；

3、< span> 标记常用于定义网页中某些特殊显示的文本，配合class属性使用；

4、当其他行内标记都不合适时，就可以使用< span>标记；

5、< span> 标签本身没有结构特征，只有在应用样式时，才会产生视觉上的变化；

6、< div> 标签可以内嵌< span>标签， 但是< span> 标签中不能嵌套< div>标签。

元素类型的转换（display）

属性值设置：

inline:此元素将显示为行内元素（行内元素默认的display属性值）；

block:此元素将显示为块元素（块元素默认的display属性值）；

inline-block：此元素将显示为行内块元素，可以将其设置宽高和对齐等属性，但是该元素不会独占一行；

none:此元素将被隐藏，不显示，也不占用页面空间。

颜色透明度(rgba & opacity)

知识点概述：通过引入RGBA模式和opacity属性，对背景与图片设置不透明度。

rgba(r,g,b,alpha); (其中r,g,b的取值范围为0~255之间任意整数，alpha取值范围是0~1任意数字)

例如：

p{background-color:rgba(255,0,0,5);}

opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是介于0~1之间的浮点数，0表示完全透明，1表示完全不透明，0.5表示半透明。

例如：

opacity: opacityValue（这是一个0~1之间的浮点数）;

总结：rgba只对背景颜色透明度有效，opacity对任意内容都有效

图片边框(border-image)

知识点概述：在网页设计中，我们还可以使用图片作为元素的边框，运用CSS3中的border-image属性就可以轻松实现这个效果。

图片边框属性值的设置参数：

border-image-source:指定图片的路径，url设置路径；

border-image-slice:指定边框图像顶部、右侧、底部、左侧内偏移量（分割线）。使用百分比数值；

border-image-width:指定边框宽度，使用像素；

border-image-outset:指定边框背景向盒子外部延伸的距离，设置边框图像与边框距离，取值为数字，表示倍率。

border-image-repeat:指定背景图片的平铺方式。stretch拉伸，repeat平铺，round自适应平铺（不完整的部分会被直接删除）。

border-image-source: url(图片位置);
border-image-slice:33%;
border-image-width:40px;
border-image-outset:1px;
border-image-repeat:repeat;
/*等同于下面一段*/
border-image:url(图片位置) 33%/40px/1px repeat;
/*需要注意的是涉及距离的值要用斜线隔开，其他值正常空格隔开即可*/

阴影（box-shadow）

知识点概述：改变阴影的投射方向以及添加多重阴影效果；

书写格式参考：box-shadow:h-shadow v-shadow blur spread color outset（或者是inset）;

blur:模糊半径

spread: 阴影面积。

注意：

1、实际使用时blur spread outset（或者是inset）都可以不写；

2、多个模糊值之间用逗号隔开

实例：

box-shadow:5px 5px 10px 2px #999 inset, -5px -5px 10px 2px #333 inset;

3、设置内边距阴影（inset）时， 一定要同时设置内边距（padding）,否则阴影不会显示。

线性渐变

知识点概述：线性渐变起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-aradient(参数值)；”样式可以实现线性渐变效果。

格式：

background-image:linear-gradient(渐变角度，颜色值1，颜色值2...,颜色值n);

linaer-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。

渐变角度：指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键字（to top/right/button/left）。

颜色值：用于设置渐变颜色，""颜色1"表示起始颜色，"颜色n表示结束颜色"，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用逗号隔开。

径向渐变

知识点概述：是网页中一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心开始，按照椭圆或圆形形状进行扩张渐变，运用CSS3中“background-image:radial-gradient(参数值)；”样式可以实现径向渐变效果。

格式：

background-image:radial-gradient(渐变形状 圆心位置，颜色值1，颜色值2...,颜色值n);

radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。

渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。（关键词为：circle:圆形， ellipse:椭圆）

圆心位置用于确定元素渐变的中心位置，使用"at"加上关键词或参数值来定义径向渐变的中心位置。

“颜色值1"表示起始颜色， "颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用中隔开。

重复渐变

知识点概述：在CSS3中，通过"background-image:repeating-linear-gradient (参数值) ;" 样式可以实现重复线性渐变的效果。

格式：

background-image.repeating-linear-gradient(渐变角度颜色值1.颜色值2..颜色值n);

圆角（border-radius）

知识点概述：：在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。

格式：

border-radius : 水平半径参数1 水平半径参数2 水平半径参数3 
水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

注意：

1、当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。

2、半径参数值可以用像素（10px）,也可以用百分比（10%），当各边百分比达到50%时，达到临界值，图片会变成圆形。

3、属性值的值复制原则：

●水平半径参数和垂直半径参数均可以设置1~4个参数值

●水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径均相同;

●水平半径参数和垂直半径参数设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上和左下圆角半径

●水平半径参数和垂直半径参数设置3个参数值时，第1个参数值代表左上圆角半径,第2个参数值代表右上和左下圆角半径;第3个参数值代表右下圆角半径。

(如果"垂直半径参数"省略，则会默认等于“水平半径参数的参数值)

●border-radius:50%;用于 设置圆形。

多背景图像

知识点概述：在CSS3中, 通过background-image. background-repeat. background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。

格式：

background-image:

url(images/caodi.png),

url(images/taiyang.png),

url(images/tiankong.png);

注意：最先写出来图片会显示在最前面，所以书写时需要注意顺序，防止图片覆盖。

知识补充：

CSS3之前: 一个容器只能填充一 张背景图片，如果重复设置，最后设置的背景图片将覆盖之前的背景。

CSS3通过background-image，background-repeat， background-position 等属性的值来实现多重背景图像效果，各属性值之间用逗号隔开。

实例：

.off{
			width: 604px;
			height: 227px;
			background-image:url("../../../Documents/muxishiye/04.jpg"),
				url("../../../Documents/muxishiye/05.jpg"),
				url("../../../Documents/muxishiye/06.jpg");
			background-position: left,center,right;
			border-radius:0px 0px 35px 35px;
			background-repeat: no-repeat;
		}