• 关于 HTML布局 的搜索结果

问题

HTML5与CSS3如何显示一个日历的布局?

杨冬芳 2019-12-01 19:54:53 1363 浏览量 回答数 1

回答

是你理解错了。你混淆了自适应布局和响应式布局。显然,@PortWatcher 的回答也把两者混淆了,或者说是不全面。--------- 更新 -------起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880。后来随着显示器越来越多,以及笔记本的普及,这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局,大多指的就是宽度自适应布局。在这种布局下,出现了两派:百分比宽度布局流式布局题主说的是第一派,宽度使用百分比,文字使用 em。第二派的布局以 iGoogle 为代表(已经停止)。再后来,浏览器大战 时代,firefox、Oparo、Chrome …… 出现,结束了 IE 一统江湖的局面,N 年没有更新的 IE6 发布了新版本,以前已 IE 为标准的 CSS 向 W3C 标准趋近,随后各种针对浏览器的 css hack 技术出现。虽然浏览器这么多,但是响应式布局依然不是主流,人们还在使用 css hack 技术。注意我的用词——「不是主流」,虽然不是主流,不代表当时不被使用。比如一向超前的伟大的 Google。当时没有响应式布局这个词语,但是慢慢出现了一个词——渐进增强,新词的出现总是伴随的旧词一起出现。就好比 3G 出现之前,没人管自己的手机叫 2G,所以,3G 和 2G 两个词是一起出现的(技术上当然2G技术先出现)。同理,渐进增强出现后,另一个词「优雅降级」也随之出现了。词的意思可以自己看 wiki、Google,我只在这儿举一个例子,gmail 和 qqmail。他俩的宽度都是 100%,都是自适应。但是:qqmail 就是 css hack 的完美体现,你用任何一个浏览器,几乎可以看到同一个样子的邮箱,腾讯的前端工程师们用各种 css hack 技术来展示邮箱页面,为的是统一的用户体验。而 gmail 使用了渐进增强,你的浏览器越强,你看到的效果就越好,用户体验就越好。再后来,就是大家都熟知的 Google 发布了 android,于是互联网大战从 PC 打到了手机。还有 HTML5 标准的发布。手机虽然屏幕变小了,但是却提供了更丰富的功能。还记得以前用诺基亚上 QQ 的事儿吗?我们访问的是 3g.qq.com,当时我使用的是中兴的手机,访问 wap.qq.com,在后来的职能手机都是访问 m.qq.com。不禁有人问「真的需要为每个手机分别设计一个网页吗?」、「真的需要为手机和电脑设计不同的网页吗?」,解决方法当然有很多种,可以看看 css zen garden 相信做过前端的都看过这个网站,一个神奇的网站。最终的解决方案胜出者是响应式布局。响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。Google 第一次完成了从先驱到烈士。

a123456678 2019-12-02 02:21:12 0 浏览量 回答数 0

问题

这样一个布局如何用HTML5和CSS3来显示?

小旋风柴进 2019-12-01 19:46:35 924 浏览量 回答数 1

新用户福利专场,云服务器ECS低至102元/年

新用户专场,1核2G 102元/年起,2核4G 699.8元/年起

问题

Velocity布局祥解 : 配置报错 

kun坤 2020-06-03 16:15:33 5 浏览量 回答数 1

回答

BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。创建 BFC 的方式有: html 根元素float 浮动绝对定位overflow 不为 visiabledisplay 为表格布局或者弹性布局 BFC 主要的作用是: 清除浮动 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

九旬 2020-05-24 11:48:28 0 浏览量 回答数 0

回答

