css应知应会 第三集

1、渐变

1、什么是渐变

多种颜色平缓变化过渡的效果

2、渐变的核心

色标 ：表示颜色值 以及 颜色出现的位置

在一个渐变过程中允许出现多个色标

3、渐变的分类

1、线性渐变(linear-gradient)

2、径向渐变(radial-gradient)

3、重复线性渐变(repeating-linear-gradient)

4、重复径向渐变(repeating-radial-gradient)

4、渐变的语法

属性：background-image

取值：

1、线性渐变

background-image:linear-gradient();

2、径向渐变

background-image:radial-gradient();

3、重复线性渐变

background-image:repeating-linear-gradient();

4、重复径向渐变

background-image:repeating-radial-gradient();

详解：

1、线性渐变

background:linear-gradient(angle,color-point1,color-point2,...);

1、angle:表示渐变的方向 或 角度

1、可以取值为关键字

1、to top

从下向上填充所有的渐变色

2、to right

从左向右填充所有的渐变色

3、to bottom

从上向下填充所有的渐变色

4、to left

从右向左填充所有的渐变色

2、可以取值为具体的角度值

范围 0deg ~ 360deg

1、to top

对应 0deg

2、to right

对应 90deg

3、to bottom

对应 180deg

4、to left

对应 270deg

2、color-point :表示 色标

色标：颜色的值及其出现的位置

语法：将 颜色 以及 位置 中间用 空格隔开即可

1、red 0%

2、green 50%

3、blue 100px

background:linear-gradient(to top,blue 100px,red 200px)

4、background:linear-gradient(to top,red,green,blue);

2、径向渐变

background:radial-gradient([size at position,]color-point1,color-point2,...);

1、size at position

可以省略不写

size : 表示的是圆的半径

at : 关键字，在此处不能省略

position : 圆心位置

3、重复线型渐变

background:repeating-linear-gradient(to top,red 0%,green 50%);

5、浏览器兼容性问题

渐变是CSS3新特性

到目前位置，各款浏览器的较高的版本都已经支持渐变，对于不支持渐变的版本，可以尝试着添加浏览器的前缀，让其支持渐变。如果加了前缀还不支持的话，那么该浏览器则无法正常显示渐变了。

Google Chrome ：-webkit-

Mozilla Firefox : -moz-

Apple Safari : -webkit-

Opera Opera : -o-

浏览器前缀如何加？？？

1、如果浏览器不支持属性的话，则将前缀增加在属性名称前

animation: 值;

-webkit-animation:值;

-moz-animation:值;

-o-animation:值;

2、如果浏览器不支持属性值的话，则将前缀增加在属性值的前面

background:linear-gradient();

background:-webkit-linear-gradient();

background:-moz-linear-gradient();

bakcground:-o-linear-gradient();

2、文本格式化属性

1、字体

1、字体系列

属性：font-family

取值：以 , 隔开的字体值的列表

ex:

font-family:"微软雅黑",Arial,"华文彩云";

2、字体大小

属性：font-size

取值：px,pt,em,rem

ex:

font-size:12px;

注意：两个英文字符的宽度 等同于 一个中文字符

3、字体加粗

属性：font-weight

取值：

1、normal

非加粗显示

2、bold

加粗显示文本

3、value

400 ~ 900

400 ：normal

900 ：bold

4、字体样式

属性：font-style

取值：

1、normal

非斜体显示

2、italic

斜体显示

5、小型大写字母显示

Aa Cc Bb

作用：将小写字母变为大写，但是大小跟小写字母一样

属性：font-variant

取值：

1、normal

正常

2、small-caps

6、字体属性 - font

font:style variant weight size family;

注意：使用简写方式时，必须要设置font-family的值，否则无效

ex:

font:12px;

font:12px "宋体";

2、文本属性

1、文本颜色

属性：colo

取值：颜色值

2、文本排列

作用：控制文本，图像，行内块元素 在父元素中的水平排列方式

属性：text-align

