开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么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

相关搜索:android上的setRemoteDescription在SDP上失败，而SDP可以在浏览器之间工作。为什么？Pika可以在ubuntu上连接到RabbitMq，但不能在Centos上工作？React OnMouseDown事件不工作，而OnMouseUp工作正常。(在SVG元素上)为什么"scrollTop“功能在直播站点上不能正常工作，但在本地主机上可以正常工作？为什么'google.script.run‘不能在html body的'onload’标签中工作？为什么getCurrentInterruptionFilter BroadcastReceiver可以在快速设置中工作，而不能在设置中工作？为什么hangfire仪表板可以在开发中工作，而不能在部署中工作为什么ob_flush可以在apache localhost上工作，而不能在远程上工作？为什么setMenu(null)可以在Windows上运行，而不能在Linux上运行？为什么spark作业在zepplin上不能工作，而它们在使用pyspark shell时可以工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

在本篇文章里，我们将一起学习下如何使用 CSS checkbox hack 技术纯手工撸一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，同时又基于窗口大小进行水平和垂直之间进行样式切换。为了让大家更好理解本案例，我将和大家一起一步步的完成。

02

界面设计技法之布局

css布局之于页面就如同ECMAScript之于JS一般，细想一番，html就如同语文，css就如同数学，js呢，就是物理，有些扯远，这里就先不展开了。回到主题，从最开始的css到如今的sass(less),开发的效率确实变得越来越高效，但是可能有时候我们还是会对页面布局产生烦恼的情绪，比如:"咦？我想让它显示在这个部位，它一点都不听话啊"。很大原因在于我们可能没对css布局这块做一个系统的梳理~，偶然间发现了Learn CSS Layout，在此分享给大家，希望和大家共同提高，另外安利给大家一个如何写出更加优雅的html&&css代码的文章，使劲戳我!

01

我碰到的那些面试题html+css

http://www.sohu.com/a/330231789_120174705

02

给萌新HTML5 入门指南

HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员前端技术也成了必备技能之一，本篇文章的目的是为了帮助萌新的入门指导，也同时希望能为老鸟起到一定查漏补缺的作用，那么让我们开始吧。

04

可爱的rem

嗯，这种的样式的工作量超级大，因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过～～～

02

使用 CSS Checkbox Hack 技术制作一个手风琴组件

在本篇文章里，我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，基于窗口大小进行水平和垂直之间进行切换。为了让大家更好理解，我将和大家一起一步步的进行完成。

03

Flex快速上手

Flex之于 CSS3 就如Promise之于 ES6，都解决了开发者的痛点问题，大大提高了生产力。借助Flex，可以轻松实现栅栏布局、水平/垂直居中、自定义排列方向和顺序等等需求。

02

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

标签语义化就是让元素标签做适当的事情。例如 p 标签就是代表文本，button 标签代表按钮，nav 标签代表导航等等。

03

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

你不需要分别添加 line-height 到每个

，<h*>等。只要添加到 body 即可：

02

12 个 Css 小技巧

你不需要分别添加 line-height 到每个

，<h*>等。只要添加到 body 即可：

01

剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

02

实现HTML元素垂直居中的六种方法

一、 img的垂直水平居中使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用，如果想使用在img元素上，就注意下面的display设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .mai

02

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

你肯定经历过耗费数个小时，换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码，寄希望于误打误撞地赌中那个能实现预期效果的魔幻组合。

05

【小程序_02】布局方式

① 安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

02

jQuery的简单使用

jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例：

01

移动端页面开发遇到的一些问题

5、当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的 safari

02

那些经常使用的 CSS3属性

实用的css3属性 1、display:flex||inline-flex display flex inline-flex 解释将对象作为弹性伸缩盒显示将对象作为内联块级弹性伸缩盒显示项目中的应用我当时写过一个因为子元素浮动让div自适应高度的解决办法，使用的是css方法解决的。div高度自适应下面就是换用display:flex解决 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

02

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

定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。)

03

各大公司移动端页面 - 导航的实现

HTML5学堂：伴随着科技的发展，出现了各种型号的手机，导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说，移动端的实现方法没有一个统一的标准，大家各自采用自己的实现方法，所以今天就给大家分享一下各大公司移动端页面的实现方法——导航栏给大家分享之前，先说几句话。本文章主要给大家分享不同公司对移动端的实现采用了不同的方法。每一种方法各有各的好处，我们不能说哪一种方法好，哪一种方法不好。另外，这边主要分享基本原理，没有跟各大公司移动端页面的样式一摸一样，所以仅供大家参考学习，有什么不对的欢迎大家学

07

前端学习(10)~css学习：选择器：伪类

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