css 定位兼容性,CSS基础：定位与浏览器兼容性

position属性

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

position 属性值

static

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

.box {

position: static;

}

relative

介绍： 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。

.box {

position: relative;

top: 40px;

left: 40px;

}

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute

介绍：元素会被移出正常文档流，并不为元素预留空间，该元素会相对于最近的非 static 定位祖先元素左上角为坐标原点进行偏移，来确定元素位置。绝对定位的元素可以设置外边距(margins)，且不会与其他边距合并。

.box {

position: absolute;

top: 40px;

left: 40px;

}

fixed

介绍：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口(viewport)左上角为坐标原点进行偏移。元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文。

.box {

position: fixed;

top: 40px;

left: 40px;

}

注意：fixed一般都会以页面左上角作为坐标原点，但是如果该元素中存在某个祖先元素设置了 transform, perspective 属性，或 filter 属性非 none 时，元素将会以该祖先左上角作为坐标原点。

sticky(粘性定位)

介绍：元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级元素祖先，包括table-related元素进行偏移。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位偏移值不会影响任何其他元素的位置。

/*

在 viewport 视口滚动到元素 top 距离小于 20px 之前，元素为相对定位。

之后，元素将固定在与顶部距离 20px 的位置，直到 viewport 视口回滚到阈值以下。

*/

.box {

position: -webkit-sticky;

position: sticky;

top: 20px;

}

该值总是创建一个新的层叠上下文(stacking context)。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时)

层叠上下文(补充)

概念：层叠上下文是HTML元素的三维概念，这些HTML元素在一条垂直于电脑屏幕或网页的 z 轴上延伸，HTML 元素依据其自身层叠水平(元素的优先显示顺序)占用层叠上下文的空间

定位相关属性

z-index：设置元素的层叠水平，该属性设定了一个定位元素及其后代元素。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

.box {

position: absolute;

/* 字符值 */

z-index: auto;

/* 整数值 */

z-index: 0;

z-index: 3;

z-index: 289;

z-index: -1;/* 使用负值降低优先级 */

}

auto： 盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。

： (整型数字)是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代(元素)的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。

注意： z-index 必须配合 relative、 absolute、 fixed、 sticky 使用。

位置属性：CSS通过 top、right、bottom、left 这四个属性定义了定位元素的上、右、下、左外边距边界与其参照元素对应边之间的偏移，非定位元素设置此属性无效。

位置属性的效果取决于元素的position属性：

当position设置为absolute或fixed时，位置属性指定了定位元素与其包含参照元素对应方向边距之间的偏移。

当position设置为relative时，位置属性指定了元素的对应方向边界与自身初始位置的偏移。

当position设置为sticky时，如果元素在viewport里面，位置属性的效果和relative等同；如果元素在viewport外面，位置属性的效果和position为fixed等同。

当position设置为static时，位置属性无效。

当left和right同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

当top和bottom同时指定时，并且 height没有被指定或者指定为auto的时候，top和bottom都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。

vertical-align (补充)

CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

img {

vertical-align: baseline | top | middle | bottom | sub | text-top;

}

baseline：使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如 ，这意味着这些元素使用此值的表现因浏览器而异。

可以替换元素有

top：使元素及其后代元素的顶部与整行的顶部对齐。

middle：使元素的中部与父元素的基线加上父元素x-height(x字符高度)的一半对齐。

bottom：使元素及其后代元素的底部与整行的底部对齐。

sub：使元素的基线与父元素的下标基线对齐。

text-top：使元素的顶部与父元素的字体顶部对齐。

vertical-align属性可被用于两种环境：

使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片：

垂直对齐表格单元内容:

注意： vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

css浏览器兼容性

ResetCSS (样式重置)

介绍：由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是重置默认样式(reset css)，最简单的实现方法就是在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样。

* {

margin: 0;

padding: 0;

}

但是这段代码过于简单并不能解决绝大多数开发中遇到的浏览器不兼容问题，并且使用通配符选择器影响页面性能。

这里推荐使用专门的样式重置库，实现样式重置功能

/*reset.css*/

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

浏览器私有属性

介绍：我们经常会在某个CSS的属性前添加一些前缀，比如-webkit- ，-moz- ，-ms-，这些就是浏览器的私有属性。

