CSS学习笔记

css全称

cascading style sheets

样式表的组成

规则

选择器+声明块

声明

CSS合法的属性名+属性值

浏览器渲染样式表的顺序

从右往左

选择器

基本选择器及其扩展

• • . # 后代 组合（#test.pink）

• • ~ 分组（，结合符）

属性选择器

• 存在与值 属性选择器
• [attr] [attr="val"] [attr~="val"](只认空格)
• 子串值 属性选择器
• ^ $ * |(val val-)

伪类与伪元素选择器

• 链接伪类
• :link :visited :target(css实现选项卡)
• 动态伪类
• :hover :active(lvha)
• 表单伪类
• :disabled :enabled :checked(自定义单选按钮) :focus
• 结构性伪类
• ele:nth-child(index)
• ele:nth-of-type(index) 以元素为中心

区别：

• nth-child找到第index个子元素 这个子元素必须满足ele的规则
• nth-of-type找到底index个ele子元素
• nth-of-type以元素为中心

注意：
index可以是变量n（只能是n 0到正无穷）
odd：奇数
even：偶数 

• border-box：代表元素上设置的width和height表示的是border-box尺寸
• content-box：代表元素上设置的width和height表示的是content-box尺寸

层级

• 浮动提升半层，只有在浮动的情况下，才需要考虑元素分两层
• 定位元素提一层
• 相对定位会在文档流你有残留
• z-index为1怎么都会比a高;z-index为-1怎么都会比a低

包含块

初始包含块：和视窗大小位置尺寸一样的矩形
滚动系统滚动条会不会影响初始包含块的位置？
会

禁止系统滚动条
html,body{ height:100%; overflow:hidden }

怎么解决ie6下固定定位失效的问题？
用绝对定位来模拟固定定位

• 禁止系统滚动条
• 将滚动条作用在最外层的包裹器上或者在body上
• 因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置，所以一个按照初始包含块定位的元素就不会产生移动

背景

css2
background-color 平铺整个border-box

background-image 默认从padding-box开始绘制，从border-box开始剪裁
css3中有多背景，默认绘制时尺寸是自己的位图像素

background-repeat
控制平铺与否

background-position
控制背景图片在背景区域中的位置

px
百分比
参照于背景区域减去背景图片的位图像素值

background-attachment
scroll：默认值，背景图不会随着元素滚动条的滚动而滚动
fixed：背景图铺在视口中固定定位了

css3
background-origin
background-clip
background-size
图片是自适应的

如何实现一张图片的垂直水平居中

body:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; } img{ vertical-align: middle; }

过渡

transition-property
指定过渡动画的属性（并不是所有的属性都可以动画）

transition-duration
指定过渡动画的时间（0也要带单位）

transition-timing-function
指定过渡动画的形式（贝塞尔）

transition-delay
指定过渡动画的延迟

transition
第一个可以被解析成时间的值会赋给transition-duration

transtionend事件（DOM2）
在每个属性完成过渡时都会触发这个事件
当属性值的列表长度不一致时
跟时间有关的重复列表
transition-timing-function使用默认值

2D变换（transform）

rotate
旋转

translate
平移

skew
斜切

scale
缩放

变换组合!
顺序是从右往左的，变换的底层其实就是矩阵的运算

基点的变换
transform-origin

3D变换

perspective，灭点
景深的写法：
2种写法。一种css属性，一种是transform属性的一个变换函数（必须在第一位）

景深的作用：
构建3D舞台，决定用户的肉眼距离屏幕的水平距离！使3D变换的元素具有近大远小的感觉

景深和灭点的关系
景深越大，灭点越远，元素变形越小
景深越小，灭点越近，元素变形越大
景深基点
景深叠加

景深是一个不可继承属性，但他可以作用于所有的后代元素

transform-style
transform-style的作用
构建3D舞台，使3d舞台有层次感
transform-style是一个不可继承属性，他只作用于子元素

backface-visibility
隐藏元素背面
一个元素分两面，但并不意味元素有厚度。在一个状态下，元素只能展现自己的一面

css3动画基础

animation-name：代表关键帧的名字
关键帧：
@keyframes animiationName{ keyframes-selector{ css-style; } }

animation-duration：一个动画周期的时长
animation-timing-function：作用于一个关键帧周期而非整个动画周期
animation-delay：代表动画的延迟（这是一个动画外的属性）
animation-iteration-count：循环关键帧的次数！（只会管理动画内的属性，动画的延迟不会被循环）
animation-direction：改变关键帧的执行方向，还会影响animation-timing-function的形式
animation-fill-mode：管理所有动画外的状态！

什么是动画外的状态
from之前
animation-delay
to之后

值
none : 动画外的状态保持在动画之前的位置
backwards ：from之前的状态与from的状态保持一致
forwards ：to之后的状态与to的状态保持一致
both ：动画外的状态与from和to的状态保持一致
animation-play-state：管理动画的运行和停止

关键帧：
@keyframes animiationName{ keyframes-selector{ css-style; } }

keyframes-selector可以是关键帧form（0%）和to（100%）
可以是百分比
代表的是时间的百分比（时间点）

响应式布局核心 CSS3媒体查询选择器

@media 媒体类型 and(关键字) 带条件的媒体属性 and 带条件的媒体属性 { //规则 }

媒体类型
all
screen
print

媒体属性

width：浏览器的窗口尺寸
device-width：设备尺寸
device-pixel-ratio（必须加webkit前缀）：像素比
---以上三个媒体属性可加 min 和 max 前缀
min：最小值为谁
max：最大值为谁

横竖屏切换
orientation：landscape（横屏）
orientation：portrait （竖屏）

关键字
only：处理浏览器尽量问题
and：连接一条查询规则
,：连接多条查询规则
not：取反

规范

HTML
什么叫html5? 是一个强大的技术集（html5 ~ html+css+js）

CSS
什么是css3？
css3其实就是html5的一部分，而且现代前端中已经没有版本的概念，都是级别

JS
ECMASCRIPT
DOM
BOM（没有规范，window）

预处理器（less）

变量
@
变量的延迟加载
变量是块级作用域

嵌套
&:平级

混合
什么是混合？
将一系列的规则集引入另一个规则集中（ctrl c+ctrl v）
混合的定义在less规则有明确的指定，使用.的形式来定义
普通混合（编译到原生css中的）
不带输出的混合（加双括号）
带参数的混合
带默认值的混合
匹配模式
arguments

计算
加减乘除 计算的一方带单位就可以

继承