1.BFC
参考:
学习 BFC (Block Formatting Context)
块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
触发条件:
display:inline-block/table(table-cell/table-caption等)/flex/inline-flex/flow-root
position:absolue/fixed
-
float
的值不为none
overflow!=visible
- 根元素或其它包含它的元素
-
column-span: all;
横跨多少列
作用:
- 去除浮动影响,防止父级高度塌陷,因为计算BFC高度时浮动元素也参与计算
- 阻止元素被浮动元素覆盖,因为BFC的区域不会与float的元素区域重叠
- 自适应两栏布局、多栏布局
- 阻止
margin
重叠:- 阻止子元素和父元素重叠(
margin-top
) - 阻止同一个
BFC
下相邻的子元素重叠(可给其中一个自元素设置BFC
)
- 阻止子元素和父元素重叠(
扩展:有哪些方法去除浮动,防止父级高度塌陷?
- 通过增加尾元素清除浮动:
:after/<br>{clear:both}
- 创建父级
BFC
- 父级设置高度
2.层叠上下文
元素提升为一个比较特殊的图层,在三维空间中 (z轴) 高出普通元素一等。
从上往下:
-
z-index
为正值 -
z-index:0
:没有设置z-index
的层叠上下文 - 行内元素
- 浮动元素
- 块级元素
-
z-index
为负值 background/border
3.flex布局
整体容器:
-
align-items
:center
|flex-start
|flex-end
|baseline
|stretch
-
justify-content
:center
|space-around
|space-between
|flex-start
|flex-end
-
flex-direction
:row
(默认水平方向)|column|row-reverse
|column-reverse
-
flex-wrap
:nowrap
(默认不换行)|wrap
|wrap-reverse
-
flex-flow
(flex-direction
和flex-wrap
简写):row nowrap
(默认) -
align-content
(多根轴线的对齐方式):center
|space-around
|space-between
|flex-start
|flex-end
|stretch
子元素项目:
-
flex:0 1 auto(默认值);
表示flex-grow:0(项目的放大比例);flex-shrink:1(项目的缩小比例);flex-basis:auto(项目占据的固定空间);
-
flex:auto
(1 1 auto) -
flex:none
(0 0 auto)
-
-
align-self
:auto
(默认值,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
)|center
|flex-start
|flex-end
|baseline
|stretch
-
order
(项目的排列顺序,数值越小排列越靠前)
参考链接:Flex 布局教程:语法篇
引申:grid布局
容器:
-
grid-template-columns
|grid-template-rows
- repeat:
grid-template-columns:repeat(3, 33.33%);
- auto-fill
- fr
- minmax()
- auto
- repeat:
-
row-gap(行间距)
|column-gap(列间距)
|gap(前两个的缩写)
-
grid-template-areas
:用于定义区域 -
grid-auto-flow
:row
(默认先行后列)|column
|row dense
|column dense
-
justify-items
(设置单元格内容的水平位置) |align-items
(设置单元格内容的垂直位置) |place-items
(前两者简写形式) -
justify-content
(整个内容区域在容器里面的水平位置)|align-content
(整个内容区域在容器里面的垂直位置)|place-content
(前两者简写形式) -
grid-auto-columns
|grid-auto-rows
浏览器自动创建的多余网格的列宽和行高
项目属性:
-
grid-column-start
:左边框所在的垂直网格线|grid-column-end
:右边框所在的垂直网格线 |grid-column
(前两者简写) -
grid-row-start
:上边框所在的水平网格线|grid-row-end
:下边框所在的水平网格线 |grid-row
前两者简写 -
grid-area
:指定项目放在哪一个区域 -
justify-self
(设置单元格内容的水平位置)|align-self
(设置单元格内容的垂直位置) |place-self
(前两者简写)
4.布局
水平居中布局:
position:absolute;left:50%;transform:translateX(-50%)
display:flex;justify-content:center
margin:0 auto
text-align:center
垂直居中:
line-height
display:flex;align-items:center
display:table-cell;vertical-align:middle;
position:absolute;top:50%;transform:translateY(-50%)
水平垂直居中:
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
display:table-cell;vertical-align:middle;
display:flex;align-items:center;justify-content:center;
5.如何实现左侧宽度固定,右侧宽度自适应的布局
- float+margin
- calc
- float+overflow
- flex
参考链接:两年工作经验成功面试阿里P6总结
6.display:inline-block
之间为什么有间隔
font-size:0
-
letter-spacing
:0 |负值 word-spacing
- 移除空格
- 使用
margin
负值
7.选择器优先级
选择器从右向左解析
!important
> id
选择器> class
选择器 >标签选择器 >* >继承>默认
8.link与@import的区别
link | @import | |
---|---|---|
功能 | 可以定义RSS,定义Rel等 | 只能加载CSS |
解析 | 页面会同步加载所引的css | 会等到页面加载完才被加载 |
兼容 | IE5以上才能使用 | |
是否动态引入 | 使用js动态引入 | 不可以 |
9.CSS动画
-
transition
:属性名默认为all 时长 曲线 延时 -
animation
:动画名字 动画时间 曲线(linear
|ease
|ease-in
|ease-out
|ease-in-out
|cubic-bezier
)延迟时间 次数 方向-
animation-fill-mode
(静止模式):forwards
(停止时,保留最后一帧) |backwards
(在animation-delay
所指定的一段时间内,在动画开始之前属性值) |both
两者皆可
-
-
transform
:- translate
- scale
- rotate
- skew
参考链接:中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上)
引申:动画的实现方案有哪些?有哪些动画优化的方案?
优化:
- 尽可能多的利用硬件能力,如使用3D变形来开启
GPU
加速。一个元素通过translate3d
右移500px
的动画流畅度会明显优于使用left
属性。原因是因为:- CSS动画属性会触发整个页面的重排
relayout
、重绘repaint
、重组recomposite
-
Paint通
常是其中最花费性能的,尽可能避免使用触发paint
的CSS动画属性,这也是为什么我们推荐在CSS动画中使用webkit-transform:ranslateX(3em)
的方案代替使用left: 3em
,因为left会额外触发layout
与paint
,而webkit-transform
只触发整个页面composite
- CSS动画属性会触发整个页面的重排
- 尽可能少的使用
box-shadow
与gradient
。box-shadow
与gradient
往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们 - 尽可能的让动画元素不在文档流中,以减少重排。比如使用定位
引申:css3
结束动画时会出现闪烁问题 - 如果没有特别规定动画结束后的状态的话,动画在结束后都会直接跳回到动画未执行时候的原始状态。解决方法:添加
animation-fill-mode:forwards
10.如何解决移动端 Retina 屏 1px 像素问题
- border-image
- background-image
- 多背景渐变
- box-shadow
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
- viewport +rem
- 伪元素+transform
11.已知如下代码,如何修改才能让图片宽度为 300px ?注意下面代码不可修改。
<img src="1.jpg" style="width:480px!important;”>
-
css
方法-
max-width:300px;
覆盖其样式; -
transform: scale(0.625);
按比例缩放图片; box-sizing: border-box;padding: 0 90px;
-
-
js
方法document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")
12.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
-
结构:
-
display:none
: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击 -
visibility: hidden
:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容 不可见,不能点击 -
opacity: 0
:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击
-
-
继承:
-
display: none
和opacity:0
:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。 -
visibility: hidden
:是继承属性,子孙节点消失由于继承了hidden
,通过设置visibility: visible
,可以让子孙节点显示。
-
-
性能:
-
display:none
: 修改元素会造成文档回流,读屏器不会读取display: none
元素内容,性能消耗较大 -
visibility:hidden
:修改元素只会造成本元素的重绘,性能消耗较少。读屏器读取visibility: hidden
元素内容 -
opacity: 0
:修改元素会造成重绘,性能消耗较少
-
联系:它们都能让元素不可见
网友评论