-
CSS中用border-radius:50%可使等宽高等尺寸元素呈正圆;SVG通过<circle>标签以cx、cy、r精确绘圆,缩放无损;Canvas则用arc()方法配合fill()/stroke()动态绘圆。
-
TypeScript是JavaScript的超集,通过可选静态类型系统在开发阶段检查类型错误。它支持渐进式采用、JSDoc注释,并提升智能提示、重构安全性和接口文档化能力。
-
box-sizing:content-box是CSS默认盒模型,width和height仅包含内容区域,不包括padding和border,设置后元素总宽为width+padding+border;常用于需精确控制内容尺寸、兼容第三方组件或配合JS尺寸计算的场景;实际开发中无需特别声明,除非全局被修改。
-
优先使用const,需重赋值时用let,避免var;const和let具备块级作用域且不提升,var仅函数作用域且存在变量提升,易导致泄露与闭包问题。
-
CustomElements和ShadowDOM结合实现高度封装的自定义组件,通过定义标签、隔离样式、监听属性变化,支持内容分发与事件代理,可在任何现代浏览器中构建可复用、无框架依赖的UI组件。
-
RxJS是JavaScript中处理异步数据流的响应式编程库,基于观察者模式实现。它通过Observable表示数据流源,Observer监听数据变化,Subscription管理订阅关系,Operators进行流转换。示例中利用fromEvent、debounceTime和switchMap实现搜索防抖与请求合并,有效避免频繁调用接口。同时强调需手动unsubscribe防止内存泄漏,尤其在组件销毁时确保资源释放。掌握RxJS可提升异步逻辑的可读性与维护性。
-
JavaScript服务端渲染(SSR)指服务器执行JS生成完整HTML再返回浏览器,Next.js通过getServerSideProps实现,提升首屏速度、SEO和弱网体验,但需权衡实时性与服务器负载。
-
is属性是WebComponents规范中用于定义自定义内置元素的关键特性,它允许开发者将自定义元素作为现有HTML原生元素的扩展。1.它使自定义组件继承原生元素的语义、行为和可访问性;2.支持渐进式增强,无需从头构建“假”元素;3.提升可访问性和表单交互能力,如屏幕阅读器识别和表单提交支持;4.常用于按钮、输入框、列表等需交互或内容承载的元素;5.现代浏览器支持良好,IE需polyfill兼容。
-
<p>、<h1>–<h6>、<dt>不能嵌套块级元素如<div><ul><section>;不可互相嵌套;<li>可嵌套任意流内容。浏览器会自动纠错非法嵌套,导致DOM结构与预期不符。
-
图片响应式居中需先设display:block再用margin:0auto,或用父容器display:flex+justify-content:center;同时配max-width:100%、height:auto及正确viewport声明。
-
小屏破版的核心解法是采用width:100%+max-width+box-sizing:border-box组合:百分比宽度实现弹性缩放,max-width限定最大宽度防止过度拉伸,box-sizing:border-box确保padding/border不撑宽容器。
-
使用column-count和gap属性可轻松实现响应式多列布局,column-count设置列数如3列,gap控制列间距为20px,结合媒体查询在不同屏幕下调整列数,手机端单列、平板双列、桌面三列,提升可读性与美观度,适用于文本内容,现代浏览器支持良好,避免用于复杂交互元素。
-
HTML5中空格“失效”是因浏览器遵循规范合并空白符,非Chrome缺陷;解决需用white-space属性(如pre-wrap)或CSS间距,而非依赖多个空格或 。
-
HTML5搜索框提示可通过四种方式实现:一、用title属性最简;二、用data-tooltip加CSS自定义样式;三、用JavaScript动态控制显示隐藏;四、用aria-label和aria-describedby增强无障碍支持。
-
浮动曾用于div模拟表格的列排列,通过float:left实现横向布局,需清除浮动避免塌陷,但存在响应式差、对齐难等问题,现多被Flexbox和Grid取代。