定位/滑动门

定位是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

  边偏移属性      示例              描述                     

  top    top: 80px    顶端偏移量，定义元素相对于其父元素上边线的距离。

  bottom bottom:80px  底部偏移量，定义元素相对于其父元素下边线的距离。

  left    left: 80px     左侧偏移量，定义元素相对于其父元素左边线的距离。

  right   right:80px     右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

    选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

  值          语义

  static        静态定位

  relative       相对定位

  absolute      绝对定位

  fixed       固定定位

<img src='./images/26定位的概念.png'>

静态定位(static) - 了解

- 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。

- 静态定位 按照标准流特性摆放位置，它没有边偏移。

- 静态定位在布局时我们几乎不用的

相对定位(relative) - 重要

- 相对定位是元素相对于它  原来在标准流中的位置 来说的。（自恋型）

相对定位的特点：

- 相对于 自己原来在标准流中位置来移动的

- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute) - 重要

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）

1. 完全脱标 —— 完全不占位置；  

2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

3. 父元素要有定位

   - 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：

- 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置

- 不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀 —— 子绝父相

子绝父相 —— 子级是绝对定位，父级要用相对定位。

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

一般的经典布局都是这样的：

    <li>

      <a href="#">

        <span>导航栏内容</span>

      </a>

    </li>

css样式

    * {

          padding:0;

          margin:0;

   

        }

        body{

          background: url(images/wx.jpg)repeat-x;

        }

        .father {

          padding-top:20px;

        }

        li {

          padding-left: 16px;

          height: 33px;

          float: left;

          line-height: 33px;

          margin:0  10px;

          background: url(./images/to.png)no-repeat left ;

        }

        a {

          padding-right: 16px;

          height: 33px;

          display: inline-block;

          color:#fff;

          background: url(./images/to.png)no-repeat right ;

          text-decoration: none;

        }

        li:hover,

         li:hover a {

         background-image:url(./images/ao.png);

        }

总结：

1. a 设置 背景左侧，padding撑开合适宽度。   

2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。

3. 之所以a包含span就是因为整个导航都是可以点击的。利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏

定位/滑动门

定位是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

  边偏移属性      示例              描述                     

  top    top: 80px    顶端偏移量，定义元素相对于其父元素上边线的距离。

  bottom bottom:80px  底部偏移量，定义元素相对于其父元素下边线的距离。

  left    left: 80px     左侧偏移量，定义元素相对于其父元素左边线的距离。

  right   right:80px     右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

    选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

  值          语义

  static        静态定位

  relative       相对定位

  absolute      绝对定位

  fixed       固定定位

<img src='./images/26定位的概念.png'>

静态定位(static) - 了解

- 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。

- 静态定位 按照标准流特性摆放位置，它没有边偏移。

- 静态定位在布局时我们几乎不用的

相对定位(relative) - 重要

- 相对定位是元素相对于它  原来在标准流中的位置 来说的。（自恋型）

相对定位的特点：

- 相对于 自己原来在标准流中位置来移动的

- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute) - 重要

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）

1. 完全脱标 —— 完全不占位置；  

2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

3. 父元素要有定位

   - 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：

- 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置

- 不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀 —— 子绝父相

子绝父相 —— 子级是绝对定位，父级要用相对定位。

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

一般的经典布局都是这样的：

    <li>

      <a href="#">

        <span>导航栏内容</span>

      </a>

    </li>

css样式

    * {

          padding:0;

          margin:0;

   

        }

        body{

          background: url(images/wx.jpg)repeat-x;

        }

        .father {

          padding-top:20px;

        }

        li {

          padding-left: 16px;

          height: 33px;

          float: left;

          line-height: 33px;

          margin:0  10px;

          background: url(./images/to.png)no-repeat left ;

        }

        a {

          padding-right: 16px;

          height: 33px;

          display: inline-block;

          color:#fff;

          background: url(./images/to.png)no-repeat right ;

          text-decoration: none;

        }

        li:hover,

         li:hover a {

         background-image:url(./images/ao.png);

        }

总结：

1. a 设置 背景左侧，padding撑开合适宽度。   

2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。

3. 之所以a包含span就是因为整个导航都是可以点击的。利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