显然,盒模型比我想象的,比我最开始在前端课程中学到的其实要复杂得多。
我将现阶段学到的内容与过去学习所留下的印象进行对比,得出了如下我以为CSS盒模型中的难点和容易被忽视的点。
它是一切开始的基础
在MDN的文章中,盒模型被分为 标准盒模型 和 替代盒模型 。
通常我们一开始学习的盒模型是标准盒模型,它的width和heigth属性所设置的是content的宽度和高度,而不是盒子部分的宽度和高度(把border和它所围起来的部分叫盒子部分)
所以在练习布局的时候,我们有时候会觉得这个width和heigth很怪,并不能很方便直接地将我们心中所想象的布局表达出来,有时甚至需要计算。
而替代盒模型更符合我们的直觉。替代盒模型中的width heigth所指即为border所包括部分的width heigth.
将浏览器默认的标准盒模型改为替代盒模型
margin可以有负数,而padding不可以为负数。
负数意味着样式会重叠入侵。
[图片上传失败...(image-b2c4e1-1642049365894)]
可以参考视频: CSS外边距塌陷 - Web前端工程师面试题讲解
折叠的规则很好理解,大的覆盖小的,长的覆盖短的。
比如A和B的外边距折叠,A的外边距为10, B的外边距为20,那么结果是AB的间距为20。
外边距重叠的情况一共有三种。
之所以是垂直方向,是因为折叠发生在block元素上,block元素并不存在水平相接的情况。
对于Inline元素,比如说两个水平相接的span标签,实测是不会折叠的。
这个有点复杂,MDN的说法如下:
举例如下:
设置了border:solid, 正常:
将border:solid设置为none后,出现了折叠。(可以理解为偏移的参照系变化了,未设置Border,参照变成了上面的divB)
更为深入的探究,等往后遇到了再说吧。
参考: MDN盒模型
代码:
效果:
原理:
先给父级<div>设置宽度(像素)
然后再子<div>里,设置百分比,如图示。
代码原件:
<div style="width:80pxheight:50pxborder:#FF0000 3px solid">
<div style="width:20%height:50%border:#CC33FF 3px solid"></div>
</div>
复制到<body></body>之间使用即可。
先var一个a=document.getEgetElement已经隐藏的那个div或者内容。
然后a.
onclick=function(){
a.style.display="block"
}
注释:点击a时,调用匿名方法=a的样式,display变成block
百度知道这类问题很多,随便复制粘贴。我不给你全写出来,是授人以鱼不如授人以渔,自己理解,然后再写出来。