Flask-Admin Github存储库中有一个自定义布局的示例,即“自定义布局”。 在您的特定情况下,您需要删除` 基本布局模板文件的{{%block page_body%}`Jinja2块中的html部分。 在项目的templates / admin目录中创建一个menuless-layout.html文件,该文件扩展了内置的基本布局。复制并粘贴{%block page_body%} {%endblock%}块并删除` `部分。 {% import 'admin/layout.html' as layout with context -%} {% extends 'admin/base.html' %} {% block page_body %} <div class="container{%if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}"> <!-- Nav section removed --> {% block messages %} {{ layout.messages() }} {% endblock %} {# store the jinja2 context for form_rules rendering logic #} {% set render_ctx = h.resolve_ctx() %} {% block body %}{% endblock %} </div> {% endblock %} 然后指示Flask-Admin使用此模板作为基本布局: # Create admin with custom base template admin = admin.Admin(app, 'Example', base_template='admin/menuless-layout.html', template_mode='bootstrap3') 回答来源:stackoverflow

is大龙 2020-03-25 09:24:24 0 浏览量 回答数 0

问题

表格 HTML CSS JS 布局

杨冬芳 2019-12-01 19:54:28 1074 浏览量 回答数 1

问题

为什么 Button在布局的最下方,绑定的事件无法被触发,而在中间就可以触发Button所绑定的事件?

杨冬芳 2019-12-01 20:08:51 734 浏览量 回答数 1

回答

要为不同的屏幕尺寸和方向支持不同的布局,请为每个布局创建不同的文件夹和XML文件。有关如何操作的详细信息,请参见https://developer.android.com/training/multiscreen/screensizes#alternative-layouts和https://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources这个。 您可以使用这些技术(不仅是布局)为任何资源提供不同的值。

LiuWH 2020-01-15 11:49:32 0 浏览量 回答数 0

问题

如何快捷编写mail html

杨冬芳 2019-12-01 20:00:48 907 浏览量 回答数 1

问题

想问问两列布局中 左20% 右80% 为什么还能够换行? amazing

杨冬芳 2019-12-01 19:48:54 834 浏览量 回答数 1

问题

请求高手帮助实现聊天室页面布局 400 请求报错

kun坤 2020-05-30 13:56:44 7 浏览量 回答数 1

问题

请问钉钉微应用的HTML5界面布局有提供模板吗

luoch 2019-12-01 21:14:28 8465 浏览量 回答数 6

回答

在邮箱里可以看到有些邮件是纯文本的,有些邮件则布局很精美有图片有按钮,但是看他的源码都是用table布局的,觉得有些头疼,不知道有没有什么工具可视化操作,或关于mail html的学习资料,谢谢!2014年

杨冬芳 2019-12-02 02:49:25 0 浏览量 回答数 0

回答

您是否尝试过将WebView和ImageView放在绝对布局中?这应该让您指定图像的X / Y位置,并通过命令使其不断在Web视图上绘制。 编辑:检查绝对布局:http : //developer.android.com/guide/topics/ui/layout-objects.html#absolutelayout

LiuWH 2020-01-19 11:59:08 0 浏览量 回答数 0

回答

怎么说呢,HTML5推行的是语义化,如果你所指的HTML5不包含CSS3的话,用HTML5写的页面其实跟HTML4.0和XHTML1.0没什么区别,可能就是把常用的div标签换成了header、footer、aside、section、nav...(其实就是div,起码浏览器端是看不出什么区别的),而CSS3呢,例如它的表单验证,真正项目中你还是不会用的,因为它太简陋了,我们更倾向于使用现成的JQuery库或者其它库,当然也有好的一面,如:HTML5的音频、视频、画布...和CSS3的动画、过渡、2D与3D变形、渐变、文本的阴影和裁剪效果、多列布局、弹性布局...

杨冬芳 2019-12-02 02:55:13 0 浏览量 回答数 0

回答

讲真,你只贴html代码不贴css代码,真的看不出来好么!目测两个原因:1)bootstrap里设置了默认样式,那么你需要找出来并将它覆盖2)可能是设置了diplay:inline-block的原因,inline-block默认会产生一个间距,你可以设置font-size:0,或者改成浮动(float)布局,或者flex布局

杨冬芳 2019-12-02 02:41:14 0 浏览量 回答数 0

问题