为什么会出现私有属性呢？

通常，W3C组织成员提出一个新属性，制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。

但是为避免日后W3C公布标准时有所变更，会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后W3C公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。

常用的前缀有：

1. -moz代表firefox浏览器私有属性

2. -ms代表IE浏览器私有属性

3. -webkit代表chrome、safari私有属性

4. -o代表opera私有属性

对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面

.demo {

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/

-moz-transform:rotate(-3deg); /*为Firefox*/

-ms-transform:rotate(-3deg); /*为IE*/

-o-transform:rotate(-3deg); /*为Opera*/

transform:rotate(-3deg);

}

/* 透明度兼容写法 */

.box {

filter: Alpha(opacity=10); /* IE8, IE8以下 */

-webkit-opacity: 0.1; /*chrome, safari*/

-moz-opacity:0.1; /* firefox */

-ms-opacity: 0.1; /*IE9, IE9以上*/

-o-opactity: 0.1; /*opera*/

opacity:0.1;

}

上面的代码我们可以看出，为了一个属性设置兼容性需要书写大量的代码。这样是及其耗时费力的。

前端开发人员为了解决这个麻烦可以使用一些后处理工具自动解析CSS样式并自动添加浏览器前缀到CSS内容里。

这样我们就可以无需关心要为哪些属性添加那些浏览器前缀，只需使用W3C最新的规范关注于CSS实现就好。

这里推荐的自动化后处理工具Autoprefixer，该工具我们会在 webpack 前端工程化截断课程中讲授。

CSS hack

介绍：有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS 代码的过程，叫做CSS hack!

CSS hack的写法大致归纳为3种：条件级hack、属性级hack、选择符级hack。

CSS hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的

条件级hack

介绍：条件hack主要针对IE浏览器进行一些特殊的设置

语法：

: if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否： 指定是否IE或IE某个版本。关键字：空

大于： 选择大于指定版本的IE版本。关键字：gt

大于或等于： 选择大于或等于指定版本的IE版本。关键字：gte

小于： 选择小于指定版本的IE版本。关键字：lt

小于或等于： 选择小于或等于指定版本的IE版本。关键字：lte

非指定版本： 选择除指定版本外的所有IE版本。关键字：!

注意：IE10+已经不再支持条件注释。

属性级hack

介绍：属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。

语法：

selector{?property:value?;}

_或者- ： 下划线_和连接符-表示选择IE6及以下，为了与CSS属性中的-连接符区分，推荐使用下划线-

* ：选择IE7及以下。

+ : IE6 / 7 都生效

*+ ：IE6 / 7都生效

\9 ： IE6 / 7 / 8 / 9 /10 都生效

\0 : IE8 / 9 / 10 / 11 都生效

\9\0 : IE9 \10 都生效

!important： 除了IE6，其他浏览器中都生效

一般写HACK的顺序：从最新版本到低版本，比如：新版本、IE(10/9/8)、IE(7/6)

.test {

color: black; /* 所有 */

color: white !important; /* 除了IE6外 */

color: orange\9\0; /* IE9/10 */

color: green\0; /* IE8/9/10 */

*color: yellow; /* IE6/7 */

+color: gold; /* IE6/7 */

*+color: blue; /* IE6/7 */

_color: red; /* IE6 */

}

选择器级hack

介绍： 选择符级hack是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

语法：

selector{ sRules }

* ： 只在IE6中生效

*+ ： 只在IE7中生效：

@media screen\9 ： 在IE6/IE7中生效

@media \0screen\,screen\9：在IE6/IE7/IE8中生效

@media \0screen：在IE8中生效

@media screen\0：在IE8/IE9/IE10/IE11中生效

*html .test21 { color: gold; } /* IE6 */

*+html .test22 { color: blue; } /* IE7 */

@media \0screen\,screen\9` { /* IE6/7/8 */

.test24 { color: gold; }

}

针对其他浏览器的HACK

只在火狐中有效：

@-moz-document url-prefix() {

.test { color: red; }

}

支持所有Gecko内核的浏览器(包括火狐)

*>.test { color: blue; }

针对Webkit内核浏览器

@media all and (min-width:0px) { color: purple; }