取值：left/center/right/justify

3、文本修饰

属性：text-decoration

取值：

1、none ：无修饰

2、underline ：下划线

3、overline ：上划线

4、line-through ：删除线

4、行高

作用：一行数据所占的高度,如果行高高于文字高度的话，那么文字将在指定行高范围内垂直居中显示

属性：line-height

取值：px 或 当前字体的倍数-无单位的数字

ex:

div{

font-size:12px;

line-height:2;

}

5、首行文本缩进

作用：指定第一行的文本向右缩进多少距离

属性：text-indent

取值：缩进距离，以px为单位的数值

6、文本阴影

属性：text-shadow

取值：h-shadow v-shadow blur color;

3、表格

1、表格常用属性

1、边距属性 - 内边距(padding)

2、尺寸属性 - width ，height

3、边框属性 - borde

4、文本格式化属性

5、背景属性

6、垂直方向对齐

属性：vertical-align

取值：top / middle / bottom

2、表格特有属性

1、边框合并

属性：border-collapse

取值：

1、separate

默认值，即分离边框

2、collapse

边框合并

2、边框边距

作用：设置 相邻的两个单元格 或 表格之间的距离

属性：border-spacing

取值：

1、取1个数字

每个单元格之间的水平 和 垂直的间距是相同的

2、取2个数字

第一个数字表示水平间距

第二个数字表示垂直间距

注意：必须保证表格实在 分离边框(border-collapse:separate;) 模式下才能用该属性

3、标题位置

属性：caption-side

取值：

1、top

默认值，将标题放在表格之上

2、bottom

将标题放在表格之下

4、显示规则

1、作用

告诉浏览器如何布局一张表，指定表格的计算模式

2、语法

属性：table-layout

取值：

1、auto

自动，自动表格布局，默认布局方式，单元格的尺寸实际上是由内容来决定的

2、fixed

固定，固定表格布局，单元格的尺寸是以设定的值为准，不会通过内容而改变布局

3、自动表格布局 VS 固定表格布局

1、自动表格布局

1、单元格的大小会适应内容的大小

2、加载复杂表格时速度较慢(缺点)

3、灵活性较高(优点)

4、在不确定每列大小时优先使用

2、固定表格布局

1、单元格的大小由设定的值来决定的

2、加载时速度较快(优点)

3、灵活性太低(缺点)

4、在确定每列大小时使用

4、浮动

1、定位

所谓的定位指的就是页面元素在页面中的位置

2、定位的分类

1、普通流定位

2、浮动定位

3、相对定位

4、绝对定位

5、固定定位

3、定位 - 普通流定位

普通流定位，又称为 文档流定位 ，页面元素的默认定位方式

特点：

1、每个元素在页面中都会占据一定的空间

2、每个元素都是在其父元素中从左上角开始排列

3、每个块级元素在页面中独占一行，每个块级元素都是按照从上到下的方式排列的

4、多个行内元素会在一行中显示，显示不下再换行

问题：如何在页面中解决多个块级元素在一行内的显示问题 ????????

4、定位 - 浮动定位

1、解决的问题

多个块级元素在一行内的显示问题

2、什么是浮动定位 & 特点

将元素设置为浮动定位的话，那么将具备以下几个特点:

1、浮动元素会被排除在文档流之外，即脱离文档流，不占据页面空间，后续元素要上前补位

2、浮动元素会停靠在父元素的左边 或 右边 或 其他已浮动平级元素的边缘上

3、浮动只会在当前行内完成

3、浮动的语法

属性：float

取值：

1、none

默认值，即无任何浮动效果

2、left

左浮动，让元素停靠在父元素的左边 或 左侧已有的浮动元素的边缘上

3、right

右浮动，让元素停靠在父元素的右边 或 右侧已有的浮动元素的边缘上

4、浮动引发的特殊效果

1、元素一旦浮动起来之后，那么都将变成块级元素

块级：

1、允许修改尺寸

2、能够正常的显示 margin 和 padding 效果的