为什么display: flex可以在<body>上工作，而不能在<html>标签上工作？

display: flex 是 CSS 中的一个属性，用于创建弹性布局。它可以在容器元素上应用，以控制其子元素的布局方式。

在 HTML 中，<body> 和 <html> 标签都可以作为容器元素。然而，<html> 标签是根元素，它的作用范围包含整个 HTML 文档，而 <body> 标签则是文档的主要内容区域。

display: flex 属性需要一个容器元素来定义弹性布局，而 <html> 标签并不是一个常规的容器元素，它的主要作用是为整个 HTML 文档提供一个根节点。因此，display: flex 在 <html> 标签上并不起作用。

相反，<body> 标签是一个常规的容器元素，它用于包含网页的主要内容。因此，display: flex 可以在 <body> 标签上工作，以定义弹性布局。

总结起来，display: flex 可以在 <body> 上工作，而不能在 <html> 标签上工作，是因为 <body> 是一个常规的容器元素，而 <html> 标签是根元素，不适合用于定义弹性布局。

腾讯云相关产品和产品介绍链接地址：

腾讯云主页：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain

相关·内容

HTML 元素标签语义化及使用场景

例如 p 标签就是代表文本，button 标签代表按钮，nav 标签代表导航等等。二、为什么要标签语义化？其实标签语义化是给浏览器和搜索引擎看的。...也就是说，DOM 采用的原生 HTML 元素能够被浏览器识别，并且可以预测其在各类平台上的工作方式。...例如用 div 实现的按钮和用原生 button 实现的按钮就有一些区别，在表单内 button 可以不用绑定 onclick 事件就可以提交表单内容，用 div 实现的按钮则不行。...另外在浏览器中按 tab 键盘可以在 button 之间来回切换，而 div 则不可以。还有 input 标签 type 属性，由于值的不同在手机上的表现也不同。...为什么搜索引擎关心？搜索引擎的爬虫根据标签来确定上下文、关键字的权重，有利于 SEO。如果你觉得以上两点理由都不能打动你，从而正确的使用语义化，没有关系，使用 div 一把梭也是可以的。

5923 0

你不应该依赖CSS 100vh，这就是原因!

如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。... Sign Up // CSS .layout { display: flex; flex-direction: column;...顺便说一下，它在安卓手机上甚至不能按预期工作。图片 为什么100vh问题会发生在移动设备上？我对这个问题进行了一番调查，发现了其中的原因。简短的答案是，浏览器的工具栏高度没有被考虑在内。...HTML类型声明问题页面上有声明，会使 fill-available 在 Chrome 浏览器上无法正常工作。...图片甚至不能在安卓浏览器上工作: 图片因此，为了解决这个问题，必须从页面中删除 doctype 声明。 2.

1.3K4 0

html+css学习笔记018-H5弹性盒模型

