html结构和页面显示区域的不匹配问题

最新推荐文章于 2022-03-19 12:41:30 发布
最新推荐文章于 2022-03-19 12:41:30 发布
阅读量172 收藏
点赞数
分类专栏： 前端 # 前端问题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33390700/article/details/115786496
版权

文章目录

问题

html结构中，h1标签被header标签包裹，但是页面元素的显示情况是：h1标签的显示区域在header标签的区域外面。为什么会出现这种情况呢？

表现

点击header标签，选中的位置如图
点击h1标签，框选的区域如图

仲夏夜的开场
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 5960
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
【前端静态页面HTML】
Zhangyongqi77的博客
09-20 3333
HTML基础教程
html选择文件同步显示不出来,ajax同步，页面显示与html代码不一致
weixin_36211941的博客
06-03 224
1.ajax同步请求数据，然后把数据append到一个select控件，结果是，html已经改变，可是页面显示的却还是原来的下拉数据，但是奇怪的时选择出来的结果却是新的选项数据。代码如下：$.ajax({async: true,type: "post",dataType: "html",url: "/Handler.ashx",data: {"ID": ID,},success: function...
input 的value属性值，页面显示与html结构中不一致的问题
热门推荐
xjun0812的博客
12-19 1万+
input 的value属性值，页面显示与html结构中不一致。
解决 网页不兼容 问题
qq_39964319的博客
02-12 915
/** * 用WebView显示图片，可使用这个参数 设置网页布局类型： 1、LayoutAlgorithm.NARROW_COLUMNS ： * 适应内容大小 2、LayoutAlgorithm.SINGLE_COLUMN:适应屏幕，内容将自动缩放 */ webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm...
JSP页面与HTML页面显示效果不一致的问题的解决
Cheang_Bokgaai的博客
03-14 3251
近日在开发一个B/S项目时，我先用html写好了页面随后移植到JSP上时，发生了页面的显示效果不一致的问题。 详情见图： 这个为打开HTML的效果： 这个为打开JSP的效果： 可以清楚的看到显示明显不一样。 可以肯定的是代码没有问题。 经过几乎一行一行的对比，最后发现一个区别： <!DOCTYPE html>是声明HTML为HTML5的版本，浏览器便会按相...
CSS HTML实现后，却发现与屏幕宽度不一致，超出部分如何解决？
柠夏
04-05 4517
div宽度与屏幕的大小不一致，试了很多方法无法解决！ 咱们这次要实现的是宽度自适应，与屏幕大小一致，可是但整体的内容编程出来后却是”宽度超出很多，如下图：“ 相信大家都有遇到过这种类似情况，在我上网搜索了解决方法后，仍然不能解决我的超出宽度。 （第一种使用：width：auto; overflow：hidden） （第二种使用：宽度：100％;填料;箱上浆：边界框;） 下面是我的解决方案，首先使用一个meta标签屏幕的自适应宽度，然后加使用一个大div包裹住，使用CSS样式将屏幕宽度去掉,下面奉上代码图
实现写邮箱html页面,HTML写的第一个邮箱登陆界面
weixin_36476826的博客
06-03 2852
自己动手去写才会有收获，宁可模仿也不要全部复制粘贴不说了，直接上代码。CSS有注释，适合新手。LoginWinner记住密码忘记密码HTML界面的代码，只负责对数据进行封装。未链接CSS的界面效果如下：CSS部份自己百度的属性都加上注释了，适合新手。@charset "utf-8";/* CSS Document */html, body, div, span, applet, object, i...
前端web 登入页面模板 HTML+CSS.docx
02-15
这个“前端 web 登入页面模板 HTML+CSS”就是一个实例，展示了如何利用 HTML 结构和 CSS 样式来构建一个基本的登录界面。下面将详细介绍这个模板的实现原理。 首先，HTML 代码是页面的基础结构。在这个例子中，我们...
HTML城市三级联动与区域编码.zip
01-08
首先，HTML5是现代网页开发的基础，提供了更丰富的标签和API，使得构建结构化和交互性的网页更加容易。在这个案例中，HTML5可能用到了`<select>`元素来创建下拉菜单，每个菜单都与相应的省级、市级和区级数据相对应...
语义化的HTML结构怎么理解
12-13
语义化的HTML结构是网页设计的核心原则之一，它关乎到网页内容的逻辑组织和可访问性。HTML（超文本标记语言）的主要目的是提供文档的结构和...因此，理解和实践语义化的HTML结构是成为一名专业前端开发者的关键步骤。
学习混合或匹配：通过游戏混合或匹配来学习HTML，CSS和JS-WebDevSimplified
02-11
【标题】：“学习混合或匹配：通过游戏混合或匹配来学习HTML，CSS和JS-WebDevSimplified”是一个教育项目，旨在以互动游戏的形式帮助初学者掌握网页开发的基础知识，特别是HTML、CSS和JavaScript这三种核心技术。...
霸气的吃鸡页面HTML源码
11-17
在这个项目中，源码包含了HTML标签、属性和结构，它们共同构建了“吃鸡”页面的布局和视觉效果。例如，可能使用`<header>`定义头部区域，`<nav>`创建导航栏，`<section>`和`<article>`组织主体内容，而`<footer>`则...
界面空白，报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)
瑞萌萌会跳折翼舞的博客
12-17 8344
【特征】界面空白 【报错】Uncaught TypeError: Cannot read properties of undefined (reading ‘install’) 【原因】自动补全的语句（带括号），以为差不多 【改正】
微信小程序（二）-- 项目实战
瑞萌萌会跳折翼舞的博客
03-19 7749
微信小程序-项目实战
微信小程序（一）
瑞萌萌会跳折翼舞的博客
01-22 6409
视频地址： https://www.bilibili.com/video/BV1nE41117BQ?from=search&seid=137118609700337857 AppID(小程序ID) wx65cecec8023d6b08 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ 基本的项目结构 9 样式WXSS 9.2 样式导入 9.3 选择器 特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆
【报错】 `node`命令启动项目失败，报错：“Unknown database ‘mydb’”
瑞萌萌会跳折翼舞的博客
12-11 2740
【报错】 node命令启动项目失败，报错：“Unknown database ‘mydb’” 【其他特征】 此时，查看phpStudy，显示“端口被占用”。 【解决方法】 开始-运行-cmd， 输入 netstat -ano， 看第一列，后面的就是端口,找到3306 ,记住对应的PID 然后打开任务管理器查看 -> 选择列 -> 勾上 PID(进程标识符) -> 确定 在任务管理器找到刚才的PID的进程，查看是什么程序占用了端口，把它关闭 再重新启动mysql就不会报端口被占用的错误了
Vue从入门到精通
瑞萌萌会跳折翼舞的博客
08-09 1612
1.邂逅Vue.js 1.1 认识Vue.js 1.1.1 为什么学习Vue.js 对原有的项目使用Vue进行重构。 新项目决定使用Vue的技术栈。 招聘前端的需求中，10个有8个都对Vue有或多或少的要求。 Vue.js目前是前端必备的一个技能。 1.1.2 简单认识一下Vue.js Vue(读音/vju:/，类似于view)，不要读错。 Vue是一个渐进式的框架，什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vu
HTML标签学习
瑞萌萌会跳折翼舞的博客
08-18 1191
1.基础标签 目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发。 1.1 排版标签 1.1.1 标题标签<h1>-<h6> 场景： 在新闻和文章的页面中，都离不开标题，用来突出显示文章主题。 代码： <h1>1级标签</h1> <h2>2级标签</h2> <h3>3级标签</h3> <h4>4级标签</h4> <h5>5级标签</h5> &l
好看的html页面代码
最新发布
07-05
将页面分为顶部导航栏、内容区域和底部信息栏等，通过合理的分区让用户更清晰地浏览页面。 其次，色彩搭配应该协调和谐，可以选择一些搭配良好的颜色组合，避免过于鲜艳或过于单调的颜色。根据页面主题选择合适的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值