css两栏布局,高度问题

a123456678 2019-12-01 19:27:20 666 浏览量 回答数 1

回答

创建一个包含模板间共享布局的模板,通常这样的模板包含: 页面头部、导航栏、脚部、内容展示区域。 Layout.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <title>Layout page</title> <script src="common-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section layout:fragment="content"> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p layout:fragment="custom-footer">Custom footer here</p> </footer> </body> </html> 注意事项: 1. html标签上附上命名空间 2. section与脚部p标签上使用layout:fragment属性 这些是布局中的插入候选槽点,通过匹配内容模板中片段进行替换。 创建一些内容模板: Content1.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{Layout}"> <head> <title>Content page 1</title> <script src="content-script.js"></script> </head> <body> <section layout:fragment="content"> <p>This is a paragraph from content page 1</p> </section> <footer> <p layout:fragment="custom-footer">This is some footer content from content page 1</p> </footer> </body> </html> html标签中的layout:decorate说明哪一个布局模板使用这个内容模板进行装饰。内容模板定义自身标题与脚本、content与custom-footer片段。custom-footer片段处于footer元素内部,这其实是不必要的,但是可能会是很方便的,如果想要做内容模板的静态模板,这是一开始使用Thymeleaf的原因之一。 在一个模板内片段名称必须唯一,否则可能会出现片段不匹配,各种各样的可笑事情会接踵而至。 不管如何,一旦告知Thymeleaf处理Content1.html,最终的页面会是这样子: <!DOCTYPE html> <html> <head> <title>Content page 1</title> <script src="common-script.js"></script> <script src="content-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section> <p>This is a paragraph from content page 1</p> </section> <footer> <p>My footer</p> <p>This is some footer content from content page 1</p> </footer> </body> </html> 内容模板装饰Layout.html,结果是布局的组合,加上内容模板的片段(两个模板的<head>元素,来自内容模板的<title>元素替换布局文件内的,所有的元素来自布局文件,但是由所有指定的内容模板进行替换) 想了解更多可以如何控制<head>元素合并,参看<head>元素合并一小节。 装饰进程重定向处理从内容模板至布局,将layout:fragment部分从内容模板中挑选出来,因为布局需要它们。正因如此,任何在layout:fragment之外的东西实际从未得到执行,这说明在内容模板中不能这样做: <div th:if="${user.admin}"> <div layout:fragment="content"> ... </div> </div> 如果布局模板想要’内容’片段,那么会得到那个片段,不顾任何所在条件,因为那些条件不会执行。 如果说只想用绝对最小HTML代码量替换装饰器脚部: Content2.html <p layout:decorate="~{Layout}" layout:fragment="custom-footer"> This is some footer text from content page 2. </p> 这就是全部所需的东西!<p>标签同时用作根元素与片段定义,生成一个像这样的页面: <!DOCTYPE html> <html> <head> <title>Layout page</title> <script src="common-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p> This is some footer text from content page 2. </p> </footer> </body> </html> 可以把布局看作母版,会得以填充或者被内容(子模板)覆盖,仅当内容会填充/覆盖父类。以这种方式,布局充当某种’默认’,内容充当这种默认之上的实现。 给布局传送数据 子模板向上给母版布局传送数据,在涉及到布局/装饰过程的任意元素上使用th:with/ data-th-with属性处理器,可以在任何地方layout:decorate/ data-layout-decorate 或者可以发现 layout:fragment/data-layout-fragment, 例如: 孩子/内容模板: <html layout:decorate="your-layout.html" th:with="greeting='Hello!'"> 1 父类/布局模板: <html> ... <p th:text="${greeting}"></p> <!-- You'll end up with "Hello!" in here --> 将来,或许会增加支持使用分片局部变量,很像Thymeleaf用于创建片段签名。 配置标题 鉴于布局方言自动用内容模板中所发现的重载布局<title>,可能会发现自己重复布局中发现的标题部分,尤其是想要创建面包屑或者在页面标题中保留页面名称。layout:title-pattern处理器可以免除重复布局标题的问题,通过使用一些特殊标记以想要标题如何出现的模式。 这是一个例子: Layout.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">My website</title> </head> ... </html> layout:title-pattern处理器采取简单字符串,识别两种特殊标记:$LAYOUT_TITLE与$CONTENT_TITLE。每种标记在结果页中会被各自相应的标题替换。所以,如果有下面的内容模板: Content.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="Layout"> <head> <title>My blog</title> </head> ... </html> 结果页会是这样: <!DOCTYPE html> <html> <head> <title>My website - My blog</title> </head> ... </html> 这对<title>元素内的静态/内联文本或者<title>元素上发现使用th:text的动态文本均有效。 上述例子中的模式在布局中指定,所以对所有使用布局的内容模板均适用。如果在内容模板中指定另一种标题模式,那么会覆盖布局中发现的那个,允许细粒度的控制标题的展现形式。 可重用模板 假如发现有一些HTML或者结构经常性地重复,想要做成自己的模板从不同地方插入以便减少代码重复。(模块化Thymeleaf?)这个的例子可能会是一个模态面板,由几个HTML元素与CSS类构成,在网页应用中产生一个新窗口的效果: Modal.html <!DOCTYPE html> <html> <body> <div id="modal-container" class="modal-container" style="display:none;"> <section id="modal" class="modal"> <header> <h1>My Modal</h1> <div id="close-modal" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="modal-content" class="modal-content"> <p>My modal content</p> </div> </section> </div> </body> </html> 会发现可以将一些东西转换成像头部、ID的变量,以便包含Modal.html的页面可以设定它们自己的名称/ID。继续尽可能泛型化编写模态代码,然而会遇到填充自己的模态框内容的问题,那是开始接触一些限制的地方。 一些页面使用单一消息的模态框,其他想要使用模态框容纳一些更复杂的东西比如接受用户输入的表单。模态框可能性变得无休无止,但是未支持想象,发现自己得不得将这段模态框代码拷贝到每一个模板中,每一次使用场合变化相应内容,重复同样的HTML代码维持同样的外观感受,打破了过程中的DRY原则。 主要妨碍适当重用的事情是无法将HTML元素传递至插入模板中。这正是layout:insert有用的地方。它运作起来完全像th:insert,但是通过指定与实现片段很像内容/布局实例,可以创建一个公共的结构,对插入它的模板使用场合作出响应。 这是一个更新的模态框模板,使用Thymeleaf与layout:fragment属性定义一个可替换的模态框内容部分以变得更加泛型化: Modal2.html Modal2.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <body layout:fragment="modal(modalId, modalHeader)"> <div th:id="${modalId} + '-container'" class="modal-container" style="display:none;"> <section th:id="${modalId}" class="modal"> <header> <h1 th:text="${modalHeader}">My Modal</h1> <div th:id="'close-' + ${modalId}" class="modal-close"> <a href="#close">Close</a> </div> </header> <div th:id="${modalId} + '-content'" class="modal-content"> <div layout:fragment="modal-content"> <p>My modal content</p> </div> </div> </section> </div> </body> </html> 现在可以插入这个模板,使用layout:insert处理器与无论怎样需要实现modal-content片段,通过在调用模板插入元素内创建同样名称的片段: Content.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> ... <div layout:insert="Modal2 :: modal(modalId='message', modalHeader='Message')" th:remove="tag"> <p layout:fragment="modal-content">Message goes here!</p> </div> ... </html> 就像内容/布局实例,插入模板layout:fragment会被匹配片段名称的元素替换掉。在这种场合下,Modal2.html的整个modal-content部分会被上述自定义段落替换掉。这是结果: <!DOCTYPE html> <html> ... <div id="message-container" class="modal-container" style="display:none;"> <section id="message" class="modal"> <header> <h1>Message</h1> <div id="close-message" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="message-content" class="modal-content"> <p>Message goes here!</p> </div> </section> </div> ... </html> 定义在模板内包含Modal2.html的自定义消息作为模态框内容的一部分。在插入模板上下文环境中的片段与用于内容/布局过程中的片段一样工作:如果片段未在模板中定义,那么它不会覆盖插入模板中的内容,使得在可重用版本中创建默认。

