首先display分为对外显示和对内显示
对外显示:block、inline、inline-block
对内显示:flex、grid流式布局
常见的块元素有p标签、div标签、ul标签、ol标签、h1~h6等。
常见的行内元素有:a、strong、span、i、del等
以下元素具有行内块元素的特性:img、表单类元素、video , audio等以上元素本质上叫可替换元素(归类归到行内元素)。
官方本没有行内快元素的说法
| 元素类型 | 排列方式 | 盒模型属性 | 内容 |
|---|---|---|---|
| 块级(block) | 独占一行 | width、height有效 | 任意元素 |
| 行内块(inline-block) | 一行可显示多个 | width、height有效 | 行内或行内块元素 |
| 内联(inline) | 一行可显示多个 | width、height无效 | 行内或文本元素 |
比如要将div转成行内标签,只需要在css中写上
div{display:inline;}
即可
| 属性 | 功能 | — |
|---|---|---|
| display:none; | 隐藏元素 | 可以将元素隐藏,子孙元素全部隐藏不可见。并且只要父元素隐藏,子孙没有任何办法可见。 元素隐藏后不会占空间。就好比页面当中就没有加过这个元素一样。 |
| visibility :hidden; | 隐藏元素 | 将元素隐藏,子孙元素全部不可见,但是给子孙加上 visibility:visible;时,子孙可见。 隐藏后仍占其位置,会留下空白的一块区域。基本不用。 |
单独发一篇
单独发一篇