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; /*解决图片底测有缝隙的问题. 低版本*/
}

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,380评论 1 88
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 868评论 0 6
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 692评论 0 5
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 18,347评论 1 40
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 654评论 0 6