刷面试题
刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。
- 盒子总宽度 = width + padding + border + margin;
- 盒子总高度 = height + padding + border + margin
也就是,width/height 只是内容高度,不包含 padding 和 border值
IE盒模型:
- 盒子总宽度 = width + margin;
- 盒子总高度 = height + margin;
也就是,width/height 包含了 padding和 border值
可以通过 box-sizing 来改变元素的盒模型:
- box-sizing: content-box :标准盒模型(默认值)。
- box-sizing: border-box :IE(替代)盒模型。
CSS3新增特性
- 新增CSS选择器、伪类
- 特效:text-shadow、box-shadow
- 线性渐变: gradient
- 旋转过渡:transform、transtion
- 动画: animation
- 圆角: border-radius
CSS选择器和优先级
选择器 | 权重 |
---|---|
id选择器 #id | 100 |
类选择器 .classname | 10 |
属性选择器 div[class=“foo”] | 10 |
伪类选择器 div::last-child | 10 |
标签选择器 div | 1 |
伪元素选择器 div:after | 1 |
兄弟选择器 div+span | 0 |
子选择器 ui>li | 0 |
后代选择器 div span | 0 |
通配符选择器 | 0 |
优先级:(递减)
- !important
- 内联样式
- ID选择器
- 类选择器/伪类选择器/属性选择器
- 标签选择器/伪元素选择器
- 关系选择器/通配符选择器
可继承属性和不可继承属性
继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性
可继承
- font-weight 字体系列属性
- caption-side 表格布局属性
- list-style 列表属性
- line-height 文本系列属性
- cursor 光标属性
- visibility 元素可见性
- …
不可继承
- margin、padding、border
- display
- background
- overflow
- width、height
- position
- …
em/px/rem/vh/vw区别
- px 固定像素单位,不能随其它元素的变化而变化,页面按精确像素展示
- em是相对于父节点字体的大小,会随着父元素变化而变化,如果自身定义了font-size按自身来计算
- rem是相对于html根元素font-size的值,它会随着html元素变化而变化
- vh.vw主要用于页面视口大小布局,根据窗口的宽度,分成100等份,100vw就表示满宽
回流(reflow)和重绘(repaint)的理解
概念:
- 回流:无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小),浏览器需要重新计算元素在视口内的几何属性,这个过程叫做回流。
- 重绘:当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制
触发时机:
- 当页面布局和几何信息发生变化的时候,就需要回流,如元素的位置发生变化等
- 触发回流一定会触发重绘,此外还有 颜色、文本方向、阴影的修改等
如何减少:
- 如果想设定元素的样式,通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
- 避免设置多项内联样式
- 避免使用 table 布局,table 中每个元素的大小以及内容的改动,都会导致整个 table 的重新计算
- 对于那些复杂的动画,对其设置 position: fixed/absolute,尽可能地使元素脱离文档流,从而减少对其他元素的影响
- 使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘
对BFC的理解
BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则:
- 块级元素会在垂直方向一个接一个的排列,和文档流的排列方式一致。
- 在 BFC 中上下相邻的两个容器的 margin 会重叠,创建新的 BFC 可以避免外边距重叠。
- 计算 BFC 的高度时,需要计算浮动元素的高度。
- BFC 区域不会与浮动的容器发生重叠。
- BFC 是独立的容器,容器内部元素不会影响外部元素。
- 每个元素的左 margin 值和容器的左 border 相接触。
BFC目的是形成一个相对于外界完全独立的空间,让内部的子元素不会影响到外部的元素
创建BFC条件
- 设置浮动:float有值并不为空
- 设置绝对定位: position(absolute、fixed)
- overfilow值为:hidden、auto、`scroll
- display值为:inline-block、table-cell、table-caption、flex等
BFC作用:
- 解决margin重叠问题:由于BFC是一个独立的区域,内部元素和外部元素互不影响,将两个元素变为BFC,就解决了margin重叠问题
- 创建自适应两栏布局:可以用来创建自适应两栏布局,左边宽高固定,右边宽度自适应。
- 解决高度塌陷问题:在子元素设置浮动后,父元素会发生高度的塌陷,也就是父元素的高度为0解决这个问题,只需要将父元素变成一个BFC。
水平垂直居中
- 利用绝对定位,子元素所有方向都为 0 ,将 margin 设置为 auto ,由于宽高固定,对应方向实现平分,该方法必须盒子有宽高。
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
height: 100px;
width: 100px;
}
- 利用绝对定位,设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置,然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 利用绝对定位,设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置,然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
}
- flex布局,该方法可以不定宽高。
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
- table布局,设置父元素为display:table-cell,子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
两栏布局
两栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在
实现思路:
- 使用 float 左浮左边栏
- 右边模块使用 margin-left 撑出内容块做内容展示
- 为父级元素添加BFC,防止下方元素飞到上方内容
<style>
.box{
overflow: hidden; 添加BFC
}
.left {
float: left;
width: 200px;
background-color: gray;
height: 400px;
}
.right {
margin-left: 210px;
background-color: lightgray;
height: 200px;
}
</style>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
- flex弹性布局, 为了让两个盒子高度自动,需要设置: align-items: flex-start
.box{
display: flex;
}
.left {
width: 100px;
}
.right {
flex: 1;
}
flex弹性布局
flex布局是CSS3新增的一种布局方式,能够根据不同屏幕尺寸的变化来自适应大小。
常用的容器属性:
- flex-direction属性决定主轴的方向(即项目的排列方向)。
- flex-wrap属性定义,如果一条轴线排不下,如何换行。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
容器成员属性如下:
- order:定义项目的排列顺序。数值越小,排列越靠前,默认为0
- flex-grow:定义项目发大比例,默认为0,即存在剩余空间,也不放大。
- flex-shrink:定义项目收缩比例,默认为1,即空间不足,也会进行缩小。
- flex-basis:定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。
- flex:是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,flex:1也表示flex: 1 1 auto。
- align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
grid网格布局
Grid 布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列。
擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系
容器属性:
- display:创建一个块级行内网格容器
- grid-template-columns 属性设置列宽,grid-template-rows 属性设置行高
- grid-row-gap 属性、grid-column-gap 属性分别设置行间距列间距。grid-gap 属性是两者的简写形式
- grid-template-areas:用于定义区域,一个区域由一个或者多个单元格组成
- grid-auto-flow:排列方式,默认为行
- justify-items 属性设置单元格内容的水平位置(左中右),align-items 属性设置单元格的垂直位置(上中下,place-items属性是align-items属性和justify-items属性的合并简写形式
- justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)
- grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高
项目属性:
- grid-column-start 属性:左边框所在的垂直网格线
- grid-column-end 属性:右边框所在的垂直网格线
- grid-row-start 属性:上边框所在的水平网格线
- grid-row-end 属性:下边框所在的水平网格线
- grid-area 属性指定项目放在哪一个区域
link和@import的区别
- link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS、rel连接属性等,标签引入的CSS被同时加载
- @import是CSS提供等语法规则,只有导入样式表带作用。引入的CSS将在页面加载完毕后被加载
隐藏元素方法
- display:none:元素在文档中不存在,不会占据位置。
- visibility: hidden:元素在文档中的位置还保留,仍然占据空间。
- opacity:0:将透明度设置为0。
- z-index:负值:直接将元素放置在最下层,利用其他元素来遮盖。
- position:absolute:将元素定位到可视区域以外。
- 设置height、width模型属性为0
CSS3动画有哪些
transition 实现渐变动画
属性如下:
- property:填写需要变化的css属性
- duration:完成过渡效果需要的时间单位(s或者ms)
- timing-function:完成效果的速度曲线
- delay: 动画效果的延迟触发时间
transform 转变动画
包含四个常用的功能:
- translate:位移
- scale:缩放
- rotate:旋转
- skew:倾斜
animation 实现自定义动画
响应式设计
响应式网站设计是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport
刷面试题
刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。