day11 @import/隐藏元素/定位的补充/锚点

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支持所有浏览器

2. 元素类型

1）置换元素

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

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

2）非置换元素：除了置换元素之外的元素

3. 内联块元素的问题

• 内联块由于回车导致的空文本，使得内联块之间会有间距

• 解决办法：

  • 写在同一行
  • 给元素添加浮动
  • 给内联块元素的父亲添加一个 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. 锚点

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

  点击的文字