html，css总结

1、HTML
行标签：span、strong 、i 、b、a
这类元素会占据尽可能少的空间，并且一个紧贴一个从左到右，从上往下排列、他们不受width、height样式影响、在窗口变化时，他们大小不变，但会自动行

块标签：div、p 、section 、h1 、header 、footer
这些元素会独占一行，它们受width和height的控制、在窗口变化时，他们跟着变宽或边窄、除非设置了width min-width max-width
它们在纵向上也会尽可能少的占用空间 这类元素叫块元素(标签)

行内块：img
有一些元素不在这些类别中 或很难分类 如script link title td等

   用一下方式可以修改他们的默认特性
        display:inline    即行元素
       display:block    即块元素
       display:inline-block 即行内块元素
       display:none; 可以隐藏标签 
       visibility: hidden; 也可以隐藏标签 但标签的位置仍然被占居着

转义字符：
&lt：小于号
&gt：大于号

      &emsp：表示一个中文空格
      &nbsp：表示一个英文空格
      　

      &copy：版权声明

      <br> ：换行

      &spades; 纸牌的四种花型
      &clubs;  
      &hearts;
      &diams;

语义化标签
header main aside footer
单纯的表示一个删除线
表示一个删除线 具有语义化
表示文本加粗 具有语义化
单纯的表示此处文本加粗

里面的内容，所有空格都可以显示出来（想怎么写都可以）

表格标签：
caption定义表格标题

table标签声明一个表格
tr：表示一行 rowspan：行合并
td：表示一列 colspan：列合并

表头，文本加粗
设计表主体样式
设计表尾样式

       <article> article定义主要文章

CSS页面结构
弹性布局 是H5出的布局方式，不需要清除浮动
display：flex
justify-content：项目在主轴上的对齐方式
space-around; 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍
center; 居中
flex-end; 右对齐
flex-start; 默认值 左对齐
space-evenly 完全等间距评分
space-between 两边贴边 中间等距平分
flex-end 已结束位置排列
alingn-items： 交叉轴方向的对齐方式
flex-end; 终点对齐
flex-start; 起点对齐
center; 居中
baseline; 第一行文字的基线对齐
tretch; 默认 如果项目未设置高度或设为auto，将占满整个容器的高度。
align-self: 自身在交叉轴对齐方式，即会覆盖父标签的

align-items的样式
flex-direction： 弹性方向，属性决定主轴的方向
row 相当于左浮动
row-reverse 起点在右端、相当于右浮动
column 起点在上沿、从上到下
column—reverse 起点在下沿、从下到上
flex-wrap： 是否可以换行 、
order: 0; order属性定义项目的排列顺序 数值越小越靠前 默认为0

弹性布局换行对齐
align-content: flex-start;如果不换行 以下样式无效
align-content: flex-end;
align-content: space-around;
align-content: space-between;

弹性布局空间分配：
flex-shrink: 8; 定义了项目的缩小比例 默认值1 即如果空间不足，该项目将缩小。设置为0将不会收缩 值越大收缩的越厉害
flex-grow: 1; 属性定义项目的放大比例 默认为0 即如果存在剩余空间 也不放大、flex-grow是将剩余空间划分成所有flex-grow值得总和指定的份数 然后再将这些、份数分配下去
flex-basis: 600px;

浮动布局
使用浮动布局必须要解除浮动，否则会造成后面的子元素排版错乱，浮动布局的元素会脱离文档流，形成一个新的文档流，如果不清除浮动 则会导致父元素文档流无法闭合 造成后面的子元素的排版错乱
float：left/right；
浮动元素不占文档空间；
清除浮动
1)在使用浮动元素的后面添加一个相邻div空块标签，设置：clear：both
2)父标签中添加；overflow：hidden

定位布局
position：fixed absolute relative static
fixed 浏览器窗口，此定位方式脱离文档流 、顶宽居中无效

absolute 绝对定位的元素对于非static定位的上层元素进行定位，可以使用left right top bottom进行左右上下的移动 ，使用此定位方式的元素会脱离文档流
1 会脱离文档流 位置丢失
2 top right left bottom 都可以起作用
3 当绝对定位没有参照物时 依照body进行定位
如果设置了参照物 则依据参照物进行定位
当有多个参照物时 则依据离他最近的参照物进行定位
4 绝对定位时margin外边距不受影响 上下方向的外边距不重叠

      绝对定位的元素首先要查看其父元素是否为static定位，如果不是，则对其进行定位；如果是，则向上查看其父元素的父元素是否为static定位，如果不是，则对其进行定位；如果是，则继续向上查找，一直找到根元素为止

如果需要对其父元素进行定位，我们一般可以给其父元素设置成相对定位

  relative 相对于自身的位置来进行微调

1 不会脱离文档流 原来的位置没有丢
2 top,right,botton,left可以使用
3 定位参照自己原来的位置
4 相对定位时 margin外边距不受影响 并且重叠

static: 页面默认的定位方式，静态定位