CSS容器如何实现网格布局？通过display:grid和grid-template-columns定义网格

设置显示：网格。
定义网格模板列。
使用间隙来控制距离。
子元素使用网格列或网格区域放置。

7 6 8 px手机断点开关两列。
1 2 00px桌面使用网格模板区域划分为多个区域。

注意：不要在 Grid 容器中混合 Flexbox 进行主轴布局。

什么是盒模型

哈，说起盒子模型，这是老朋友了。
当我在做网页布局的时候，盒子模型就像我的老帮手，不可或缺。
我们先来说一下盒模型的结构。

盒子模型就像盒子的包装材料。
它有四个主要部分：内容区域、填充、边框和边距。
内容区域是实际显示内容的地方，比如一个盒子的主要内容；内边距是内容和边框之间的空间，很像盒子上的底纸；边框是内容周围的一条线，例如盒子的边框；边距是元素和相邻元素之间的空白，就像盒子之间的距离一样。

我记得有一次，我正在创建一个网页布局，我使用盒模型来控制元素的大小和间距。
我设置了元素的宽度，然后设置了padding和border，却发现元素的实际宽度比我预期的要大。
后来我发现这就是标准盒模型和IE盒模型的区别。
在标准盒模型中，元素的宽度仅包括内容区域，而填充和边框则添加额外的空间。
在IE盒模型中，元素的宽度包括内容、内边距和边框。

还有一次，我正在定制网页的视觉效果，通过调整元素的内外边距，使页面看起来更漂亮。
就好像给盒子加上了一些装饰品，让整个盒子看起来更有层次感。

盒子模型非常有用。
它允许您精确控制元素的大小，以避免布局混乱。
可以帮助我们；优化视觉层次，提升页面美观度；它还可以支持响应式设计，使网页适应不同的屏幕。

一般来说，盒模型是CSS布局的基础。
掌握它就等于掌握了一个强大的布局工具，可以轻松满足各种布局需求。
记得当时学盒子模型的时候有点头疼，但现在回想起来还是蛮有趣的。

HTML如何嵌入外部页面_HTMLiframe标签嵌套网页实例

嘿，说起来，我在2 02 2 年这个城市做网页设计的时候，当时在做一个项目，用了几个iframe，嵌入了几个页面。
我现在很困惑如何安排它，既不显得突兀，又不破坏整体的设计感。
我开始修改 CSS，删除边框，将宽度设置为 1 00%，将高度设置为查看单位，结果看起来相当顺眼。
然后我还记得，当页面加载时，iframe的title属性就发挥了作用。
当读者在屏幕上阅读时，用户就知道它是什么。

后来我意识到安全也很重要，所以我在脚本的执行模式中添加了iframe沙箱，并且还添加了refererpolicy以防止泄漏日志。
当时我们还以特殊的方式检查了目标网站，以确保没有放置任何会阻止 iframe 加载的标头。

后来我想再次移动它，所以我使用JavaScript动态更改iframe属性并加载新页面。
当时我也尝试过跨域通信，使用postMessage API在主页面和iframe之间传输数据，相当有趣。

我记得有一次，我改变了iframe的src，但是页面无法加载。
后来我意识到是因为该页面的X-Frame-Options设置为负数，所以无法加载iframe。
后来我意识到安全性和兼容性真的很重要。

现在回想起来，即使当时做的事情很简单，但也挺有成就感的。
如今，技术日新月异，但我仍然觉得基础很扎实。
iframe 标签就这么简单，但如果使用得当，你可以做很多好事。
当时我很困惑，但渐渐地我就习惯了。