2020.0327知识总结

知识总结

一、元素类型的转换：
Display属性：
Block
Inline
None
Inline-block
List-tiem
（1）大部分块状元素默认的display值都是block，其中li默认的值是list-item。（列表元素）
（2）大部分内联元素默认的display值是inline，其中input默认的值是inline-block（行内块元素）
内联元素中最特殊的一个：行内块元素
特点：1：可以设置宽高
2：在一行内逐个显示
3：在当前元素的display的值为inline-block，能支持vertical-align属性。
属性：vertical-align：；垂直对齐
属性值：top/bottom/middle/baseline
上 下 中 基线
让一个元素在父元素里面上下左右居中：
步骤：1：给父元素添加text-align（左右居中）
2：给当前元素添加：
Display：line-block；
vertical-align:middle;
3:在当前元素后面直接添加一个空的span标签，给span标签设置：
Display：line-block；
Width：0；
Height：100%；
vertical-align:middle;
行内块元素：input display值为inline-block
Img display值为inline

拓展：标签嵌套规则：
1：尽量让块状元素作为父元素（容器）存在。
2：内联元素的子元素尽量也是内联元素。
3：p标签中不能出现h1-h6标签。
4：p标签h1-h6不能互相嵌套。
问：图片默认的display值是inline，为什么图片能直接是设置大小？
答：从另一个角度对所有标签进行分类。分为置换元素和飞置换元素，
置换元素：典型的置换元素：img/input 依赖标签的属性或者元素自身的类型，来决定当前元素在页面中显示的状态。因为是置换元素所以能添加大小，因为置换元素在页面显示过程中，会生成一个框架，这个框架能添加大小的。
非置换元素：不是置换元素的都是非置换元素。
二、定位
**例子：问：**把大象放冰箱需要几步？
答：第一步：把大象拿起来
第二步：确定参照物（冰箱）
第三步：确定具体坐标
问：Css定位需要几步？
答：第一步：让元素知道自己要变动位置。
第二步：确定谁是参照物
第三步：指定固定的坐标
定位属性：
Position属性：设置或检索元素定位方式。（如果元素有了position属性，元素就知道自己要做位置变动了）
属性值：（属性值才是告诉我们元素的参照物是谁）
指定坐标：left/right/top/bottom
Position属性值：
1：position:static;(静态定位)（该属性值是默认值，添不添加效果一样）
2：position:absolute(绝对定位)
绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以整个文档为参照物
绝对定位的特点：
不占据空间，脱离文档流。