CSS元素显示模式

元素显示模式

指标签以什么方式进行显示。

HTML元素一般分为块元素和行内元素

1.块元素

例：h1~h6,p,div,ul,ol,li等

特点：

• 霸道，独占一行
• 高度、宽度、外边距以及内边距都能控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素

注意：

• 文字类元素内不能放块级元素
• p标签，h1~h6标签主要存放文字，因此p里面不能放块级元素，特别是div

2.行内元素（内联元素）

例：a,strong,b,em,i,del,s,ins,u,span等

特点：

• 相邻的行内元素在一行上，一行可以显示多个
• 宽和高直接设置没有效果
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或者其他行内元素

注意：

• 链接里面不能再放链接
• 特殊情况下链接a可以放块级元素，但是把a转换成块级模式最安全

3.行内块元素（资料查不到）

例：img,input,td

特点：

• 一行可显示多个，但之间会有空白缝隙。
• 默认宽度就是本身内容的宽度
• 高度、行高、外边距以及内边距都能控制元素显示模式转换

特殊情况下，我们需要元素模式的转换，即一个模式的元素需要另一个模式的特性。

例如，想要增加链接a的触发范围

1）把行内元素转换为块级元素：display: block

2）把块级元素转换为行内元素：display: inline

3）转换为行内块元素：display: inline-block

a {
    width: 150px;
    height: 50px;
    background-color: pink;
    /* 把行内元素转换为块级元素 */
    display: block;
}

div {
    width: 300px;
    height: 100px;
    background-color: purple;
    /* 把块级元素转换为行内元素 */
    display: inline;
}

span {
    width: 100px;
    height: 30px;
    background-color: skyblue;
    /* 转换为行内块元素 */
    display: inline-block;
}

<a href="#">赫奇帕奇</a>
<a href="#">赫奇帕奇</a>
<div>div块级元素</div>
<div>div块级元素</div>
<span>span行内元素</span>
<span>span行内元素</span>

---

CSS没有提供文字垂直居中的代码？

一个小技巧让单行文字垂直居中：让文字的行高等于盒子的高度

---

4.控制元素显示隐藏

display: none visibility: hidden

div:nth-of-type(1) {
    /* 会让空间位丢失 */
    display: none;
    /* 空间位保留（类似于更改透明度） */
    visibility: hidden;
    opacity: 0;
}

<article>
    <div>1</div>
    <div>2</div>
</article>

5.控制元素溢出隐藏

overflow

div {
    border: solid 2px red;
    width: 300px;
    height: 100px;
    /* 显示滚动条（无论内容能否装下） */
    overflow: scroll;
    /* 内容装不下时才出现滚动条 */
    overflow: auto;
    /* 隐藏溢出内容 */
    overflow: hidden;
    /* 溢出内容单行加点 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}