css属性样式整合

font-size 字体大小

常用色值：#000 黑色；#fff 白色；#ccc、#333、#2f2f2f、#666、#ddd 灰色；

rgb表示法：color:rgb(255,255,255);

rgba表示法：color:rgba(255,255,255,0.5)第四位值表示透明度，0完全透明，1不透明

网页默认的字体大小是16像素16px

浏览器支持的最小字体大小是12px，也就是设置小于12px，默认都会以12px大小来显示

font-weight 字体的粗细

font-weight:400;正常大小

font-weight:700;加粗

font-style字体样式

font-style: normal; 取消倾斜

font-style: italic; 倾斜

font-family字体类型

浏览器默认字体类型为“微软雅黑"

font-family: "Microsoft Yahei"; 微软雅黑

font-family: "SimSun"; 宋体

@font-face自定义字体

css文本属性

text-decoration属性

text-decoration：none; 去掉下划线

text-decoration: underline; 加上下划线

text-decoration: line-through; 删除线

text-decoration: wavy underline red 1px; 波浪线

text-indent:2em 首行缩进

line-height行高

line-height:主要用于垂直居中

复合用法

font：font-style font-weight font-size line-height font-family

text-align 行内内容水平位置

相对于父元素的相对位置，行内元素生效，块级元素不生效

word-spacing 只针对英文单词有效果汉字没效果

字体间距，word-spacing:50px;

letter-sapcing:50px; 中文间距

标准盒模型和怪异盒模型的转换

box-sizing: border-box; 怪异盒

box-sizing: content-box; 标准盒

display属性+背景属性+其他属性

一、display属性的作用

display 属性可以设置元素的内部和外部显示类型

元素外部显示类型

block 块级

块级元素的特点：

(1) 块级元素独占一行

(2) 块级元素能设置宽和高

(3) 块级元素在没有设置宽度的情况下，默认为父元素的宽

(4) p标签不能包裹p

inline-black 行内块

行内块元素的特点：

(1)<img> 、<video> 、<audio> 、表单元素以上元素本质叫：可替换元素

(2) 行内块元素在一行显示，占不下的时候，换行显示

(3) 相邻的行内块级元素之间会有空白间隙

(4) 行内块级元素在没有设置宽和高的情况下，默认为本身的长度

(5) 可设置宽和高

去掉行内块级元素之间的空白间隙

解决办法

给父元素添加font-size:0; 给子元素添加正常的文字大小font-size:16px;

给元素加上float；

图片之间的空隙，一张图图片的话，用display:block; 多张的话，用浮动float;

inline 行内

行内元素的特点：

(1) 行内元素在一行显示，站不下的时候，换行显示

(2) 宽和高对行内元素不起作用

(3) 行内元素中不能放块级元素，只能放行内元素或文本内容

(4) a标签中不能再放a标签，a标签中能放块级元素

元素的转换

display: block; 转换为块级元素

display: inline; 转为行内元素

display:inline-black; 转为行内块级元素

display:none; 和 visibility: hidden;

dispaly:none; 元素隐藏后，不占用页面位置，就当没出现过；

visibility:hidden; 元素隐藏后，占用页面位置，会保存位置空间；

二、背景属性background

1、背景图片 background-image

background-image: url()；

解决background-image平铺现象

background-repeat: repeat; (x,y轴均平铺)；

background-repeat: repeat-x; (x轴平铺)；

background-repeat: repeat-y; (y轴平铺)；

no-repeat; (不平铺)；

背景图片的位置background-position: 左边距离上边距离;

扩展（background-size:宽高; 控制图片的大小）；

左边距离就是与盒子左边的距离，上边距离同左；

百分比%，background-position: 20% 40%;

计算：左边距离：（盒子的宽+左右的padding-背景图的宽）*百分比；

上边距离：（盒子的高+上下的padding-背景图的高）*百分比；

位置也可以用负值；

关键字：background-position: center;left;right;top;bottom;

简写：background: red url() no-repeat center;

简写，做覆盖属性用；

2、精灵图

用负值，background-position: 图的位置；

在文本前面用个,然后把span改成，行内块级元素，display:inline-block; span就是图的位置；

3、背景固定位置：background-attachment

background-attachment: scroll; 默认值一个动一个不动；

background-attachment: fixed; 都不动；

background-attachment: local; 都动；

4、background-size背景图大小

background-size: contain; 让整个图片显示出来自适应大小；

background-size: cover; 让图片占满整个盒子；

5、线性渐变

默认的是从上往下渐变

指定方向

background-image: linear-gradient(to right/上下左右/左上右下都可以, red , blue, yellow, rgba(255, 1.5, 1.5, 0.5),black);

度数控制方向

顺时针，background-image: linear-gradient(45deg, red,green,blue);

百分比渐变

background-image: linear-gradient(red 0%, blue 30%,yellow 70%);

转换中心点：（red 10%,30%,blue 50%）;

径向渐变 background-image: radial-gradient();

形状(圆形)：background-image: radial-gradient(circle, red,blue);

渐变中心位置：background-image: radial-gradient(circle at 50px 50px, red,blue);

渐变的边缘形状与容器距离渐变中心最近的一边相切

三、其他属性

1.鼠标效果

2.外轮廓：outline:10px solid red;

3.overflow:hidden;