元素和让元素居中

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

元素可以可以分为行内元素和块级元素以及行级块元素

行内元素

如：span strong em a del...
特点：

1. 内容决定元素所占位置；
2. 不可以通过css改变宽高；

块级元素

如：div p ul li ol form address...
特点：

1. 独占一行；
2. 可以通过css改变宽高；

行级块元素

如：img...
特点：

1. 内容决定元素所占位置；
2. 可以通过css改变宽高；

那如何让一个元素隐藏呢

有以下几个方法

opacity=0
表示该元素隐藏起来了，但不会改变页面布局，而且如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件

visibility=hidden
也表示该元素隐藏起来了，也不会改变页面布局，但是它不会触发该元素已经绑定的事件

display=none
把元素隐藏起来，会改变页面布局，可以理解成在页面中把该元素删除掉一样

下面来看看如何让一个元素居中

首先来实现图片在某个容器中居中

1. 父元素固定宽高，利用定位及设置子元素 margin 值为自身的一半
2. 父元素固定宽高，子元素设置position: absolute，margin：auto平均分配margin
3. css3属性transform；子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%)即可
4. 将父元素设置成 display: table, 子元素设置为单元格 display: table-cell
5. 弹性布局 display: flex；设置 align-items: center; justify-content: center

那如何实现一个元素垂直居中呢

1. 父元素 display:flex;align-items:center
2. 元素绝对定位，top:50%，margin-top：-（高度/2）
3. 高度不确定用 transform：translateY（-50%）
4. 父元素table布局，子元素设置 vertical-align:center

也可以隐藏一个元素，有以下几个方法， 隐藏页面中某个元素的方法有很多，如下

1. display:none
2. visibility:hidden
3. opacity: 0
4. position移到外部
5. z-index涂层遮盖