逆战班 css定位 锚点 继承

## 定位

 

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

 

语法:`position: 属性值;`

 

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

* relative(相对定位):相对定位的元素是在文档中的正常位置偏移给定的值,但是不影响其他元素的偏移。相对定位的元素并未脱离文档流,保留空间。

* absolute(绝对定位):相对于最近的**非 static** 定位祖先元素的偏移,来确定元素位置(如果这个非 static 定位祖先元素不存在,就相对于根节点进行定位)。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。绝对定位的元素脱离了文档流,不占据空间。

* fixed(固定定位):不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。当元素祖先的 `transform`  属性非 `none` 时,容器由视口改为该祖先。

* sticky(粘性定位):粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。该定位基于用户滚动的位置,它不会对后续元素的定位造成影响。

 

| 定位类型 | 位置                       | 是否脱离文档流 |

| -------- | -------------------------- | -------------- |

| static   | 正常文档流位置             | 否             |

| relative | 相对原来的位置             | 否             |

| absolute | 相对非static定位的祖先元素 | 是             |

| fixed    | 相对于视口                 | 是             |

 

## 定位层级 z-inex

 

指定了一个具有定位(非static)属性的元素及其子代元素。当元素之间重叠的时候,z-index决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。

 

语法:`z-index: 属性值;`

 

属性值可以是:

 

* auto 。(默认值),堆叠顺序与父元素相等。

* 数字。 无单位的整数值。可为负数,数值越大,堆叠顺序越靠上。

 

## 包含块

 

一个元素的尺寸和**位置**经常受其包含块的影响。对于一些属性,例如 `width`, `height`, `padding`, `margin`,绝对定位元素的偏移值 (比如 `position`) 被设置为 `absolute` 或 `fixed`),当我们对其赋予百分比值时,这些值的计算值,就是通过元素的包含块计算得来。

 

### 确定包含块

 

确定一个元素的包含块的过程完全依赖于这个元素的`position`属性:

 

1. 如果 position 属性为 `static` 或 `relative` ,包含块就是由它的最近的祖先**块元素**(比如说inline-block, block 或 list-item元素)的内容区的边缘组成的。

2. 如果 position 属性为 `absolute` ,包含块就是由它的最近的 position 的值不是 `static`(也就是值为`fixed`, `absolute`, `relative` 或 `sticky`)的祖先元素的内边距区的边缘组成。

3. 如果 position 属性是 **fixed**,一般情况下包含块是 viewport。

 

**注意:** 根元素(`<html>`)所在的包含块是一个被称为**初始包含块**的矩形

 

## 锚点

 

作用:跳转到同一页面的不同位置。

使用:

1. 定义锚点 : `<a href="#锚点名称">xxx</a>`

2. 定义锚点要跳转的位置:`<标记 id="锚点名称"> </标记>`

 

## 透明

 

IE9以下浏览器写法:filter:alpha(opacity=value);取值范围 0-100

兼容其他浏览器写法:opacity:0.5;(value的取值范围0-1)

rgba(255,255,0,0.5)(最后一位值表示透明,取值范围0-1) 只支持IE8以上的浏览器

 

### 继承

所谓继承,就是父元素的规则也会适用于子元素

比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置,也都会变成红色。

* 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform.

* 块状元素可继承:text-indent和text-align。

* 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

* 表格元素可继承:border-collapse。

 

### 层叠

一个元素可能同时被多个css选择器选中,每个选择器都有一些css规则,这就是层叠。

这些规则有可能不矛盾的,自然这些规则将会同时起效,然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。


 

发布了10 篇原创文章 · 获赞 0 · 访问量 94
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览