CSS 样式介绍（四）

定位属性

• 元素的定位属性主要包括定位模式和边偏移两个部分的组合。
• 边偏移定位：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; /*解决图片底测有缝隙的问题. 低版本*/
}