景凌凯 2020-04-29 21:11:25 0 浏览量 回答数 0

问题

移动端web页面,页面内容会随着系统键盘的隐藏而下滑,导致布局错乱

杨冬芳 2019-12-01 20:07:36 1236 浏览量 回答数 1

问题

第三章 – 布局,块和模板:报错

kun坤 2020-06-06 16:14:05 0 浏览量 回答数 1

问题

如何写出较好的css?

杨冬芳 2019-12-01 19:50:46 813 浏览量 回答数 1

回答

浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree)。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table布局的原因之一。 重绘 由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘,例如outline, visibility, color、background-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。 回流 回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。 <body> <div class="error"> <h4>我的组件</h4> <p><strong>错误:</strong>错误的描述…</p> <h5>错误纠正</h5> <ol> <li>第一步</li> <li>第二步</li> </ol> </div> </body> 在上面的HTML片段中,对该段落(p标签)回流将会引发强烈的回流,因为它是一个子节点。这也导致了祖先的回流(div.error和body – 视浏览器而定)。此外,h5和ol也会有简单的回流,因为其在DOM中在回流元素之后。大部分的回流将导致页面的重新渲染。 回流必定会发生重绘,重绘不一定会引发回流。 浏览器优化 现代浏览器大多都是通过队列机制来批量更新布局,浏览器会把修改操作放在队列中,至少一个浏览器刷新(即16.6ms)才会清空队列,但当你获取布局信息的时候,队列中可能有会影响这些属性或方法返回值的操作,即使没有,浏览器也会强制清空队列,触发回流与重绘来确保返回正确的值。 主要包括以下属性或方法: - offsetTop、offsetLeft、offsetWidth、offsetHeight - scrollTop、scrollLeft、scrollWidth、scrollHeight - clientTop、clientLeft、clientWidth、clientHeight - width、height - getComputedStyle() - getBoundingClientRect() 所以,我们应该避免频繁的使用上述的属性,他们都会强制渲染刷新队列。 减少重绘与回流 CSS 使用 transform 替代 top使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)避免使用table布局,可能很小的一个小改动会造成整个 table 的重新布局。尽可能在DOM树的最末端改变class,回流是不可避免的,但可以减少其影响。尽可能在DOM树的最末端改变class,可以限制了回流的范围,使其影响尽可能少的节点。 避免设置多层内联样式,CSS 选择符从右往左匹配查找,避免节点层级过多。 <div> <a> <span></span> </a> 对于第一种设置样式的方式来说,浏览器只需要找到页面中所有的 span 标签然后设置颜色,但是对于第二种设置样式的方式来说,浏览器首先需要找到所有的 span 标签,然后找到 span 标签上的 a 标签,最后再去找到 div 标签,然后给符合这种条件的 span 标签设置颜色,这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器,然后对于 HTML 来说也尽量少的添加无意义标签,保证层级扁平。 - 将动画效果应用到position属性为absolute或fixed的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流,同时,控制动画速度可以选择 requestAnimationFrame,详见探讨 requestAnimationFrame。 - 避免使用CSS表达式,可能会引发回流。 - 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点,例如will-change、video、iframe等标签,浏览器会自动将该节点变为图层。 - CSS3 硬件加速(GPU加速),使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性,比如background-color这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。 2. Javascript - 避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。 - 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。 - 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。 - 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

