笔记：css1

css选择器

简单选择器:

*{

}

#id{

}

.类名{

}

标签名{

}

复合选择器:

后代选择器(以空格隔开)

选择器1 选择2 ...{

}

子代选择器(以大于隔开)

选择器1>选择2 ...{

}

并集(以逗号隔开)

选择器1,选择2,选择3...{

}

交集(没有分隔,所以标签选择器要放在最前面)

属性：(api 手册)

文本属性

字体属性

边框属性

列表属性

背景属性

盒子属性：padding, margin

(重点):浮动(脱离文档流)

定位(position)

相对定位: 没有脱离，相对于原来的位置偏移 left:50px

绝对定位 ：脱离, 相对于最近的已经定位的祖先元素，没有找到，初始渲染的窗口

固定定位 ：脱离, 相对于网页窗口

静态定位（无定位）

网页布局： 标准元素 + 浮动 来实现

css3

新增选择器

属性选择器

[属性='']

[属性*='']

[属性$='']

[属性^='']

结构性伪类选择器

E:nth-child(n)

first-child

last-child

E:nth-of-type(n)

only-child

使用字体图标：

方法1：

直接使用下载的class （icon-font.css）

方法2：

@font-face : 定义字体

border-radius: 圆角

transform: 变换

平移

旋转

缩放

拉伸

transition: 过渡

1. 并不是所有属性，可以有过渡效果(display)

2. 过渡效果，属性值 一定要有改变

css3 day02

1. 动画

第一步：定义动画

方法1：

@keyframes 动画名{

from{

}

to{

}

}

方法2：

@keyframes 动画名{

0%{

}

20%{

}

40%{

}

60%{

}

}

第二步：使用动画

animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停在终点 往返

【transition】: 过渡属性，可以在变化的属性上，过渡效果

2. 渐变: 生成图片，做为背景

线性渐变

linear-gradient( color1,color2.... ) 默认从上到下渐变

语法: linear-gradient(方向, color1,color2.... )

方向:

角色:

0deg: 从下到上

90deg : 从左到右

方位：

left: 从左到右

top：从上到下

注意： -webkit-linear-gradient 兼容性写法

范围：

颜色后 百分比

linear-gradient(方向, color1 范围,color2 范围.... )

径向渐变:

radial-gradient( color1,color2.... )

radial-gradient(形状 at 指定圆心位置, color1 范围,color2 范围.... )

如： background-image: radial-gradient(circle at center center,red 20%,green,blue);

3. box-sizing 计算盒子尺寸的方式

content-box: 默认值 , 表示css中设置的宽高为内容的宽高

border-box : 表示css中设置的宽高 = 内容宽/高 + padding左右/上下 + border 左右/ 上下

4. background-size: 设置背景的大小

设置px

设置百分比

auto:默认值

cover : 覆盖，等比缩放

contain: 包含，整个图片都要显示 , 等比缩放

5. calc

利用公式计算，比如calc(25% - 2px)

calc里面可以进行加减乘除计算

注意：

1、乘除是倍数，比如calc（100px * 2）

2、加减要注意空格，加减前后都需要加空格，比如calc（100px + 2px）