再次复习 display:none和 visibility:hidden

以前没有看 w3c 的文档,直接google display:none;和 visibility:none;区别,得到的是 display:none是元素消失,会影响布局;visibility:hidden;隐藏元素,不影响布局。今天我看了 w3c 的定义,发现以前的认识有误。来记录一下这个知识点和其他的知识。

块级框的特点:
1、独占一行,有默认的 margin-top 和 margin-buttom;
2、可设置宽高、行高;
3、默认宽度是父级元素内容的宽度,高度为0或者自身内容的高度。
4、容纳行内元素和块级元素。
eg p|h2|

行内框的特点:
1、和其他行内元素在一行,无默认margin-top和margin-left;
2、不可设置宽高、margin-top和margin-bottom;(注意,行高是可以设置的
3、元素的宽度时其包含内容的宽度;
4、行内框内只能放文字和其他行内元素。
eg a|span|br|em|strong|area|


display:none;直接不生成元素框,后代元素不会生成即使它们的 display 不为 none,对布局没有影响。

(我理解的是影响的,比如display为 block 时后面的元素会下移,值为none时后面的元素会上移,布局不就乱了??望读者指教。。。)

visibility:hidden;元素生成,而布局流中隐藏,后代元素 visibility 的值为 visible,会显示。


display:inline-block;以 block 渲染,以 inline 放置。即和行内框同行显
示,又可设置宽高、行高和边距。


position:relative;元素在普通流中。
position:absolute和position:fixed的特点:
①该元素在Z轴上方移动了一层,脱离文档流,覆盖下层元素。不占据原来
的空间。
②行内元素会变成块级元素,相当于 display:absolute;
③块级元素的宽度由原来的100%变成auto。

今天产生了一个疑问: w3c 的盒子模型的实际宽度 是 margin-left 和 margin-right 之间的而距离,而 margin 可以取负值,难道负值会使盒子变小吗????

看图:

 启用 margin-left:-10px。

 这不符合 w3c 盒子模型的定义啊 ?? 在W3C 上也没有找到信息,望大神指教。

原文地址:https://www.cnblogs.com/jackzhoumine/p/6603113.html