css学习笔记（一）

position定位

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

定位类型

• 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素。
• 相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
• 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
• 粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

大多数状况下，height和width 被设定为auto的绝对定位元素，按其内容大小调整尺寸。可是，被绝对定位的元素能够经过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们一样能够经过指定left 和 right并将width 指定为auto来填充可用的水平空间。

除了刚刚描述的状况（绝对定位元素填充可用空间）：

• 若是top和bottom都被指定（技术上，而不是auto），top 胜出。
• 若是指定了left 和right两侧，则在direction为ltr（英语，水平日语等）时left 赢，而且在direction为rtl时right赢（阿拉伯文，希伯来文等）。

语法

position 属性被指定为从下面的值列表中选择的单个关键字。

取值

static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（所以会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute
不为元素预留空间，经过指定元素相对于最近的非 static 定位祖先元素的偏移，来肯定元素位置。绝对定位的元素能够设置外边距（margins），且不会与其余边距合并。

fixed
不为元素预留空间，而是经过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出如今的每页的固定位置。fixed 属性会建立新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改成该祖先。

实例

• position: fixed;相对于屏幕定位

.topNavBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}/*相对于屏幕左上角固定

• 绝对定位，在子元素写position: absolute;在父元素写position: relative;

.userCard .welcome {
    display: inline-block;
    position: relative;
}

.userCard .welcome .triangle {
    display: block;
    position: absolute;
    top: 100%;
    left: 4px;
}/*紧贴父元素下方，在父元素从左往右4px边距

简单的几种居中

这只是暂时用到的居中方法，在后面会专门更新一篇居中

• 让 .xxx 子代中的内联元素居中

.xxx {text-align: center;}

• div子标签水平居中

div{
  margin-left:auto;
  margin-right:auto;
}

• div高度为30px，div标签内大小为14px字垂直居中

div{
  font-size: 14px; 
  line-height: 30px;
}

或

div{
  font-size: 14px; 
  line-height: 24px; 
  padding: 3px 0;
}

行高等于高度，或者行高加上padding等于高度，就可使div内文字垂直居中，可是仅限于在font-size比较小的时候能够用line-height来控制内联元素所占的高度，太大就会容易出bug，若是须要一个特定的高度，能够在那基础上添加padding来增长。

元素的高度

文档流

文档内元素流动的方向叫作文档流。

内联元素从左往右流动，若是宽度不够就会另起一行，汉字的话一句话有可能会从中间，可是若是是英文，css若是没有声明 word-break: break-all; 英文是不会换行的。

块级元素是从上往下流动，每一个块占一行。

块级元素高度

一个元素的高宽度是由其内容决定的，不到万不得已的时候通常不要设置宽高，块级元素高度是由其内部文档流高度总和决定的，并不必定是等于，只是决定，例如设置字体是100px，可是它的元素高度却不是100px。

内联元素的高度

给内联元素设置宽高是无效的，设置 margin-top margin-bottom 也是无效的，内联元素的高度也是由文档流内部元素决定，居中对齐是由基线对齐的，并且因为浏览器会给不一样字体一个建议的行高，这个内联元素的行高就是综合建议行高和其余相关设计来决定的。

零散知识点

• 背景图片居中：background-position: center center;
• 背景图片按比例缩放：background-size: cover;
• 设置宽度能够设置最大宽度，这样若是屏幕变小就能够自适应。
• 设置display:inline block;后，外边距margin不会合并。

• 想要并排，先在子元素float:left;而后在全部子元素的父元素上设置clearfix，后加上伪类。

  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }

• 作半透层背景：background-color: rgba(0,0,0,0.8);/不要颜色（黑色），半透层背景/