2023年6月20日发(作者：)

html内部样式表body,⽹页中的body和html元素及其样式HTML 中的和 元素，不知道你有没有注意过。⼀个作为 HTML 内容部分的⽗元素，⼀个作为整个⽹页的根元素，应⽤到它们上的样式表有什么区别，⼜究竟会影响到⽹页上的哪⼀部分呢？最近写新主页，遇到了⼀些⿇烦，于是对该问题做了⼀些研究。body {display: block;margin: 8px;}这两条告诉了我们什么呢：body 被渲染成⼀个块元素；body 有 margin，可见它外⾯还有东西？⽤⼀个简单的例⼦试⼀试：其实的⾏为就和⼀个普通的差不多嘛：如果不指定宽度，则宽度⾃动占满其⽗元素(？)；如果不指定⾼度，则⾼度设为刚好能容下内部元素；默认 overflow ⾏为是显⽰溢出内容。可是，你有没有想到什么问题？我们经常使⽤ body{ background: xxx; } 来设置整个⽹页的背景。但如果真的是⼀个普通的块元素，⽽且还带有 margin，那么为什么这个 background 设置能应⽤到整个⽹页的绘画区域呢？根元素 的背景决定了整个绘画区域的背景。但如果 元素背景为透明(默认值)，就会取其⼦元素的背景作为 的背景，其位置等属性变成相对于 元素的。这和我们的⽇常观感⼀致(背景 svg：画布⼤⼩ 128x128，在 (64,64) 处有⼀个半径为 64 的红⾊实⼼圆)：如果给 设置了背景，那么的背景⾏为就和块元素⼀致了(点上⾯的“设置html背景”试⼀试)。可是，上⾯是不是⽤到了 的背景来着？可见 元素也有样式、也需要绘制咯？如果尝试⽤ F12 或者加 border 的⽅法来查看 元素在整个绘画区域中的位置，很容易产⽣“ 的确就是⽐长宽更多⼀点的外围元素”这样的错觉。可是，你有没有注意过……⽹页的滚动条是怎么来的？突然转向了⼀个奇怪的话题。为什么⽹页太长了，就会出现滚动条(默认⾏为如此)？我们都知道，⼀个块元素设置 overflow 样式为 auto，当其中内容过长超过块元素长宽时，就会出现滚动条。——其实，⽹页有滚动条是因为 默认拥有 overflow:auto 的样式！⽽ 元素的尺⼨，正是窗⼝的尺⼨。来验证⼀下吧。DOM 中 ntElement 代表的其实就是 元素，访问 clientWidth、clientHeight 就可以得到其宽⾼(其实不太科学，详见此⽂)。我们搞了个超⼤的：看⼀看 的尺⼨，果然没有因为⽽变⼤。改变浏览器窗⼝⼤⼩，还会发现其尺⼨也会跟着变化。看来， 也可以看作⼀个块元素咯。不过，上⾯例⼦中给 设置的 border，位置好像不太对劲⼉，纵向⼀直延续到底了。这个嘛，我还不知道怎么解释，没查到资料。但鉴于⼀般也没⼈会给 设置 border，姑且先搁置了吧。这⾥有⼀篇简明的⽂章，探讨本节的问题。和上的 CSS在 上应⽤ CSS 的机会并不多。⽽在上，最重要的应⽤就是设置背景了。在 CSS2 中，不能在 background 属性中指定两个图⽚。所以以前有在 中指定另⼀个背景图⽚这样的应⽤。当然，除⾮为了兼容古代 IE，否则已经没必要这么做了。此外，前⾯提到⼀般浏览器都会给加上 margin。有时候想要让内部元素紧贴窗⼝边界，可以通过 margin: 0 来重置掉这⼀设置。另外⼀个在 或上设置 CSS 的情景，是让⼦元素继承样式。⽐⽅说设置全局字体样式，“*”选择器杀伤⼒可能有点⼤。可以⽤ html 选择器加上继承：html {color: red;}

