css部分笔记

css3{选择器；}有！Important作用最强

加了！important;常见浏览器都通用；不能被覆盖

元素选择器；

关系选择器：

多层级之间的控制：

属性选择器；

伪类选择器；

@pega：网页打印.

控制定位

Not（取相反）

伪对象选择器。

二属性

1{

1前景颜色；颜色透明（opciti）( rgba（四个值）)  颜色控制（单词）（16进制）（rgb）

2字体（大小【相对长度em与绝对长度px 和百分比1】）（颜色）（字体 @font-face   字体图标）（字重）（斜体）

}

三布局：

Display：

Float：

清除漂浮：clear 清除漂浮

或者bfc 漂浮脱离文档流

Position：定位

position: fixed;

固定定位

position: inherit;

继承父元素定位

绝对定位不占位置

Overflow,溢出

盒模型:

元素在页面占据位置

Translate:转换

none：

无转换

matrix(<number>,<number>,<number>,<number>,<number>,<number>)：

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate(<length>[, <length>])：

指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX(<length>)：

指定对象X轴（水平方向）的平移

translateY(<length>)：

指定对象Y轴（垂直方向）的平移

rotate(<angle>)：

指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义

scale(<number>[, <number>])：

指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scaleX(<number>)：

指定对象X轴的（水平方向）缩放

scaleY(<number>)：

指定对象Y轴的（垂直方向）缩放

skew(<angle> [, <angle>])：

指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewX(<angle>)：

指定对象X轴的（水平方向）扭曲

skewY(<angle>)：

指定对象Y轴的（垂直方向）扭曲

transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

默认值：50% 50%，效果等同于center center

适用于：所有块级元素及某些内联元素

继承性：无

取值：

<percentage>：

用百分比指定坐标值。可以为负值。

<length>：

用长度值指定坐标值。可以为负值。

left：

指定原点的横坐标为left

center①：

指定原点的横坐标为center

right：

指定原点的横坐标为right

top：

指定原点的纵坐标为top

center②：

指定原点的纵坐标为center

bottom：

指定原点的纵坐标为bottom

边框图片影响内部内容

居中效果:

{

过渡 Transition

Transition	无	复合属性。检索或设置对象变换时的过渡效果
transition-property	CSS3	无	检索或设置对象中的参与过渡的属性
transition-duration	CSS3	无	检索或设置对象过渡的持续时间
transition-timing-function	CSS3	无	检索或设置对象中过渡的类型
transition-delay	CSS3

} .

动画 Animation

Properties 属性	CSS Version 版本	Inherit From Parent 继承性	Description 简介
animation	CSS3	无	复合属性。检索或设置对象所应用的动画特效
animation-name	CSS3	无	检索或设置对象所应用的动画名称
animation-duration	CSS3	无	检索或设置对象动画的持续时间
animation-timing-function	CSS3	无	检索或设置对象动画的过渡类型
animation-delay	CSS3	无	检索或设置对象动画延迟的时间
animation-iteration-count	CSS3	无	检索或设置对象动画的循环次数
animation-direction	CSS3	无	检索或设置对象动画在循环中是否反向运动
animation-play-state	CSS3	无	检索或设置对象动画的状态
animation-fill-mode	CSS3	无	检索或设置对象动画时间之外的状态

媒体查询:

`屏幕`

Media=” screen and (max- 600px)”

@media

取值：

Hack：

浏览器：的兼容性。

Less:stylesheet/less”  

页面嵌套：多层级