九旬 2020-05-24 11:22:47 0 浏览量 回答数 0

问题

.net写了html5的网站,怎么手机上浏览

云栖技术 2019-12-01 19:46:01 1245 浏览量 回答数 1

问题

圣杯布局中几个问题?求教

a123456678 2019-12-01 19:32:22 1073 浏览量 回答数 1

回答

Q1:浮动和定位本就属于CSS两大“定位”技术,浮动之后用绝对定位是什么鬼?一般来说浮动和定位是搭配使用的。举个例子,float可以用来布局,类似2列布局3列布局之类的,而定位则多用来实现布局内部视图模块的多样性,比如轮播图底部的轮播控制按钮。Q2:《CSS权威指南》浮动章节有详细记载。浮动元素的确脱离正常文档流,这里且不说BFC,像你这种浮动方式的确div1会在div2上面,但对于文本框而言,它会避开浮动的元素,也就是你说的div2里面内容会挤到下面,而不是正常被正常左浮动的div1覆盖。这是浏览器对标准的执行,建议多看一些基础书,当然最好是W3C的草案。Q3: clear属性木有bottom...在HTML中,每个元素都是一个相对独立的个体,这些元素按照语言习惯(一般是从左往右)排列,能放在一行的就不会换行,当一行实在放不下时默认会另起一行,所以一个浮动元素设置clear应该明确指明它的左边或右边不能有浮动元素(相当于有浮动元素的那一行已经满了,告诉浏览器从第二行开始渲染元素)所以clear的bottom值是没有必要存在的。存手打,个人意见,有错误欢迎指正。------10/14 更新 --------最近有了解一些关于z-index的知识,发现可以回答你q2的问题,z-index相当于在z轴对css视图的层次进行了描述。详情可以看这里这里只贴出你这个问题的分析-浏览器的部分绘制顺序:1 根元素的背景与边框2 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序堆叠3 浮动块元素4 常规流中的后代行内元素5 后代中的定位元素按照它们在 HTML 中出现的顺序堆叠所以浏览器先绘制浮动的div1,接着绘制常规流中的后代行内元素,也就是你这里面所说的div2/div3的内容(这个内容姑且认为是文本内容,也就是行内元素),对于div2/3的行内元素,因为已经被div1占据了位子,只能避开div1的内容进行内容的绘制(但是div2/3的背景是在div1绘制之前绘制的,所以和div1发生重叠,见顺序2和3)。不知你有没有听懂我的意思,总之对于浏览器来说,除了对水平面的元素进行放置计算外,对于z轴的渲染顺序也得明白,建议你多看多写写实验一下。有疑意欢迎提出。

