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:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容

上一篇:css 文本超出就隐藏并且显示省略号


下一篇:开箱即用——鼠标移入显示滚动条并设置滚动条样式