- Objective: - Breadcrumb: # 概念阐释 默认情况下: - 块级元素：宽度=复元素的100%，高度与content内容一样高； - 内联元素：宽度和高度与内容高宽一样。不能设置高宽度，如果要设置需要用 `display: block;`设置为块级元素。 - `inline`: 块级转内联，并失去块级元素特性，无法内嵌元素，无法改变宽度和高度。 - `block`：内联转块级 - `inline-block`: 将块级转为不自动换行的元素，但保留块级元素的特性 **（可以改变宽度和高度）** ，比如可以内嵌元素。 - `img` 和`button` 是默认的inline-block元素 - `none`：隐藏使用词属性的元素，并且不会保留空间。 - [[CSS Flexbox container display|弹性盒子]]`flex` # 实例 `inline` 与 `inline-block` - 都是将块级元素转换为内联元素，但`inline`不保留块级元素特征，`inline-block`保留块级元素特征 - inline element 比如 `span` `em` `strong` ，它们的周围不存在盒子，**所以`width` 和`height` 对内联元素来说是没用的。** -  `none` 与 [[CSS visibility | visibility]]property - `none`删除的更加干净，不保留空间 - `visibility `虽然隐藏盒子，但会保留原来占用的空间，如同`relative` 和`absolute`的区别 bootstrap用法： - `.visible-*-block`=`display:block` - inline - inline-block - ~~none~~ # 相关内容 # 参考资料