HTML | html文档中html和body标签的默认尺寸是多少?

news2024/11/27 0:30:10

 

 新建一个空白的html文件,如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  
  </body>
</html>

我们来看一下,此时html文档中 html 元素 和 body 元素的默认尺寸(宽度和高度)是多少?

在chrome浏览器里面查看html的尺寸,发现尺寸为1920×8。此时,我们并没有给html元素设置任何宽高尺寸,由此可知,html元素默认的宽度是浏览器当前的宽度。但是这个高度8个像素是怎么来的呢?我们继续查看一下body的尺寸信息:

body元素的默认宽度是 1904像素,但是上下左右的margin为8像素。body元素的总宽度=左margin 8px+宽度1904px+右margin 8px=1920px,和html元素的宽度1920px一致。html元素的高度8px=body元素的上margin 8px。

所以,html文档中,html和bod标签,在不做任何设置的情况下,html根元素默认宽度为屏幕宽度,默认高度为8px(body元素的上margin 8px),body的默认宽度=屏幕宽度 - 左margin 8px - 右margin 8px。


 番外 

有的盆友会问,为什么我电脑是宽度1920的屏幕分辨率,但是在浏览器(chrome,IE等)中的宽度只有1536px  ——在新建的空白html文档里,查看如下:

其实,这是你电脑的显示设置问题,解决办法,如下:

在桌面右键 -> 显示设置,将缩放改为100%即可。 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/651146.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day56|动态规划16-编辑距离问题

583. 两个字符串的删除操作 明确dp数组的含义&#xff1a; dp[i][j] 以i-1为结尾的word1和以j-1为结尾的word2&#xff0c;为相同的最小操作次数递归函数&#xff1a; if word1[i-1] word1[j-1]: dp[i][j] dp[i-1][j-1] # 不需要删除&#xff0c;只看上一层的字符串即可 else…

阿里云如何帮助企业进行数据迁移和数据同步?有哪些应用案例?

阿里云如何帮助企业进行数据迁移和数据同步&#xff1f;有哪些应用案例&#xff1f; [本文由阿里云代理商[聚搜云www.4526.cn]撰写] 阿里云数据迁移与数据同步解决方案 阿里云为企业提供了一系列高效、安全并应对不同场景需求的数据迁移与同步服务。这些服务旨在最大范围减少企…

Seata学习 @GlobalTransactional注解的作用

Seata学习 GlobalTransactional注解的作用 1.自动配置类 SeataAutoConfiguration 引入 seata与SpringBoot的整合包后&#xff0c;基于SpringBoot的自动配置&#xff0c;会往Spring容器中自动添加 SeataAutoConfiguration 而 SeataAutoConfiguration 配置类又会往容器中添加be…

基于Java汽车客运站管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

TrafficRoute:一体化的DNS解析和流量调度套件

TrafficRoute是火山引擎推出的解析调度套件&#xff0c;它实现了“一体化”的解析和调度服务&#xff0c;覆盖「公网解析」、「私网解析」、「流量调度/容灾」等场景&#xff0c;提供高性能、高可用、精准、及时、安全和可定制的解析调度产品集。 TrafficRoute具备云解析 DNS、…

华为OD机试真题 JavaScript 实现【字符串通配符】【2022Q4 200分】

一、题目描述 问题描述&#xff1a;在计算机中&#xff0c;通配符一种特殊语法&#xff0c;广泛应用于文件搜索、数据库、正则表达式等领域。现要求各位实现字符串通配符的算法。 要求&#xff1a; 实现如下2个通配符&#xff1a; &#xff1a;匹配0个或以上的字符&#xf…

【一文解决】已安装CUDA与Pytorch但torch.cuda.is_available()为False

目录 问题描述总览&#xff1a;导致问题的原因可能1&#xff1a;CUDA版本与驱动程序不兼容可能2&#xff1a;CUDA库的路径设置存在问题可能3&#xff1a;PyTorch版本与CUDA版本不匹配可能4&#xff1a;编译问题可能5&#xff1a;软件包或库冲突写在最后 问题描述 已经安装CUDA…

2023 陕西省大学生网络安全技能大赛 --- 高职组 Crypto ezmath

