饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

--- 前端基础_css_07.盒模型.md [2021/09/23 11:47]
若愚
+++ 前端基础_css_07.盒模型.md [2021/09/23 11:49] (当前版本)
若愚 [外边距为负]
@@ 行 148: / 行 148: @@
 **问题** `block`，`inline`，`inline-block` 元素的区别是什么？
-<details>
-  <summary>参考答案</summary>
+** 解答 **
-  <p>
-    block 元素独占一行，宽度沾满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。
+- block 元素独占一行，宽度沾满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 &lt;p&gt; 只能包含 inline 元素。
-    block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 &lt;p&gt; 只能包含 inline 元素。
+- inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效，垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
-  </p>
+- inline-block 元素不换行，设置 width, height, padding, margin 属性有效。由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。
-  <p>
-    inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。
-    设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效，
-    垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
-  </p>
-  <p>
-    inline-block 元素不换行，设置 width, height, padding, margin 属性有效。
-    由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。
-  </p>
-</details>
 ## box-sizing
@@ 行 224: / 行 215: @@
 * https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 * http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
-* https://stackoverflow.com/questions/8055198/css-vertical-space-being-added-on-elements-with-displayinline-block
+* https://stackoverflow.com/questions/8055198/css-vertical-space-being-added-on-elements-with-displayinline-bloc
+k

饥人谷Wiki

站点工具

用户工具

页面工具