杨冬芳 2019-12-02 02:34:13 0 浏览量 回答数 0

回答

题主的问题:“设置left:-250px,整个屏幕不会出现横向滚动条,整个屏幕是自适应的,要是设置right:-250px,整个屏幕就会出现滚动条,不再自适应了。这是为什么?”自适应是CSS的一种布局方式,不是指你说的“不可见”,有点不准确啊,O(∩_∩)O哈哈~默认情况下,浏览器进行页面布局基本过程是以浏览器可见区域为画布,左上角为(0,0)基础坐标,从左到右,从上到下从DOM的根节点开始画,题主描述的情况是有一部分内容超出了浏览器的可见区域,所以浏览器不绘制相应画面。可以设置html的方向html{direction:rtl;},这时候你就可以看到“设置left:-250px,整个屏幕会出现滚动条;设置right:-250px,整个屏幕不会出现滚动条”。参考:Web底层剖析,浏览器是如何工作的

杨冬芳 2019-12-02 02:53:28 0 浏览量 回答数 0

问题

手机网站设计尺寸及界面布局

zzzzllz11 2019-12-01 21:40:25 7810 浏览量 回答数 0

回答

有 js css html 基础么? 如果有相关基础可以直接对照开发文档进行初步尝试 如果没有 则需要学习 css3 js 和 html div布局

宁蔓 2020-03-09 15:26:45 0 浏览量 回答数 0

问题

下载的静态页面再用浏览器打开排版乱?

杨冬芳 2019-12-01 20:08:11 830 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 SQL审核 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 人工智能 阿里云云栖号 云栖号案例 云栖号直播