3.27笔记

1.大部分块级元素，默认display：block,li除外，li默认display:list-item（列表元素）
2.行内元素默认display:inline, 其中input默认display:inline-block;(行内块元素）
3.内联元素中特殊的内联块元素：
特点：
1.可以设置宽高
2.在一行内逐个显示，默认情况下有间距（回车造成的间距，加浮动就没了）
3.当dislplay的属性为inline-block时，能支持属性：vertical-align：top/middle/baseline/bottom（垂直对齐：顶线、中线、基线、底线）
总结：让一个元素在父元素里面上下居中：
1.给父元素添加text-align:center(左右居中)
2.给当前元素添加：display:inline-block;和vertical-align:middle;
3.在当前元素的后面加一个span(不要回车），等于添加一个空span做参照
                                                           给span添加样式：display:inline-block;
                                                                                       vertical-align:middle;
                                                                                        width：0；
                                                                                        height:100%;
行内块元素:input;img
img可以当做行内块元素使用；但img在浏览器里的默认的属性为display:inline;
为什么图片能直接加大小？从另一个角度进行分类：分为置换元素与非置换元素
典型的置换元素包括img/input ，依赖标签的属性或者自身的元素类型，来决定在页面中显示的状态。
因为是置换元素所以能添加大小，因为置换元素在页面显示过程中生成一个框,这个框是能添加大小的
非置换元素：不是置换元素的都是非置换元素。
标签嵌套规则：
1.尽量让块级元素作为父元素
2.内联元素的子元素尽量也是内联元素
3.p标签中不能出现h1-h6,div等块状元素
4.p标签和h1-h6 不能互相嵌套
定位：
css定位步骤：
1.让元素知道自己要做位置变动
2.确定谁是参照物
3.指定固定的坐标
定位属性：position属性：设置或检查元素的定位方式。
指定坐标：left/right/top/bottom
属性值：
1.position:static(静态定位)默认显示添加不设置的效果
2.position:absolute;(绝对定位)
a:绝对定位的参照物：已经有定位的父元素为参照物，如果父元素没有定位或者没有父元素就以整个文档流为参照物
b:绝对定位的特点：不占据空间，脱离文档流。