显示模式转换

display属性：

• block ：转换为块元素（可以设置宽高，默认宽度是100%）
• inline ：转换为行内元素 （不能设置宽高，默认宽度就是内容本身的宽度）
• inline-block ：转换为行内块元素（可以设置宽高，默认宽度是内容的宽度，不会单独占用一行）

转换为块元素

有些特殊情情况，我们将行内元素转换为块元素

a {
	width: 100px;
	height: 100px;
	background-color: pink;
    /* 转换为块元素 */
	display: block;
}

<a href="#">Hello</a>

转换为行内元素

div {
	width: 100px;
    height: 100px;
    background-color: aquamarine;
    display: inline;
}

<div>World</div>

转换为行内块元素

span {
	width: 100px;
    height: 100px;
    background-color: antiquewhite;
    display: inline-block;
}

<span>中国贵阳</span>

---

隐藏或显示属性

display 属性不但可以转换显示模式，还可以隐藏元素，其值如下：

1. none 隐藏元素
2. block 显示元素（该值还可以转换元素为块元素）

display 隐藏掉的元素不会占用原来的位置

选择器 {
    display: none;
}

---

visibility 属性也是隐藏元素，其值如下：

1. visible 显示元素
2. hidden 隐藏元素

和 display 的区别是visibility 隐藏的元素会占用原来的位置

---

溢出

overflow 属性的作用是用来定义内容溢出部分的处理方式（就是当你的内容超出盒子的大小，而超出的部分怎么办呢，overflow 属性就是用来解决这个问题的），其属性值如下：

属性值	描述
visible	不做处理，溢出就溢出
hidden	不显示超出部分的内容
scroll	不管超出与否，都会显示滚动条
auto	溢出时显示滚动条，没有溢出则不显示

使用定位时，要小心使用 overflow 属性，因为该标签会隐藏盒子之外的内容（当我们要在小卡片的右上角添加一张小图片时，并且需要让这张图片往盒子外多移出一点点，我们使用 overflow属性会导致往盒子外移出的部分图片无法显示）

使用 overflow 属性前

使用 overflow 属性后

---