不用去想公司的发展不用去规划员工的工作计划不用去为业绩而烦恼然而当年纪越来越大阅历越来越广不得不去，或者说是被强行推上管理岗位当站到这个位置上时才发现有多难每周需要统筹员工工作安排...审核上周工作进度拓展新的渠道和平台统计销售数据处理遇到的各种困难多少次因为业绩不好而在周会、月会上抬不起头多少次深夜接到老总的一个‘ 突发奇想 ’的电话就要马上起来做方案稿多少次因为本部门员工与其他部门的矛盾冲突而头疼...DOCTYPE html> <!...：项目没有设置宽度的时候默认内容撑开 */ auto 内容撑开（默认） 0 不默认内容撑开 /* 复合写法 */ flex:1; /* flex-grow:1; flex-shrink:1; flex-basis...-- 块标签-->

7512 0

css display属性的值及用法_css clear作用

会让inline元素居中同时从上图可以看到两个inline标签之间出现了奇怪的间隔，改间隔的原因是div换行产生的换行空白，解决办法将两个inline标签写到一行 <div...CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。...所以在一般情况下我们也可以不写外面的table-row元素以及table元素。...justify-content: 属性定义了项目在主轴上的对齐方式。 align-items: 属性定义项目在交叉轴上如何对齐。

2.4K1 0

【海贼王航海日志：前端技术探索】CSS你了解多少？(三)

(黄色感叹号) 2 -> 元素的显示模式在 CSS 中，HTML 的标签的显示模式有很多。此处重点介绍两个：块级元素。行内元素。...margin: 10px 20px 30px 40px；上 10，右 20，下 30，左 40 3.4 -> 块级元素水平居中前提：指定宽度(如果不指定宽度，默认和父元素一致)。...为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式。使用通配符选择器即可完成这件事情。...把justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了。 test.html <!...任何一个html元素，都可以指定为display:flex完成弹性布局。 flex布局的本质是给父盒子添加display:flex属性，来控制子盒子的位置和排列方式。

841 0

详解清除浮动的多种方式（clearfix）

1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 3、...:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是display...CSS2.1 表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？...为什么display:table也能清除浮动，原理是什么？

1.5K6 0

【CSS】253- 从原型图到成品：步步深入 CSS 布局

在页面中的 HTML 元素基本上都可视为矩形。当然，有些元素有圆角，有些元素是圆形，或者是复杂的 SVG 形状等。通常你看不到页面上有一堆矩形。但你可以用矩形边框的模式去分析它们。...ul 标签代表无序列表（与有序列表或数字序号列表相对应），在本示例中，你可以用它来存放列表信息。我们无法用只言片语就说清楚 HTML 元素的语义，以及何种情况用何种标签。...你可以在容器上设置 display: flex; 来启用 Flex 布局。...下面咱们的第一段 CSS 代码，我们会把它放在 HTML 文档中 head 标签的 style 里： .tweet { display: flex; } 干得漂亮！...margin 和 padding 那…… 为什么用 margin 而不用 padding？为什么要设置在头像右侧，而不是文字内容左侧呢？

4.4K5 1

「资深前端工程师总结」前端面试知识点大全——html篇

Html5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型...header：页面主体上的头部， header 元素往往在一对 body 元素中。 footer：页面的底部（页脚），通常会标出网站的相关信息。...DOCTYPE声明新增的结构元素功能元素 1）在文档类型声明上不同： HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。...2）在结构语义上不同： HTML：没有体现结构语义化的标签，通常都是这样来命名的，这样表示网站的头部。 HTML5：在语义上却有很大的优势。...;margin: 0 auto; (display: table 在表现上类似 block 元素，但是宽度为内容宽。)

2K3 1

前端知识点总结（html+css）（上）

众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。...html篇 html应该是前端中最简单的知识点了，标签用着用着就熟记于心，在面试过程中对html的提问更是少之又少，话不多说，上干货。 1....（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...:0 right:0 中间margin:0 宽父元素display:flex;中间元素flex:1;（flex）表格布局:父元素display:table;width:100% 所有子元素...为什么要初始化css 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。

3361 1

VS第一天（一堆错误的错误示范）

自学VS第一天（目标用vs做个不low的简历）学习视频 https://www.bilibili.com/video/av48489320/?...DOCTYPE html> 个人简历 body... 博客链接完成效果 VS的汉化在插件栏找到Chinese (Simplified) Language Pack for Visual...能够在离线WEB上运行实时显示保存后的效果 One Dark Theme 是一个蛮好看的桌面主题 Bookmarks 标签

4983 0

CSS 入门指南：轻松掌握网页布局与样式设计的艺术

a:hover { background-color:yellow; } 示例：鼠标移动到标签时，背景变成黄色。盒模型(重点) 每个HTML元素都可以看作一个矩形盒子。...作用轴：用于调整子元素在交叉轴（通常是垂直方向）上的对齐。使用场景：容器中的子元素在单行/单列的情况下如何对齐。典型值： flex-start：子元素与交叉轴起点对齐。...flex-end：子元素与交叉轴终点对齐。 center：子元素在交叉轴居中对齐。 stretch：子元素在交叉轴上拉伸以填满容器（默认值）。...典型值： flex-start：行或列与交叉轴起点对齐。 flex-end：行或列与交叉轴终点对齐。 center：行或列在交叉轴上居中对齐。...示例： .container { display: flex; flex-wrap: wrap; /* 容器内容可以换行 */ height: 500px; align-content:

831 0

使用Html5多媒体实现微信语音功能

