第二天补加

定宽居中

margin:0 auto;
auto 自动计算 间距平分；
两个值 分别表示上下、左右；
四个值 分别表示 上、下、左、右四个方向的外边距；

div标签

div 标签 dicision的缩写，划分、分隔 作用就是将页面划分为不同的区域
div 是一个块元素
div 标签不设置宽高时，高度有内容撑开，宽度和父级元素等宽
单独设置某一般的外边距
margin-left/right/top/bottom:calc(总宽度)/要分几块
calc() css 中函数的计算函数
文本标签-语义化标签
strong del header footer main …
b标签 标记网页中的粗体文本，仅仅是将文本加粗，标签中的内容不尽兴强调
strong 标记网页中的粗体文本 语义化标签，除了文本加粗以外，还有强调的语气，表示标签中的内容是页面中需要重点关注的内容
css样式也可以实现文本加粗的效果 font-weight:bold 通过css设置的加粗，也仅仅是一个加粗的效果，没有强调的语气
删除线
s仅仅是删除的效果
del 具有删除的语义 delete 删除
css样式 text-decoration：line-through; 仅仅是一个删除线的效果

html语义化的好处
1.增加代码的可读性
2.SEO(搜索引擎优化)

行元素、块元素、行内块元素

html标签按照排列布局方式分别为行元素、块元素、行内块元素

块元素的特点：独占一行，可以设置宽高，如果不设置宽高则默认宽为父级元素宽度，若没有内容，则高度为空，布局方式默认为块元素
常见的块元素有：div h1~h6 p header footer section main …
行元素的特点：不能设置宽高，宽高只能取决于自身内容，不独占一行，多个行内元素会左右排列，一行到最后显示不下时会自动换行， more为行元素标签
常见的行元素的标签：span a strong b s del …
行内块元素的特点：可以设置宽高，不独占一行，多个行内块元素左右排列并自动换行
默认行元素：img button input …
行元素可以通过设置父元素的text-algin 实现水平居中
行元素和块元素不是绝对不变的，任何元素都可以通过display样式来改变布局方式类型
前面为display:块元素 block 行元素 inline 行内块元素 inline-block;

定位方式

固定定位
fixed 定位 会导致当前的标签脱离原来的文档流，原来在文档流中的位置就不存在，标签被浮起，原来的位置会被后面的标签侵占
一个元素如果脱离了文档流，就不会参与流式布局，父元素中也不再有他的位置。块元素脱离文档流之后，宽度的默认值不再为父元素的100%，需要主动设置宽度
固定位置后，定宽居中失效
可以通过left/right/top/bottom调整布局
多个标签拥有相同的样式，中间可以用,逗号隔开
相对定位
设置定位方式为相对定位，一般用于做位置的微调
relative 相对定位不会脱离文档流，原来的位置还在，相对标签自身原来的位置做微调
定位之后，可以通过top right bottom left 调整位置
绝对定位
absolute 绝对定位 标签脱离文档流，不再参与流式布局，原来的位置被后面元素侵占
绝对定位的标签，做位置调整参考物默认是一个非static静态定位的上级标签
通过left/right/top/bottom调整位置
static 静态定位，元素的默认定位方式，进行流失布局
relative 相对定位 当需要将元素在原有的位置上进行微调时使用
特点：不会脱离文档流，参与原来的流式布局，可以在原有的位置上微调
absolute 绝对定位 当需要通过一个标签坐标设置其位置时使用
特点：脱离文档流，导致原来的位置不存在，标签会被浮起，可以通过left/top/right/bottom调整位置
fixed 固定位置 希望一个标签不随着浏览器滚动而滚动时使用
特点：脱离文档流，导致原来的位置不存在，标签会被浮起，可以通过left/top/right/bottom调整位置，该标签不会随着浏览滚动而滚动
文档流
html中所有的标签默认都是static定位，static采用的就是流式布局
流式布局：标签元素依次从左向右（行元素、行内块），从上往下（块元素）的方式进行排列
文档流：一个标签内部的子标签元素采用流式布局时，这个元素内部就会形成一个文档流，每个子元素在文档流都有自己的位置
父子选择器 格式 父标签>字标签 可以找到条件的标签元素
表格标签
table 表格标签，用于显示一个表格，块元素
table 不设置宽高，宽高被内容撑开，设置宽度而内部的td没有宽度时，td会按照内容长度的比例拉伸
thead 表头 用于显示这一列的名称
tr 表示一行

<th></th>
<th>