box-sizing
- border-box
- content-box(default)
width/min-width/max-width
- content box宽度
- 百分数相对于父元素的content box宽度
height/min-height/max-height
只有当父元素的高度不依赖于该元素时，百分比才生效
margin
属性具有重叠的特性，顺序很重要
border
- border-width
- border-style
- border-color
border三角形的实现
overflow
- overflow: scroll;
- overflow: hidden;
- overflow: auto;
块级元素与行级元素
- 行级margin-top、margin-bottom不起作用
- 行级padding-top、padding-bottom不影响布局
简单选择器的优先级
- level 0: *
- level 1: 标签选择器、伪元素
- level 2: 类、伪类、属性
- level 3: id
- level 4: 内联
- level 5: !important
渲染时的规则
找出匹配到该属性的所有声明
根据规则，优先级从低到高
- 浏览器预设
- 用户设置
- 网页样式
- 含有!important的网页样式
- 含有!important的用户设置样式
同一来源，按特异度来排序
特异度一样，按照书写顺序，后面的优先级较高
继承
显示继承
值
- 关键字：box-sizing: inherit;
- 字符串：content: ‘abc’;
- url：background: url(/resources/logo.jpg);
- 长度：font-size: 1em;
- 百分数：width: 100%;
- 整数：z-index: 1;
- 浮点数：line-height: 1.5;
- 颜色：color: rgba(255, 255, 255, .4);
- 时间：transition-duration: 0.3s
- 角度：transform: rorateX(deg)
长度单位
绝对单位
- px像素
- in英寸
- cm厘米
相对单位
- em：相对于该元素的一个font-size
- rem：相对于html元素的font-size
- vh: 相对于视口的高度1%
- vmin：vh和vw中的较小者
颜色
- 关键字
- 16进制
- rgb
- rgba
- hsl
- hsla
响应式图片
- 大图随容器自动缩放，保持宽高比
- max-width：100%;
背景图片
- background-size: cover
- background-size: contain
图片保持宽高比
字体设置
- em
- rem
- vh
- calc
选择器
- 通配选择器
- id选择器
- 类选择器
- 标签选择器
- 属性选择器
[for~="height"] { color: #f0f;}input[disabled] {}a[href^="#"] {}img[src$=".jpg"] {}[class*="icon-"] {}
- 伪类
- a:hover {…}
- a:active {…}
选择器组合
- EF
- E F
- E > F
- E, F
字体匹配
浏览器先获取一个系统字体列表
对于元素中每一个字符，使用font-family属性匹配字体
如果步骤2没匹配上，选择下一个可选的font-family执行步骤2
字体中没有该字符，继续对下一个可选的font-family执行步骤2
- 如果没匹配到字体，使用浏览器默认字体
通用字体族
- Serif衬线体
- Georgia、宋体
- Sans-Serif
- Arial、Helevetica、黑体、微软雅黑
- Cursive手写体
- 楷体
- Monospace等宽字体
- Consolas、Courier、中文字体
font-family书写
- 英文字体在前
- 最后添加通用字体族
em
- 一般相对于元素的font-size计算
- 用在font-size属相时，相对于父元素的font-size计算
line-height
- 行盒的高度
- 单位推荐用数字
font缩写
/ 斜体 粗细 大小/行高 字体族 /font: bold 14px/1.7 Helvetica, Sans-Serif;
Web Fonts
white-space
- 空白符处理
- normal/nowrap/pre
letter-spacing
- 字符间距
- 可继承
word-spacing
- 单词间距
- 可继承
word-break
- 单词在中间换行
- normal/break-all/keep-all
line-height
两行baseline之间的距离
vertical-align
- 定义盒子所处的行盒的垂直对齐关系
- 取值：baseline | sub | middle | super | text-top | text-bottom |…
- 百分比相对于元素自身的行高
- 默认baseline
strut
- 图片会按照baseline排列
- display: block;
- vertical-align: moddle;
lists style
- display: list-item会生成两个盒子
- Marker Box的内容和位置可以通过list-style系列属性指定
background
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
border-radius
- border-radius: 5px
- 可以指定四个方向
- 可以使用百分数
box-shadow
- x
- y
- 模糊程度
- 颜色
- 透明度
- 可以指定多个box-shadow
position
- static，非定位，默认值
- relative，相对定位（相对自身）
- absolute，绝对定位，相对非static祖先元素
- fixed，相对于视口
z-index堆叠层次
- 为定位元素指定其在z轴上的上下等级
- 用一个整数表示，数值越大，越靠近用户
- 初始值为auto，可以为负数，0，正数
堆叠上下文的生成
- Root元素
- z-index值不为auto的定位元素
- 设置了某些CSS3属性的元素，比如opacity、transform、animation等
绘制顺序
- 形成该上下文的border和background
- z-index为负值的子堆叠上下文
- 常规流内非浮动块级元素
- 非定位浮动元素
- 非定位行级元素
- z-index为0
- z-index为正数
transform: transloate() rotate() scale()
transition : all 3s ease 1s;
配置动画
animation子属性有：
animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。animation-duration
设置动画一个周期的时长。animation-iteration-count
设置动画重复次数， 可以指定infinite无限次重复动画animation-name
指定由@keyframes描述的关键帧名称。animation-play-state
允许暂停和恢复动画。animation-timing-function
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。animation-fill-mode
指定动画执行前后如何为目标元素应用样式。
使用keyframes定义动画序列
因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。
也可包含额外可选的关键帧，描述动画开始和结束之间的状态。