CSS属性-元素转换、定位、锚点

元素类型的分类

块级元素、行内元素、可变元素

块级元素+行内元素 =>行内块元素

1. 块级元素特点

常见的块级元素：div、p、ul、ol、li、h1-h6
特点：
以一个盒子显示并可以设置宽高大小
独占一行、从上到下顺序排列
可以嵌套其他元素

2. 行内元素特点

常见的行内元素:span、a、i、em、strong
特点：
无法设置宽高大小、宽高由内容决定
在一行显示
设置margin-top/bottom会失效

3. 可变元素

通过方法改变元素的显示方式

4. 行内块元素的特点

常见的行内块元素：input、img
特点：
拥有行内元素和块级元素的特点
行内块是以基线对齐的   解决基线对齐： vertical-align:top\bottom\middle

元素类型的转换

属性：display
属性值： block 块级元素                  将元素类型转为块级元素，拥有块级元素特点
        inline 行内元素                 将元素类型转为行内元素，拥有行内元素特点
        inline-block 行内块元素         将元素类型转为行内块元素，拥有块级和行内元素特点 
        list-item 列表项目              将元素类型转为列表类型，拥有块级元素特点
        none       删除整个html结构(隐藏)



block 和 none 之间的使用 表示显示和消失
给元素添加浮动，相当于让元素转换成了行内块元素
浮动也可以转换元素类型，仍然脱离文档流

定位

可以改变元素的位置

定位的三要素: 对象、参照物、方向

属性：position
属性值： static     默认  静态定位 
        relative    相对定位
        absolute    绝对定位
        fixed       固定定位
        sticky      粘性定位 (新增、问题较多)


absolute(绝对定位)和fixed(固定定位)  会脱离文档流
relative(相对定位) 不会脱离文档流

absolute(绝对定位):
    父级元素没有定位属性，会往上级去找，直到浏览器并相对于浏览器进行偏移，如果父级有就相对父级

fixed(固定定位):
    常用于广告弹窗、聊天窗口
    相对于浏览器进行偏移

relative(相对定位)：
    相对于自身初始位置 可以没有包含框接触
    作用是为了给绝对定位提供参照物的
sticky(粘性定位)：
    结合了相对定位和固定定位特点


层叠属性
属性：z-dindex
值： 数字 / auto
必须要在定位环境下使用
        

锚点

是网页制作中超级链接的一种。

作用：在同一页面内的不同位置进行跳转

语法：
- <标签 id="跳转位置名"></标签>
- <a href="#点击跳转的位置名"></a>