<!--
01:元素类型分类
块状元素、内联元素、可变元素
注：把内联块放在内联这一类里面
02:元素类型特点。
03：元素类型的转换
display属性
block
inline
none
-->
<!--
子元素有浮动，父元素必须保证有高度！！！
-->
<!--
元素类型的转换：
display属性：
属性值：
block
inline
none
大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)
大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)
-->
<!--
内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1:可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inlin-block 能支持vertical-align属性
-->
<!--
vertical-algin:;垂直对齐。
top
bottom
middle
baseline
-->
<!--
让一个元素在父元素里面左右上下居中。
1:给父元素添加text-align:center (左右居中)
2:给当前元素添加
display:inline-block;
vertical-align:middle;
3:在当前元素后面（不要回车），添加一个空的span
给span设置样式：
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
-->
<!--
行内块元素：
input
img当作行内块使用 -> 特殊的存在：拥有行内块的特点。
img默认情况下：在浏览器中display值为inline
-->
<!--
元素类型的分类：
块状元素、内联元素、可变元素
元素类型的转换：
display属性：
属性值：
block
inline
inline-block
none
list-item
行内块元素：input display为inline-block
img标签：浏览器默认解析的display的值inline
-->
<!--
标签的嵌套规则：
1：尽量让块状元素作为父元素（容器）存在
2:内联元素的子元素尽量也是内联元素
3: p标签中不能出现h1 - h6
4：p标签 h1 - h6 不能互相嵌套
-->
<!--
图片默认的display的值为inline 为什么图片能直接添加大小？？
从另一个角度对所有的标签进行分类。
分为：置换元素与非置换元素
置换元素：
典型的置换元素：img\input依赖标签的属性或者元素自身类型，来决定当前元素在页面中显示的状态。
因为是置换元素所以能添加大小。因为置换元素在页面显示过程中，生成一个框（框架），这个框能添加大小的。
非置换元素：不是置换元素的都是非置换元素。
-->
<!--
定位：让元素的位置发生改变。
例子：
把大象放冰箱需要几步？
第一步：把大象拿起来
第二步：确定参照物（冰箱）
第三步：确定具体的坐标
班级给卢本伟调换座位？
第一步：让他离开现在的位置（把他拿起来）
第二步：参照物：隔壁教室
第三步：坐标：坐在隔壁教室的门口。
css定位需要几步：
1:让元素知道自己要做位置的变动。
2：确定谁是参照物
3：指定固定的坐标
-->
<!--
定位属性：
position属性:设置或检索元素定位方式。
（如果元素有了position属性，元素就知道自己要做位置的移动了）
position的属性值：（属性值才是告诉元素参照物是谁）
指定坐标：left\right\top\bottom
-->
<!--
position的属性值：
1: position:static【静态定位】 (默认值：添加和不设置的效果一样的)
2: position:absolute【绝对定位】
a:绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以整个文档为参照物。
b:绝对定位的特点:
不占据空间,脱离布局流
-->
<!--
内联元素里面有个特殊的存在：
input默认的display的值为inline-block
vertical-align
让子元素在父元素里面左右垂直居中（记流程）
1:给父元素添加text-align:center (左右居中)
2:给当前元素添加
display:inline-block;
vertical-align:middle;
3:在当前元素后面（不要回车），添加一个空的span
给span设置样式：
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
-->
