定位属性
- 元素的定位属性主要包括定位模式和边偏移两个部分的组合。
- 边偏移定位：top 顶部偏移量，定义元素相对于其父元素上边线的距离，还有bottom,left,right。
定位模式（定位的分类）,在css中，postion属性用于定义元素的定位模式，包括static自动定位(默认模式,对于偏移量无效的,一般用它来清除定位)、relative 相对定位，相对于原文档流(原自己位置)的位置进行定位、absolute 绝对定位，相对于上一个已经定位的父元素进行定位（如果父元素(祖宗元素)没有定位，会以浏览器为准进行定位）、fixed 固定定位，相对于浏览器窗口进行定位，不占位置，完全脱离标准。
注意：定位模式转换：跟浮动一样，元素添加了 绝对定位和固定定位之后，元素模式也会发生转换，都转换为
行内块模式,因此比如 行内元素
如果添加了绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。
1. 定位属性的使用
- 记住口诀：子绝父相，子元素是绝对定位，父元素是相对定位，要不然父元素高度会为0。
div:nth-child(1) {
background-color: purple;
left: 20px; /*边偏移*/
top: 30px; /*边偏移*/
position: relative; /**相对定位, 不脱离标准流，占有原来的位置*/
z-index: 1; /**想要调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index属性去完成,值越大元素越居上。默认都是0 (如果取值相同,后面添加的会覆盖到前面的上面)*/
}
div:nth-child(2) {
width: 100px;
height: 100px;
top: 100px; /*上边偏移100px*/
left: 100px; /*左边偏移100px*/
/*定位模式 绝对定位: 脱离标准流，它不占有原来位置,如果是绝对定位，原来的位置会被空出来**/
position: absolute;
/*margin: 0 auto; 加了绝对定位的盒子 margin的auto就无效*/
/*所以绝对定位盒子水平/垂直居中，需要1.首先left: 50% 父盒子的一般大小。2.然后走自己外边距负的一半值就可以了 比如用marigin-left*/
background-color: pink;
z-index: -1;
}
2. 隐藏元素属性的使用
div:first-child {
display: none; /**隐藏元素 不是删除，看不见而已，
一直存在页面中,特点：隐藏后，不保留原来位置。用得比visibility更多*/
visibility: hidden; /**隐藏元素 不是删除，看不见而已，
一直存在页面中,特点：隐藏后，保留原来位置*/
visibility: visible; /*显示元素*/
}
3.overflow 属性
div:nth-child(4) {
overflow: visible; /*默认的 超出显示*/
overflow: auto; /*自动 超出显示滚动条，不超出不显示*/
overflow: scroll; /*显示滚动条*/
overflow: hidden; /*溢出隐藏：超出的部分隐藏条*/
}
4.属性扩展
div {
width: 100px;
height: 100px;
background-color: purple;
cursor: default;/*鼠标经过鼠标的形状 小白*/
cursor: pointer;/* 小手*/
cursor: move;/* 移动*/
cursor: text; /*文本*/
margin-left: auto;
margin-right: auto; /*左右自动auto 盒子可以居中对齐，等同于margin: 0 auto*/
word-break: break-all; /*允许单词拆开显示*/
word-break: keep-all; /* 不允许单词拆开显示 保持单词完整性*/
white-space: normal;
white-space: nowrap; /* 强制单词在一行显示*/
text-overflow: clip; /* 强制裁剪，必须喝overfolw 搭配使用*/
text-overflow: ellipsis; /**多余的用省略号显示，必须和overfolw 搭配使用**/
overflow: hidden;
}
input {
/*outline: 1px solid red; 很少用到*/
outline: 0; /**取消外部轮廓线,平时用这个*/
border: 1px solid blue;
}
textarea {
resize: none; /*防止文本域拖拽*/
outline: none; /*取消轮廓线*/
width: 200px;
height: 100px;
/*vertical-align: middle 中线对齐，bottom 底线对齐,baseline 基线对齐,top 顶线对齐*/
vertical-align: middle; /*vertical-align 对于块级元素 无效,针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单与文字的对齐*/
}
img {/* 行内块元素*/
/*vertical-align: baseline; 默认的是基线对齐*/
vertical-align: middle;
vertical-align: top; /*解决图片底测有缝隙的问题. 低版本*/
}
