关于css:day11-import隐藏元素定位的补充锚点

43次阅读

共计 1306 个字符,预计需要花费 4 分钟才能阅读完成。

1. 引入内部样式表的办法

(1) 步骤

​ 1)在 head 标签外面,生成一个 style 的双标签

​ 2)在 style 的标签外面写入 @import url(css 门路)

(2)@import 和 link 的区别

​ 1)@import 只能引入 css; link 能够引入多种文件

​ 2)加载程序不同:@import 先加载构造,后加载 css。link 是同时加载构造和 css

​ 3) @import 只反对 ie5 以上的浏览器;link 反对所有浏览器

<style>
    @import url(css/ 内部样式表.css); 
</style>

2. 元素类型

1) 置换元素

  • 浏览器依据标签及属性显示不同成果。

    • 如依据 img 外面的不同的 src 显示不同的图片。依据 input 里不同的 type 显示不同的输入框
    • 为什么 img 和 input 等内联元素能够设置宽高

2)非置换元素:除了置换元素之外的元素

3. 内联块元素的问题

  • 内联块因为回车导致的空文本,使得内联块之间会有间距

    <body>
        <input type="text">
        <input type="text">
    </body>
  • 解决办法:

    • 写在同一行
    • 给元素增加浮动
    • 给内联块元素的父亲增加一个 font-size:0;

4. 暗藏元素

  • visibility: hidden 暗藏元素
  • visibility: hidden 和 display: none 的区别:

    • display: none 暗藏之后不占位
    • visibility: hidden; 暗藏之后占位

5. 定位的补充

(1) 应用相对定位实现重叠成果

  • 利用场景: 图文重叠
  • 步骤:

    • 1)给挪动的元素设置相对定位
    • 2)给父元素设置参考物
    • 3)通过挪动形式挪动元素到相应的地位
    • rgba

      • a 指透明度,取值范畴 0 -1,0 齐全通明,1 不通明,值越小越通明

(2) 定位实现元素程度垂直居中

  • 步骤:

    • 1)给挪动的元素加相对定位 position: absolute;
    • 2)有参考物的话,给先人元素设置定位属性
    • 3)给挪动的元素设置

      • 办法 1:

        • top: 50%; margin-top: – 该元素高度的一半;
        • left: 50%; margin-left: – 该元素宽度的一半;
      • 办法 2:

        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;

(3) 定位实现二级菜单

1)一级菜单失常写

2)二级菜单写到一级菜单的 li 外面

3)给二级菜单设置相对定位,脱离文档流,这样就不会影响到他人

4)给二级菜单设置暗藏,划过再显示

(4) 固定定位 fixed

  • position: fixed;
  • 参考物:浏览器窗口
  • 利用场景:广告 / 头部导航 / 侧边栏 / 回到顶部
  • 特点:

    • 1)不会追随滚动条的滚动而滚动
    • 2)脱离文档流
    • 3)宽度不设置后,设置固定定位会脱离文档流,宽度自适应生效,须要从新设置宽度

(5) 粘性定位 sticky

  • position: sticky
  • 参考物:浏览器窗口
  • 挪动 top
  • 特点:

    • 没达到 top 值之前失常显示,达到 top 值之后相似于固定定位,不会追随滚动条滚动,且脱离文档流

(6) 定位属性的层级关系

  • 定位属性层级关系,必须有定位属性
  • z-index: 数值;

    • 能够为负 能够为正 值越大 越在下面(-5> -7)

6. 锚点

  • 在同一页面实现不同板块的跳转

    <a href="#id 名"> 点击的文字 </a>
    <div id=""></div> 

正文完
 0