9月2日笔记(元素类型、基线、定位属性、包含块）

元素类型、置换元素和非置换元素

元素类型：块元素     内01联元素（内联元素  内联块）
置换元素：指的是没有设置css的情况，这类元素默认带有样式（css格式化以外的样式）
常见的有：input textarea botton select （input属性表单元素  button属于html元素）

非置换元素：除了上述这些元素，其他的都是非置换元素（或者说本身没有样式的元素）

元素类型转换：
css中   display把其他的类型转成块级元素  把隐藏的元素让其显示出来
  		display:none； 可以让元素是隐藏
  		display:inline：转成内联元素
  		display:inlin-block：转成内联块元素
  		display:list-item：转成列表元素
  		display:flex：弹性盒布局
  		display:grid：网格布局
  		更多属性：参考菜鸟教程
  		注意：不能把内联块元素转换为内联元素

基线

base-line:基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿；
图片默认是基线对齐方式

基线、底线、顶线、中线、vertical-align
顶线：中文汉字的的上端沿；
中线：横过英文字母x的中间的线；
基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿；
底线：中文汉字的下端沿；
内容区：指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。
行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，也可以认为是相邻文本行基线间的距离。
行距：指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。当然，我更愿意认为是（上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2。

align和valign用于表格的单元格文本的对齐方式

垂直对齐方式 ：
vertical-align:top|middle|bottom； 工作中一般用top
vertical-align
此处需要特别注意的是：垂直对齐属性只对table文本有效（是指包含了#Text节点的元素节点才能正确地处理vertical-align属性）。同时，该属性不能继承。
只有元素属于inline或是inline-block ，vertical-align属性才会起作用。
作用：
1、可以解决图片上下间隙问题
2、可以让table里面的文本垂直对齐  
注意：对内联和内联块元素起作用

vertical-align：可以实现不同高度的盒子的排列效果


基线对齐（vertical-align : baseline）使元素的基线同基准元素（取行高最高的作为基准）的基线对齐
顶端对齐（vertical-align : top）是将元素的行内框的顶端与行框的顶端对齐
底端对齐（vertical-align : bottom）与顶端对齐（vertical-align : top）相反
中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线（文字元素的行内框中线）对齐。
文本顶端对齐（vertical-align : text-top）是将元素行内框的顶端同行框的顶线对齐
文本底端对齐（vertical-align : text-bottom）是将元素行内框的底端同行框的底线对齐
上标（vertical-align:super）使元素的基线相对于基准元素的基线升高；
下标（vertical-align:sub）使元素的基线降低，移动的幅度CSS规范中没有规定，由浏览器来决定。
长度值和百分比值和上下标类似，可使元素的基线相对于基准元素的基线升高（正值）或者降低（负值）。

定位属性

关于流：
流就是一种规则
1：标准流（文档流）：正常的网页标签排列属性
2：浮动流：元素设置了float属性后就成为浮动流
3：定位流：元素设置了position属性后就成为了定位流

定位介绍：
语法：position:static（默认值-静态定位）| absolute(绝对定位) | relativ e(相对i定位) | fixed（固定）
定位：让元素的位置发生改变
定位能做那些东西呢：网页上面的小广告的位置   图片的切换左右按钮样式   下拉菜单  优惠信息等等
定位属性层叠性：可以覆盖在其他元素上面
positons属性需要配合 top bottom tright left这个属性一起使用

定位属性的特点：
static静态定位：遵循标准流的规则，正常的网页排版顺序
relative相对定位：
1、不脱离文档的，所以占据空间（位置）的
2、相对于自己以前在标准流的位置进行定位的  相对定位分为两个位置 以前的位置（保持不变）  现在的位置（发生改变）
3、相对定位是区分元素类型的---元素以前是什么类型的（块 内联 内联块） 设置了定位后元素还是很忙类型的
作用：对元素进行微调，配合角度定位来使用（做参照）---子绝父相
absolute:相对定位
特点：
1、脱离文档流，不占位置  
2、相对于父级（祖先）定位，绝对定位相对于哪一级定位，条件是有没有定位流
查找规则：先找父级如果有定位流，就相对于父级进行定位，如果没有定位流，继续网上一级查找，知道找到定位流，找到最外层还是没有，就相对与body进行定位
不区分元素类型，都可以使用
注意：绝对定位可以让元素层叠，最后定位的元素，排列在最上面的

定位层级属性（只有定位属性才有）
z-index:auto|number   数字越大在越上面   数字没有单位 可以为负值 不区分元素类型

元素垂直居中的方法：
第一种方法：
子绝父相  父级元素：position：relative   子元素:position：absolute;
子元素：left right top bottom都设置为0	  margin:auto；

第二种方法：
子绝父相  父级元素：position：relative   子元素:position：absolute;
left:50%;
margin-left:-(子元素width/2)
top:50%
margin-top:-(子元素height/2)

包含块

包含快是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示内容的参照物
定义元素为包含块，给绝对定位的父级元素添加position：re'lative