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;