HTML怎么实现页面布局_HTML基础页面布局的div和CSS实现方案

就一会儿，昨天，在重建公司官网的时候，我们突然发现了一个问题。

那天，咖啡店的顾客指着手机上的页面说，小屏幕上侧边栏的文字堆积如山。
打开Chrome DevTools，发现Flexbox长宽比没有调整好。

看这个例子，使用Flexbox的三列布局确实很简单，但是.sidebar{width:2 00px;}的固定宽度实际上有点问题。
如果有多个项目，主要内容一侧的空间特别大，会显得不对齐。

后来改为.sidebar{flex-basis:2 00px;};所以侧边栏在小屏幕上缩小到2 00px，在大屏幕上保持2 00px，这比固定宽度要好得多。

但是，浮动布局已经过时了。
据说对于两个简单的柱来说它是真正稳定的。
当政府系统进行修改时，需要兼容IE1 0最后，我使用 .sidebar{float:left;} 和 clear 来完成此任务。
那时，Grid根本无法运行。

现在做响应式设计的时候，越来越写Mobile First。
例如，首先，使用 flex-shrink:0 锁定 .content 的宽度；当屏幕宽度超过 8 00 像素时更改 Flex 宽高比。

我突然发现CSS变量其实还是蛮方便的。
例如，f0f0f0如果保存为 --sidebar-bg 整个页面的侧边栏颜色将是相同的。
要更改它，只需在 :root 中更改即可。

等一下，还有一件事。
有一种新方法可以弄清楚那里到底有什么。
现在使用 Place-content：更优雅而不是清晰。
例如，.container{place-content:end;} 可以防止内容浮动。

实际上，在 Flexbox 和 Grid 之间进行选择有时取决于上下文。
上次我们做了杂志风格的布局。
Grid 完全击败了 Flexbox，而且列的对齐方式特别整齐。

但是，现在所有浏览器都支持 Flexbox。
除非特别复杂。
我通常使用 Flex。
但你必须牢记浮动系统。
如果有一天你遇到旧系统，不要管它。

话虽这么说，为什么侧边栏总是比主要内容区域窄？有情感上的影响吗？用户看久了，窄边框是不是感觉所有注意力都集中在中间？

html5的section和div用法有什么区别？

说实话，说到HTML5 中section和div的用法区别，我还真有些感触。
我记得当我刚开始网页设计时，这两个元素就像双胞胎一样，很难区分哪个是哪个。

首先我们来谈谈section元素。
这个东西就像是文档中的一个独立章节。
您需要为其添加标题，就像一本书的目录一样，告诉读者它是关于什么的。
我记得有一次我正在帮助一个教育网站重新设计网站，并使用部分将课程内容分成多个部分。
标题是课程名称，内容是课程介绍。
这样，页面结构清晰，用户可以更轻松地找到自己想看的内容。

让我们再看看div元素。
这个东西更像是一个用来存放东西的盒子。
无论你往里面放什么，它都会显示它所显示的内容。
我曾经创建过一个电商网站的首页，使用div将内容分成不同的部分，比如产品推荐、用户评论、新品发布等，然后使用CSS进行样式设置，使页面看起来更加美观。

有趣的是，这两个元素在语义上也不同。
节元素强调内容的逻辑结构和语义，就像说“这是一个有内容的章节”。
div 元素更像是在说“这是一个包含此内容的容器”。
当我要更新政府网站的内容时，我特别注意版块的使用，因为政府网站上的信息结构比较清晰，版块的使用可以更好地体现与内容的逻辑关系。

使用上也有差异。
使用章节时，请考虑内容的逻辑，每个章节必须有明确的目的和标题。
之前我创建的一个企业网站，我按照业务的业务模块将其划分为几个版块，每个版块都有对应的业务标题。
至于div，更多的是用来考虑布局和样式。
我有一个朋友制作时尚网站。
他特别喜欢用div来控制页面布局，让页面看起来更符合现代审美。

说白了，section和div就像是网页设计中的两个工具，各有千秋。
开发者应根据具体需求和设计理念进行选择。
我个人认为，如果你想强调内容的逻辑和语义，section是一个不错的选择；如果您更看重页面布局和样式，div 可能更适合您。
就像做饭一样，你选择什么食材以及如何烹饪最终取决于你的需求和喜好。

html5的section和div用法有什么区别？

section和article这两个标签与div的功能类似，但含义不同。
Section代表一个区域，article是一个独立的内容块。
简单地说，section就像章节，article就像文章。
不要感到困惑。