2023年6月20日发(作者：)

html内部样式表body,⽹页中的body和html元素及其样式HTML 中的和 元素，不知道你有没有注意过。⼀个作为 HTML 内容部分的⽗元素，⼀个作为整个⽹页的根元素，应⽤到它们上的样式表有什么区别，⼜究竟会影响到⽹页上的哪⼀部分呢？最近写新主页，遇到了⼀些⿇烦，于是对该问题做了⼀些研究。body {display: block;margin: 8px;}这两条告诉了我们什么呢：body 被渲染成⼀个块元素；body 有 margin，可见它外⾯还有东西？⽤⼀个简单的例⼦试⼀试：其实的⾏为就和⼀个普通的差不多嘛：如果不指定宽度，则宽度⾃动占满其⽗元素(？)；如果不指定⾼度，则⾼度设为刚好能容下内部元素；默认 overflow ⾏为是显⽰溢出内容。可是，你有没有想到什么问题？我们经常使⽤ body{ background: xxx; } 来设置整个⽹页的背景。但如果真的是⼀个普通的块元素，⽽且还带有 margin，那么为什么这个 background 设置能应⽤到整个⽹页的绘画区域呢？根元素 的背景决定了整个绘画区域的背景。但如果 元素背景为透明(默认值)，就会取其⼦元素的背景作为 的背景，其位置等属性变成相对于 元素的。这和我们的⽇常观感⼀致(背景 svg：画布⼤⼩ 128x128，在 (64,64) 处有⼀个半径为 64 的红⾊实⼼圆)：如果给 设置了背景，那么的背景⾏为就和块元素⼀致了(点上⾯的“设置html背景”试⼀试)。可是，上⾯是不是⽤到了 的背景来着？可见 元素也有样式、也需要绘制咯？如果尝试⽤ F12 或者加 border 的⽅法来查看 元素在整个绘画区域中的位置，很容易产⽣“ 的确就是⽐长宽更多⼀点的外围元素”这样的错觉。可是，你有没有注意过……⽹页的滚动条是怎么来的？突然转向了⼀个奇怪的话题。为什么⽹页太长了，就会出现滚动条(默认⾏为如此)？我们都知道，⼀个块元素设置 overflow 样式为 auto，当其中内容过长超过块元素长宽时，就会出现滚动条。——其实，⽹页有滚动条是因为 默认拥有 overflow:auto 的样式！⽽ 元素的尺⼨，正是窗⼝的尺⼨。来验证⼀下吧。DOM 中 ntElement 代表的其实就是 元素，访问 clientWidth、clientHeight 就可以得到其宽⾼(其实不太科学，详见此⽂)。我们搞了个超⼤的：看⼀看 的尺⼨，果然没有因为⽽变⼤。改变浏览器窗⼝⼤⼩，还会发现其尺⼨也会跟着变化。看来， 也可以看作⼀个块元素咯。不过，上⾯例⼦中给 设置的 border，位置好像不太对劲⼉，纵向⼀直延续到底了。这个嘛，我还不知道怎么解释，没查到资料。但鉴于⼀般也没⼈会给 设置 border，姑且先搁置了吧。这⾥有⼀篇简明的⽂章，探讨本节的问题。和上的 CSS在 上应⽤ CSS 的机会并不多。⽽在上，最重要的应⽤就是设置背景了。在 CSS2 中，不能在 background 属性中指定两个图⽚。所以以前有在 中指定另⼀个背景图⽚这样的应⽤。当然，除⾮为了兼容古代 IE，否则已经没必要这么做了。此外，前⾯提到⼀般浏览器都会给加上 margin。有时候想要让内部元素紧贴窗⼝边界，可以通过 margin: 0 来重置掉这⼀设置。另外⼀个在 或上设置 CSS 的情景，是让⼦元素继承样式。⽐⽅说设置全局字体样式，“*”选择器杀伤⼒可能有点⼤。可以⽤ html 选择器加上继承：html {color: red;}