面试5 基础内容--Bom、WAI、height:100%不生效、1px边框

最新推荐文章于 2024-05-22 10:58:50 发布

furfur-jiang

最新推荐文章于 2024-05-22 10:58:50 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

分类专栏：面试 JavaScript

本文链接：https://blog.csdn.net/weixin_44523860/article/details/110148643

面试同时被 2 个专栏收录

94 篇文章

订阅专栏

JavaScript

86 篇文章

订阅专栏

博客介绍了Bom相关知识，包括location、history、Navigator对象的属性和方法；阐述了web Quality无障碍WAI的概念及相关网页设计要求；还探讨了CSS中height:100%不生效和1px边框的问题，如设置height:100%需同时设置html和body高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bom

Bom是浏览器对象。

(1) location对象

location.href-- 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign – 设置当前文档的URL
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() – 重载当前页面

(2) history对象

history.go() – 前进或后退指定的页面数 history.go(num);
history.back() – 后退一页
history.forward() – 前进一页

(3) Navigator对象

navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

web Quality无障碍WAI

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。残障人士指的是那些带有残疾或者身体不健康的用户。

应使用 CSS 来设置显示网页上的字体尺寸。不要使用 font 标签。
请始终使用相对的尺寸值，不要使用固定的尺寸值。
请勿使用很小的默认字体尺寸
如果您为 web 元素定义了颜色，那么同样应当定义背景颜色。
如果您使用了alt 属性，那么浏览器至少可以显示或读出有关图像的描述。
- 有时候浏览器会无法显示图像。具体的原因有：
  
  用户关闭了图像显示
  
  浏览器是不支持图形显示的迷你浏览器
  
  浏览器是语音浏览器（供盲人和弱视人群使用）

CSS

设置height:100%,不生效？

同时设置html，body的高度

html,body{
    height:100%；
} 
或
body{
  height: 100vh; // 代表占屏幕100%
}

1px边框的问题

.row {
  position: relative;
  &:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border-bottom:1px solid #e6e6e6;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
  }
}