定位层级关系(属性介绍)

发表一些博客是为了总结自己学习的知识,和大家共同学习,一起探讨

注意: 只有定位的元素才有层级关系[标准流元素和浮动的元素都没有层级关系]

总结:
1, 如果一个元素设置了定位 (除静态定位) , 那么该元素的层级就要比其他元素的层级高
2, 如果希望提高元素的层级, 那么给定位的元素设置 z-index 属性,提高层级
3, 如果元素都设置了定位,那么最后的定位元素的层级要比前面定位的元素层级要高[后来居上]
4, 如果z-index值不同,那么值越大该元素的层级越高,反之层级越低[可以设置负数]
5,如果一个元素的父元素也设置了定位,那么层级关系的高低,以父元素为准

vertical-align属性

☞ vertical-align 设置垂直方向的对齐方式。
  ☞ text-align 设置水平方向的对齐方式

  ☞vertical-align属性：
		  baseline (默认值)  |  top | middle | bottom 


  ☞ 使用该属性解决网页中的效果：
	     1. 解决图片底部3像素空白【由于图片默认的垂直对齐方式是基线对齐导致】
			 ✔设置图片的对齐方式不是基线对齐即可
		     ✔ 将图片转换为块级元素

	     2. 使用vertical-align属性实现插入图片垂直居中效果
		      ✔第一步设置行高等于容器的高度
		      ✔设置图片的垂直对齐方式为middle


	    3. 对齐方式：
	   span {
			height: 100%;
			width: 0px;
			display: inline-block;
			vertical-align: middle;
		}

		img {
			vertical-align: middle;
		}

		或者：
	    .box::after {
			content: "";
			display: inline-block;
			height: 100%;
			width: 0px;
			vertical-align: middle;
		}

		img {
			vertical-align: middle;
		}

  ☞ 注意：
		 vertical-align属性只有行内块元素或者table标签才能设置

元素隐藏
就是将页面中的元素隐藏

直接将页面中的元素隐藏:

display: none;  ----隐藏元素,不占位置
display: block; ---- 显示元素

visibility: hidden; ----隐藏元素,占位置隐藏


设置页面中溢出部分隐藏:
  overflow: visible(可见) | hidden | scroll (添加滚动条)  | auto (自动)

标签包含关系

1, 单标签不能包含其他标签
2,段落标签中不能包含标题标签
3,段落标签中不能放div
4,行内元素包含行内元素