最后
四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~
祝大家都能收获大厂offer~
篇幅有限,仅展示部分内容
==========================================================================
脱标元素特点:
-
可以随意设置宽高
-
如果没有设置宽高,宽高由内容决定
-
不再受标准流(normal flow)的约束
-
不再严格区分块级元素、行内级元素
-
元素内部默认还是按照标准流
哪些元素是脱标元素:
-
浮动元素
-
float:left
-
float:right
-
浮动元素之间不能层叠
-
浮动元素不能跟行内级内容层叠
-
绝对定位元素
-
position:absolute
-
position:fixed
-
通过 z-index 可以设置元素的层叠顺序
块级元素(基本都是非替换)
-
div、p、pre、table、form、h1~h6
-
ul、li、ol、dl、dt、dd
-
header、footer、nav、section、article、aside
-
独占一行
-
可以随意设置宽高
-
如果不设置高度,高度默认由内容决定
行内级元素
-
替换元素
-
img、input、iframe、canvas、object
-
video、audio
-
可以跟其他行内级元素在同一行显示
-
可以随意设置宽高
-
非替换元素
-
span、strong、a、em、i
-
可以跟其他行内级元素在同一行显示
-
不可以随意设置宽高
-
如果不设置宽高,宽高默认由内容决定
inline-block
-
可以跟其他行内级元素在同一行显示
-
可以随意设置宽高
-
如果不设置宽高,宽高默认由内容决定
========================================================================
-
width、min-width、max-width
-
height、min-height、max-height
-
padding、padding-top、padding-right、padding-bottom、padding-left
-
margin、margin-top、margin-right、margin-bottom、margin-left
-
border、border-top、border-right、border-bottom、border-left
-
可以利用边框生成三角形
-
box-sizing
-
content-box
-
width 不包括 padding 和 border,height 不包括 padding 和 border
-
border-box
-
width = padding + border + 内容宽度
-
height = padding + border + 内容高度
-
box-shadow
-
box-shadow: 2px 5px 10px 7px rgba(0,0,0,.2) inset
2px:向右偏移2px
5px:向下偏移5px
10px:模糊半径(模糊度,这个值越大,越模糊)
7px:扩散半径(值越大,扩散范围越广)
inset:阴影显示到元素内部(如果不加 inset,看显示在元素外部)
-
overflow
-
visible
:溢出内容仍然可见 -
hidden
:溢出内容直接隐藏 -
scroll
:会一直显示水平、垂直方向的滚动条 -
auto
:会自动根据内容的溢出情况来决定是否显示滚动条 -
对于行内级非替换元素(span、strong、a 等)
-
margin-top、margin-bottom 不起作用
-
padding-top、padding-bottom、border-top、border-bottom 的效果比较特殊
-
对于块级元素(比如 div、p 等)
-
存在 margin-top、margin-bottom 传递的问题(传递给块级父元素)
-
存在 margin-top、margin-bottom 折叠问题(margin collapse)
-
包含块的宽度 = margin-left + margin-right + 块级元素实际占用的宽度
-
position:static
-
默认(非定位元素)
-
不脱离标准流
-
不能通过 left、right、top、bottom 调整位置
-
position:relative
-
相对定位(定位元素)
-
不脱离标准流
-
可以通过 left、right、top、bottom 调整位置
-
定位参照对象:自己原来的位置
-
position:absolute
-
绝对定位(定位元素,绝对定位元素)
-
脱离标准流
-
可以通过 left、right、top、bottom 调整位置
-
定位参照对象:
-
最邻近的定位祖先元素(从祖先元素中找到最邻近的定位元素)
-
如果找不到这样的祖先元素,那么就参照视口(viewport)
很多情况下,子元素都会参照父元素进行绝对定位,常用做法是:子绝父相
- 子元素:
position: absolute
- 父元素:
position: relative
-
position:fixed
-
固定定位(定位元素,绝对定位元素)
-
脱离标准流
-
可以通过 left、right、top、bottom 调整位置
-
定位参照对象:视口(viewport)
-
对于绝对定位元素来说
-
包含块的宽度 = left + right + margin-left + margin-right + 元素的实际占用宽度
-
包含块的高度 = top + bottom + margin-top + margin-bottom + 元素的实际占用高度
对于定位元素来说,有时候会利用 left、margin-left 联合使用来让一个元素水平居中:
-
left: 自己宽度的一半乘以负一
-
margin-left: 50%
-
color:前景色(文字颜色、边框颜色、文字装饰线颜色,
#fff
、#ffffff
、rgb(255,255,255)
、rgba(255,255,255,.5)
) -
text-align,设置元素的内容在元素中的水平位置
-
left
:左对齐 -
right
:右对齐 -
center
:居中 -
text-indent,一般用来设置首行文本的缩进
-
常见用法:
text-indent: 2em
-
刚好缩进 2 个文字
-
text-decoration,设置文字装饰线
-
underline
:下划线 -
line-through
:删除线(比如电商网站的原价) -
none
:去除删除线 -
text-overflow,设置隐藏掉的溢出文字内容的表现形式
-
clip
:溢出的内容直接裁剪 -
ellipsis
:溢出的内容用省略号显示
让一个元素永远只显示一行文字,并且溢出部分显示省略号:
white-space: nowrap; /* 永远只显示一行文字 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 隐藏掉的内容用省略号来表示 */
-
font-family:字体名称,可以设置多个字体名称,它们之间用逗号隔开
-
一般英文字体写在前面,中文字体写在后面
-
font-weight:设置轻重(粗细)
-
100~900
-
bold
:700 -
normal
:400 -
font-size:设置字体大小
-
font-size: 10px
-
font-size: 10%
-
使用父元素的 font-size 乘以 10%
-
继承父元素的 font-size 时,继承的是计算值,不是直接继承 10%
-
font-size: 0.5em
,使用父元素的 font-size 乘以50% -
width: 2em
,使用自己的font-size乘以2 -
line-height
-
line-height: 20px
-
line-height: 20%
,使用自己的 font-size 乘以 20% -
line-height: 2em
,使用自己的 font-size 乘以 2 -
line-height: 2
,使用自己的 font-size 乘以 2
最后
我可以将最近整理的前端面试题分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等,还在持续整理更新中,希望大家都能找到心仪的工作。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
篇幅有限,仅展示部分截图: