html5 基础学习笔记

1.鼠标滑过高度变化的动态导航

2.元素类型分类

根据css样式显示分类，在之前元素类型费雷分为三种

块状元素-块级元素-块元素

行内元素-内联元素

可变元素（用的较少） 第三种元素类型可以理解为行内块元素（是从行内元素中分出来的一种元素类型）

常见的标签有哪些:div、p、h、ul、ol、li、dl、dt、dd、span、a、img、br、hr、em、i、b、strong、u

块元素： 可理解为可设置宽高和大小的元素，以盒子的样式在浏览器中显示

块元素独占一行（虽然后段是空的，但是阴影部分占据了所有）

行内元素：行内元素无法直接设置宽高和大小，行内元素的宽高大小由自身的内容决定的

并且行内元素实在（一行内逐个显示）

可变元素：具有以上的特点

（所有行内块元素都是以基线对齐—布局问题—）—解决方法——>vertical-align：top、bottom、middle

3.拓展

textarea 有点像窗口边框可放大缩小（用处较低-不建议使用，因为会破坏后续空间）

select-选择标签 类似年份选择 / 年龄选择 / 地区选择的一个小标签

（ 问题2:置换元素与非置换有哪些?

- 置换元素:有初始的宽高大小,可以改变属性的属性值从而显示不同的样式 img、input

- 非置换: div、p、a）

4.元素类型的转换

属性：display

属性值：block—将当前元素转变为块元素

inline—将当前元素转变为行内元素、具有行内元素的特点

inline-blcok 行内块—有两种特性

了解：list-item 列表项目（用的少） 将其他元素转变为列表元素

同理会有列表元素特性

（重要）——none 无 不显示 ——非常绝对的属性值

会删除html结构，直接在列表中不显示，甚至检查也无法查看（十分绝对）

（ - 清除列表样式 list-style

- 清除下划线 text-decoration

- 清除边框 border

- 清除背景 background

- 多行文本域禁止拖拽 resize

- 清除点击输入框高亮的边框 outline

- none还可以和block组成一对,表示显示和隐藏）

案例 利用none实现二维码的显示与隐藏

总之可以直接理解为， display 用的时候设置为原有的元素类，需要隐藏设置为none便可

图片居中显示

将图片设置水平居中 text-align

然后添加一个参考线 最好是span 将span设置为 inline-blcok

使用 vertical-align 属性进行基线对齐 达到居中显示

属性值：top middle low浮动对元素类型的影响:如果给元素添加了浮动 就相当于给当前元素转换成为行内块元素

 

1.定位的概念

固定所需要的元素 - 对象、参照物、方向

定位属性和属性值

属性 ： position

属性值 ：

static 默认值 静态定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘性定位

2.相对定位的使用

相对定位三要素（对象、参照物、方向）

相对定位的属性和属性值 —— position：relative

比如 ：left ：100px —>可理解为 相对于右侧方向移动（距离左侧的距离为100px）

相对定位中方向不需要父级包含框的接触（和盒模型的概念不一样）

相对定位 - 是相对于自身初始位置进行移动的

相对定位不会脱离文档流，占位置，不会破坏正常的网页布局

作用——给绝对定位提供参照物

拓展—网页中“流“的概念

普通流：正常的网页布局

浮动流：设置浮动后会脱离文档 漂浮在浏览器上方 不占浏览器位置

定位流：设置定位属性后 - 出现新的空间

3.绝对定位的使用

绝对定位的属性和属性值 position：absolute

绝对定位的参照物

（如果父级没有定位属性时时 - 会网上查找 - 直至查找到有定位属性的父级元素，若没有 便以浏览器为参照物）

如果父级有定位属性就在父级框内进行位置偏移

（绝对定位是脱离文档流的，初始位置会不存在，并且破坏正常的页面布局）

设置页面布局的时候不建议在大的区域上使用

4.固定定位的使用

固定定位的属性和属性值 position：fixed

固定定位的参照物——浏览器

会相对于浏览器的位置进行偏移---类似网页的聊天窗口以及广告之类

（脱离文档流-初始位置不存在，会破坏正常的网页布局）——

5.粘性定位的使用

粘性定位的属性和属性值 position：sticky

粘性定位是相对定位和固定定位的结合——（类似封面的导航栏需要置顶----出现滚动条之后继续保留在当前页面所固定的位置）

相对定位不脱离文档流

固定定位中的相对于浏览器

方便 但是兼容性差

6.定位属性的总结

定位的属性:position

属性值

1.静态定位 默认值

2.相对定位 relative

- 相对于自身初始位置

- 不脱离文档流

3.绝对定位 absolute

- 相对于父级 如果父级没有定位属性 就相对于浏览器

- 脱离文档流

4.固定定位 fixed

- 相对于浏览器

- 脱离文档流

5.粘性定位

- 相对于浏览器 并且不会脱离文档流

- 兼容性很差 在工作中使用需要查看兼容

7.叠层属性

叠层属性的属性和属性值：z-index：auto / number

数字可以设置正负

数字越大越往上显示

必须在定位环境下显示（明确定位 例如 id class）