文章目录 题目解题过程 题目 from Crypto.Util.number import * from secret import y,a,b flagbflag{} l len(flag) m1, m2 flag[: l // 2], flag[l // 2:]x bytes_to_long(m1) c bytes_to_long(m2)assert (x**21)*(y**21)-2*(xy)*(x*y1)gift-4*x*y 4*b**6-2*a**33*a*c …

JavaScript案例分享:让前端开发者抓狂的按钮

前言 我分享一个前端案例&#xff0c;代码来源我不确定&#xff0c;可能是我某个编程技术交流群的群友分享的。由于我设置了自动下载文件&#xff0c;今天在查看微信文件时偶然发现了这个案例&#xff0c;查看下载日期是6月7日&#xff0c;所以无法确定到底是哪个群友分享的。但…

618,你会入手哪些书?【文末送书】

好书分享 前沿技术人工智能半导体新一代通信与信息技术网络空间安全参与规则 一年一度的618又到啦&#xff01;今年的618就不要乱买啦&#xff0c;衣服买多了会被淘汰&#xff0c;电子产品买多了会过时&#xff0c;零食买多了会增肥&#xff0c;最后怎么看都不划算。可是如果你…

超强整理,性能测试-常用服务器性能指标分析总结,一篇概全...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 压测过程中&#…

Hive SQL DML

Hive SQL DML 本节所需数据集 数据集 提取码&#xff1a;rkun ⛵加载数据 Load 加载&#xff0c;装载将数据文件移动到与Hive表对应位置&#xff0c;移动时是纯复制&#xff0c;移动操作。纯复制移动指数据load加载到表中&#xff0c;hive不会对表中数据内容进行任何变换&…

Cache技术在星辰处理器中的应用

Cache技术在星辰处理器中的应用-修复MicroPython在MM32F5上启动慢的问题 文章目录 Cache技术在星辰处理器中的应用-修复MicroPython在MM32F5上启动慢的问题引言Cache的工作原理需要关闭DCache的情况鱼和熊掌都想要使用内存保护单元MPU使用内存隔离/同步指令 总结参考文献 引言 …

catkin cmake官方教程解读以及资料补充

这里写目录标题 cmakei下载cmake 官方教程教程1step1最低版本 报错报错2 vscode 路径没有配置好setting.json通过该方式打开的似乎是一个全局的文件&#xff0c;可以为本工作文件夹下设置一个本地的吗 报错3配置cmake工具链准确的流程报错4 cpp中main函数返回值问题结果 官方教…

虚拟机centos7无法正常启动:Generating“/run/initramfs/rdsosreport.txt“

一、问题描述 1.出现问题的原因 Centos 7 断电导致 &#xff0c;最近电脑老是自己蓝屏&#xff0c;然后重启电脑&#xff0c;一个月里断断续续可能有个3次左右&#xff0c;突然发现启动就这个问题&#xff0c;估计是虚拟机异常物理断电导致的系统磁盘出错了 2.具体的报错信息…

打开冒险岛提示丢失vcruntime140.dll的解决方法

今天准备打开冒险岛软件的时候&#xff0c;当打开我自己的冒险岛软件后&#xff0c;弹出了一个对话框&#xff0c;内容是&#xff1a;由于找不到vcruntime140_1.dll&#xff0c;无法继续执行代码。重新安装程序可能会解决此问题。 我很纳闷&#xff0c;前几天还好好着呢。于是…

【ARIMA-WOA-LSTM】合差分自回归移动平均方法-鲸鱼优化-长短期记忆神经网络研究(Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

vue新手入门实践教程

介绍vue运行环境的搭建、vue项目的初步构建与运行、使用element-ui组件构建页面内容、使用页面模块与路由设置等。基于此教程&#xff0c;可以初步实现一个静态网页&#xff0c;并对vue项目由一定理解。 1、基本环境安装 vue项目的编译运行依赖nodejs环境&#xff0c;故需要下…

使用rasterio计算tif文件中两点之间的物理实际距离

假设有一张含有地理坐标信息的tif格式的图片及其对应的jpg或者png格式的普通图片 如下图所示&#xff1a; 其中第一张为tif格式的地理信息图&#xff0c;第二张为按照一定比例下采样之后转换得到的普通jpg图片 如何计算jpg图片中任意两点之间的实际距离呢&#xff1f; 比如&a…

终于等到你:期待已久的CAD .NET 15 Crack

期待已久的CAD .NET 15 现已推出&#xff01;新包包括一个.NET 6 框架构建。目前&#xff0c;它仅与 Windows 兼容&#xff0c;但我们计划在未来的版本中添加对 Linux 的支持。 我们还进行了一系列更改以增强库的稳定性并改进其导入和导出功能。他们来了&#xff1a; 改进了 DW…