面试整理的干货给搬过来了!供大家参考!
link标签的属性
link标签的属性有以下几种:
- href:指定链接的目标URL。
- rel:指定链接与当前文档之间的关系。常见的取值有stylesheet(引入外部样式表)、icon(指定网站图标)、alternate(指定替代版本的文档)等。
- type:指定链接目标的MIME类型。对于样式表,通常使用text/css;对于图标,通常使用image/x-icon。
- media:指定链接的媒体类型。用于指定样式表适用的设备类型,如screen(屏幕)、print(打印机)等。
- crossorigin:指定是否允许跨域请求。可取值anonymous(允许匿名请求)或use-credentials(允许使用凭证请求)。
- integrity:指定链接资源的完整性校验值,用于验证资源是否被篡改。
- sizes:指定图标链接的尺寸。常用于指定网站图标在不同设备上的显示尺寸。
- as:指定资源的预期用途,用于优化页面加载性能。常用的取值有script(脚本文件)、image(图像文件)、font(字体文件)等。
画一条0.5px的线
- 采用meta viewport 不同设备不同效果
<meta name="viewport" content="width=device-width, initial-scale=0.5">
- 采用border-image的方式
创建一张1像素宽、0.5像素高的线条图像,例如使用以下代码创建一张PNG格式的线条图像:
.line类定义了一个实线边框,并使用border-image属性将线条图像设置为边框图片。其中,0 0 100% 0设置了边框图片的填充方式,stretch表示边框图片会被拉伸以填充边框区域。由于线条图像的高度只有0.5像素,因此需要将border-width属性设置为1像素,从而使边框的高度为0.5像素。
- 采用transform:scale(0.5)的方式
画一个三角形
|
两栏布局:左侧宽度固定,右侧宽度自适应布局
- 左盒子float:left,右盒子margin-left:左盒子宽度
- 左盒子float:left,右盒子overflow:hidden
- 左盒子float:left,右盒子display: flow-root(触发bfc)
- 父盒子display:flex,左盒子设置宽度,右盒子通过calc(100%-左盒子宽度)
- 父盒子display:flex,左盒子设置宽度,右盒子设置flex:1(意味着占满整个盒子减去其他盒子的宽度)
三栏布局:中间自适应
- 左盒子float:left,右盒子float:right,中间盒子calc()
- 使用flex布局,左右给固定宽度,中间使用felx:1分得剩余宽度
- 使用position定位,子盒子绝对定位,给定左右固定宽度,左边left为0,右边right为0,中间左右距离为左右盒子的宽度
多列自适应
一个hover怎么控制两个元素
js
数据类型检测方式
- typeof类型判断:
基本数据类型:null被判断为object,其他正确(直接在计算机底层基于数据类型的值(二进制)进行检测,object与null都是以000开始的二进制储存)、typeof NaN===’number’
引用数据类型:函数判断为function,数组、对象其他都显示为object
- instanceof
内部运行机制:判断原型链中能否找到该类型的原型
只判断引用数据类型
可测试一个对象在其原型链中是否存在一个构造
函数的prototype属性
- constructor
基本、引用数据都可判断
创建对象改变原型就不能判断数据类型
- Object.prototype.tostring.call()
使用Object对象的原型方法tostring判断数据类型
obj.toString()与Object.prototype.tostring.call()为啥结果不同?
toString是Object原型上的方法,Array、function作为Object的实例重写了toString方法,不同对象类型调用toString时,是调用重写后的toString,最后得到的是字符串类型。
手写getType函数,获取详细数据类型
function getType(x) {
const originType = Object.prototype.toString.call(x)
const spaceIndex = originType.indexOf(' ')
const type = originType.slice(spaceIndex + 1, -1)
return type.toLowerCase()
}
console.info(getType(new Date())) //date