1、浏览器渲染原理
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSDOM)
- 将两棵树合并成一颗渲染树(reder tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Composite合成(根据层叠关系展示画面)
2、transition过渡
-
作用:添加中间帧
-
语法:transition: 属性名 时长 过渡方式 延迟时长
-
可以用逗号分隔两个不同属性,如:
transition:left 200ms,top 400ms;
-
可以使用all代表所有属性
-
过渡方式有:
linear
|ease
|ease-in
|ease-out
|ease-in-out
|cubic-bezier
|step-start
|step-end
|steps
-
注意:
- 并不是所有属性都能过渡,如:display:none =>block就不行,一般改成:visibility:hidden =>visible
- background可以过渡
- opacity可以过渡,但不推荐
3、animation写法
-
语法:animation: 时长| 过渡方式| 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名。
-
时长:1s或者1000ms
-
过渡方式:与transition的取值相同,如linear
-
次数:数字 或者 infinite
-
方向:
reverse
|alternate
|alternate-reverse
-
填充模式:
none
|forwards
|backwards
|both
-
是否暂停:
paused
|running
-
声明关键帧:
animation: xxx 1s
;- 写法一:
@keyframes xxx{ 0%{} 50%{} 100%{} }
- 写法二:
@keyframes xxx{ from{} to{} }
4、visibility和diplay的区别
-
visibility:hidden
:可以隐藏元素,但仍需占用与未隐藏之前一样的布局 -
display:none
:可以隐藏某个元素,且隐藏的元素不会占用任何空间. -
visibility:collapse
:用于table行、列、列组和行组,隐藏表格的行或列,并且不占用任何空间 (与将 display: none 用于表格的行/列上的效果相当)
5、适配手机端要加上
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
6、flex布局总结
- 主要使用属性:
- 自动换行:
flex-wrap:wrap;
- 左右对齐方式:
justify-content:center| space-between;
- 垂直方向对齐:
align-items: center
- 自动换行:
- 注意:
- flex布局下,
vertical-align
属性将失效 - 负margin的方法,在子元素和父元素中间再添加一个div
- 不要把width和height写死,除非特殊说明,用
min-width
|max-width
|min-height
|max-height
- flex布局下,
7、float布局总结
- 在父元素上加
.clearfix
.clearfix:after{
content:'';
display:block;
clear:both;
}
- float布局,不需要做响应式,因为手机上没有IE,这个布局是专门为IE准备的
- 发现图片的border下方有多余部分,加上:
vertical-align : top;
- 有时候border会干扰布局,可以使用outline
margin-left:auto;margin-right:auto;
>margin:0 auto;
- 什么时候用float布局:要求兼容IE浏览器的时候
8、CSS盒模型
-
box-sizing:content-box|border-box;
-
盒模型的标准回答:盒模型分为两种,分别是content box 和border box,二者的区别为:以宽度为例,content box的宽度包含的就只有content内容部分的宽、高,而border box的宽度包含 border的宽度、padding、content部分的宽度。
-
content-box width = 内容宽度,
-
border-box width = 内容宽度 + padding+border。
-
两个兄弟块元素之间的margin是合并的,只在上下合并,左右不合并
-
display:inline-block可以取消兄弟元素之间上下margin的上下合并
-
父元素和第一个子元素的margin也是合并的,加上
border-top/bottom
、padding-top/bottom
、overflow:hidden
属性后可以将二者分离,也就是父元素包含了子元素的margin在内。
9、CSS定位
- 如何是脱离内部文档流元素:
position: absolute/fixed;
,float:left;
- 层叠上下文(堆叠上下文)
- 每一个层叠上下文都是一个新的小世界(作用域)
- 这个小世界里面的
z-index
与外层无关 - 处于同一个小世界里的
z-index
才能比较
- 哪些不正交的属性可创建层叠上下文
z-index
值不为“auto”的相对/绝对定位position:fixed
的元素z-index
值不为“auto”的flex项目opacity
属性值小于1的元素transform
属性值不为“none”的元素- 其他:查看MDN
opacity:0.5
设置透明度,与background中的rgba中的透明度设置有什么区别:opacity 设置内容中的所有元素,background中的background只会涉及背景色- 负z-index也逃不出层叠上下文
- 主要的position属性:
relative
相对定位,升起来,但不脱离文档流absolute
绝对定位,定位基准是祖先里的非static元素fixed
固定定位,定位基准是viewport(存在问题)