但是很多人感觉网页端语音离我们很遥远，这些更多是本地应用的工作，其实不然，随着Html5的发展，语音功能也渐渐成为前端必会的功能之一。 为什么要学会HTML5 的语音呢？...1.Html5 规范推进，手机的更新加速了操作系统更新，语音功能将会变成前端主要的工作之一，就像现在的canvas一样。...4.前端大部分人对语音功能有误解，以为语音功能就是HTML5 audio标签而已，事实上真的不是那么简单的"而已" 不墨迹那么多，咱们直接开发一个小项目啥都明明白儿白儿了，先看效果图业务逻辑非常简单...> css部分， *{ margin: 0; padding: 0; } ul li{ list-style: none;} html,body{ height...OK，是不是很简单，整个项目我说几个点吧： 1.切图结构合理是你后面做功能的前提，结构做的好，后面就省事，想想诸葛不亮吧，未出茅庐人家就把html5结构搭好了，有三个section. 2.原生js和ES6

2.8K3 0

完美解决footer固定在底部

> FOOTER CSS代码： *{ margin:0; padding:0; } html,body{ height: 100%; } #container...这时候只要在footer的父元素样式上增加（overflow : hidden；）即可；方法二：采用 flexbox布局模型思路：我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列..., （默认是行，也就是横向布局）；同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕。...：元素在同一容器中对可分配空间的分配比率，及扩展比率；（2）flex-shrink：如果空间不足，元素的收缩比率；（3）flex-basis：元素的伸缩基准值； *{ margin:0; padding...:0; } html,body{ height: 100%; } #container{ display: flex; flex-direction: column; height: 100%;

3.5K1 0

Flex快速上手

/垂直居中对齐这件事情上，而网上也是一大堆试图解释某一种对齐方法是正确的文章，搞得头昏脑胀。...终于，弹性布局flex来了，现在团队的开发，在布局上都采用了flex，毕竟不要把生命浪费在对齐这件事情上。...容器的属性和常用值容器可以通过设置display属性为flex / inline-flex（行内 flex）来指定其为 flex 布局。...1span> 2span> 3span> div> body> html> 可以在浏览器中看到...，第一个标签由于设置了flex-grow: 1，它自动占据了父容器除了剩下两个标签外的所有空间！

6392 0

使用这种技巧，可以大大地提高前端布局效率

在大屏幕上，宽度90%太大了，我们可以使用媒体查询来覆盖它。...我们直接在 wrapper 上添加 display: grid ？我不建议您这样做，因为这与关注点分离的概念背道而驰。 wrapper用于包裹其内容，仅此而已。...-- Content --> 不建议这样做，因为wrapper元素可以在另一页上使用，这可能会无意间破坏布局。...现在，你可能会问，为什么可以在一个页面上添加多个wrapper？在上面的HTML中，两个wrapper之间有一个元素。在这里使用!....site-header__wrapper { display: contents; } .site-header { display: flex; flex-wrap: wrap

3.9K2 0

前端面试题-HTML+CSS

而我出于种种原因既不考研也不培训，选择自学 java 和 web 相关的知识，也希望因此能在以后谋得一份心仪的工作。 HTML 1....DOCTYPE>声明必须是 HTML 文档的第一行，位于 html 标签之前 HTML5 不基于 SGML，所以不需要引用 DTD。在 HTML5 中<!...HTML5 的离线存储怎么使用，解释一下工作原理 HTML5 的离线存储 9. src 与 href 的区别区别：src 用于替代这个元素，而 href 用于建立这个标签与外部资源之间的关系 <link...由于@import 是 CSS2.1 提出的所以老的浏览器不支持，而 link 标签无此问题当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import...CSS 优化、提高性能的方法有哪些移除空的 css 规则（Remove empty rules）正确使用 display 的属性不滥用浮动、web 字体不声明过多的 font-size 不在选择符中使用

9993 0

实战中学习浏览器工作原理 — 排版与渲染

排版根据浏览器属性进行排版在我们开始编写我们的排版逻辑之前，我们是有必要了解一些概念的。我们的浏览器的排版选择用 flex 为例来实现排版算法，至于为什么选择这个排版呢？...那为什么我们选择了第二代来讲解这一部分呢？那是因为第二代的排版技术比较容易实现，而它的能力又不太差。既然我们只是实现一个模拟浏览器，也就让大家感受一下浏览器中的排版是怎么实现的即可。...在 flex 排版里面我们有纵排和横排两种，这两种排版方式都是受 flex 属性限制的，所以我们需要在宽高上做抽象排版里面有一个主轴，它是我们排版的时候主要的延伸方向（如果我们有多个元素，这些元素就会往这个主轴的方向排列...浏览器工作原理中，我们从 URL 发起 HTTP 请求，然后通过解析 HTTP 获得 HTML 代码。...最后我们在一张图片上把网页的内容画了出来。这个过程已经是一个浏览器从一个 URL 到呈现在页面上的一个整体过程了。通过这个实战，我们应该都对浏览器的整个工作原理有一个更深和感知的理解。

8634 1

10·灵魂前端工程师养成-CSS布局(上)

---- -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。...第三种布局：响应式布局，意思就是在PC上固定宽度，手机上不固定宽度，也就是一种混合布局 ---- 布局思路从大到小：先定下大局，一切以大橘为重......布局 float布局 ---- float布局步骤在子元素上加float: left和width 在父元素上.clearfix .container{ display: flex; border: 1px solid red; flex-direction: row; flex-wrap:...> /*临界点，在空间不够的时候，flex-shrink的2号多贡献一点*/ /*0 防止变瘦，默认是1*/ .container{ display: flex; border

4382 0

分享：12个CSS小技巧，让你的代码简洁高效

使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素...只要添加到 body 即可： body { line-height: 1; } 这样文本元素就可以很容易地从 body 继承。...所有一切都垂直居中要将所有元素垂直居中，太简单了： html, body { height: 100%; margin: 0;}body { -webkit-align-items: center...; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } 看，是不是很简单...优化显示文本有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing

8572 0

12 个 Css 小技巧

使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height...继承 box-sizing 表格单元格等宽用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add...只要添加到 body 即可： body { line-height: 1; } 这样文本元素就可以很容易地从 body 继承。...center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;...优化显示文本有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing

1.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云