HTML 布局、浮动、与定位等

以及一些知识点

网页布局：规范代码

合理使用这些元素，可以使用网页代码看上去更规范、准确

元素	语义
header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

具体如何使用可参考这张图，其各个元素详细的含义就不一一解释了，毕竟 我爱div。

虽然是说，有这么多标签，利于我们更规范、准确的去对网页进行布局，
但是！我还是喜欢 div div div div div div 一路干到底哈哈哈哈哈哈

实体字符：符号显示问题

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
具体的实体字符表可参考：w3c

所以需要实体字符名称来表示

测试：

<p>这是一个<p>标签</p>          ×错误
<p>这是一个&lt;p&lt;标签</p>    √正确

网页：

浮动：容易导致整个页面布局出现错误

知识点

标准文档流是怎么显示元素的？

三条规则：
  1.浏览器按照HTML代码出现的顺序显示元素。
  2.遇到块元素独占一行，即从上到下显示。
  3.遇到行内元素不分行，从左到右显示，碰到父标记的边缘换行显示。

做一个简单的示范

一个 img 和两个 p 标签，此时给图片加入左浮动

float: left;

可见 img 这个块元素，脱离了标准文档流，浮动块后面的空位，被后面的标签填充

整理

 1.浮动块脱离标准文档流，不再保留原先的位置，因此在浮动块后面的标记会将空出的位置占据。
 2.任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性：
  · 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
  · 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  · 行内元素同理
 3.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流.。

定位：position属性

首先要了解什么是静态定位、相对定位、绝对定位、固定定位。

知识点

静态定位

· 静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。
· 所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。
· 在静态定位状态下，无法通过top、bottom、left或right属性来改变元素的位置。
简单点，就是默认的定位方式

相对定位

相对定位是将元素相对于它在标准文档流中的位置进行定位。

绝对定位

· 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据**body根元素（浏览器窗口）**进行定位。

给 div2 加一个父元素

固定定位

· 固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

position:sticky

position:sticky 是一个比较新的属性
  类似 position:relative 和 position:fixed 的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
如：
当前页面

滚动条下拉一段距离后的页面，灰色区域固定在了顶部

灰色区域的css：

.TopIndex{
    /* border: 1px solid red; */
    background-color: #ddd;
    height: 100px;
    position: sticky;
    top: 0px;
}

使用此属性有几个需要注意的地方
  1.父元素不能 overflow:hidden 或者 overflow:auto 属性。
  2.必须指定top、bottom、left、right 4个值之一，否则只会处于相对定位
  3.父元素的高度不能低于sticky元素的高度
  4、sticky元素仅在其父元素内生效

z-index

当元素重叠时，可用 z-index 来调整重叠的顺序

注： z-index 仅能在定位元素上奏效（例如 position:absolute;）！

一些技巧和需要注意的地方

1.在head标签中引入样式表，会加快网页加载速度。
在页面底部引入JavaScript文件

2.vsc 输入lorem 可用快速填充乱数假文。

3.用 div.item*3>input:checkbox+i.iconfont 这种方式 可用快速的生成标签。

4.用 !important 提权可以解决js触发后无法再触发 :hover 的问题。
但 !important 并非最高最高权限 min-width、max-width、min-height、max-height 这四个属性能限制。
且当 min 和 max 发生冲突时，min 高过 max。

5.calc()： 计算函数，在用于调整属性位置的时候相当好用，
如标记高度为 10px 要让他居中：

top:calc(50% - 5px);

6.个人比较喜欢的绝对居中方法：

用于写登入页面什么的很好用

top: 50%; left: 50%;
transform: translate(-50%,-50%);

7.！除颜色外，box-shadow 可用使用四个参数，而且 text-shadow最多能使用三个。