Skip to main content

display 和 visibility

在构建渲染树时,一些不需要显示的节点(如 <script>、<head>、display: none 和一些不可见的元素)会被省略,而只有需要显示的元素才会被包含在渲染树中

  • display: none

元素被完全移除,不占据任何空间。 该元素及其子元素在页面上不可见,且不会影响布局。 例如,使用 display: none;的元素不会占据任何位置。

但是该元素仍然存在于 DOM 结构中,只是在页面上不占据空间而已;绑定的事件也依然存在

  • visibility: hidden

元素仍然存在于 DOM 中,但不可见。 该元素仍然占据空间,周围的元素不会重新布局。 例如,使用 visibility: hidden;的元素会在页面上保留其原有的空间,但内容不可见。

border

至少有这两个属性才能生效

border-bottom: 1px solid

css 中和文字相关的一般都可以继承

想让不可继承的属性继承,可以用 inherit 作为属性值 想使用初始值,可以用 initial 作为属性值

行级元素不能设置宽高

inline-block 本身是行级,但可以设置宽高,不会一个元素占据一行