css及h5技术分析

1.定位   锚点定位  postion 定位相关属性值 postion ：static 属于默认值及默认文档流

默认偏移位置（top/left/right/bottom）时候的参照物

2.position：absuolute ；绝对定位，脱离文档流

A:当没有父元素或者父元素没有定位，参照物是浏览器窗口的一屏

B：有父元素且父元素有定位，以父元素的位置进行移动

3.position：relative；相对定位 不脱离文档流，以自己的初始位置进行移动

4.position：fixed：固定定位  脱离文档流，固定在浏览器的某个位置

5.position：sticky  粘性定位  可以做吸顶效果

锚点链接效果：

制作锚点标记：<1>给元素定义命名锚点记名。   语法：<标记id=“命名锚记名”></标记>

                        <2>命名锚记连接。语法：<a  href="#命名锚记名称"></a>

                        命名锚点的作用：在同一页面内的不同位置进行跳转。

锚点定位：（点击跳转到指定的区域)<a  hrer="#想要跳转区域的id值"></a>注释：【想要跳转区域的id名】id=”id值“

6.文本溢出

<1、text-overflow：ellipsis；当单行文本溢出时，显示省略标记

<2.text-overflow：clip； 描述：不显示省略号，简单的裁切

7.单行溢出省略号

定义：1 容器宽度：width：”value“（像素值）

           2  强制文本在一行中显示：width-space：nowrap；

          3  溢出内容为隐藏：overfolw：hidden；

          4  溢出文本显示省略号：text-overflow:ellipsis;

white-space:nowrap

                    pre:保留所有的空白区域，并且强制在一行中显示出来

                     pre-wrap：没有完全保留空白区域，不让他强制在一行中显示

                    pre-line：保留部分空白区域在文本中的换行显示

8.overflow相关属性

  1  overflow：visble；visble为默认值，内容不会被修剪，会呈现在元素框之外

  2  overflow：hidden；内容会被修剪，并且其余内容是不可见的、

  3 overflow：auto；如果内容被修剪，则浏览器会先显示滚动条，以便查看其它的内容

4. overflow：scroll；scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容