元素类型+定位

1、元素类型
块状元素

块状元素在网页中以块的形式存在
默认情况下，块状元素都会占据一行
块状元素可以定义自己的宽高
块状元素可以作为其他元素的容器，可以包含块元素和内联元素
例：div dl form h1 h2… hr ol p table ul等
注意：
h1-h6、p标签里面不能包含其他块元素，包含本身
内联元素

内联元素逐个在行内显示
内联元素不能定义它的宽和高，它的宽和高根据内容来确定
内联元素也可以定义padding,border,margin,background等属性
例：a b br img input select label span sup sub textarea等
内联块元素

内联块元素和其他元素都在一行显示
元素的高度，宽度，行高，以及间距
例：img input textarea
元素转换

通过display属性改变元素类型
属性值：
block:块状显示
inline:内联显示
inline-block:元素以块状显示，行内其他元素显示在同一行(只有这一个元素类型支持vertical-align属性)例：input img
none:此元素不会被显示
list-item:将元素转换成列表
当元素设置float属性后，该元素就具备了块状元素的特点
置换元素

置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；标签的type属性来决定是显示输入框，还是单选按 钮等。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。 置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。
不可替换元素（非置换元素）：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。
2、定位
定位属性

position:static(无特殊定位)/absolute(绝对定位)/relative(相对定位)/fixed(固定定位)/sticky(粘性定位)
static:默认值，无特殊定位
absolute:绝对定位，对象从文档流中拖出，其他元素块及文本可以被覆盖在下边，根据最近一层有定位属性的父元素进行定位，如果没有就相对与页面定位，其层叠通过z-index属性定义
relative:相对定位，相对与自身原本位置进行偏移
fixed:固定定位，相对与浏览器窗口进行定位，不会随滚动条滚动
sticky:粘性定位，在屏幕范围内设置的top,left属性无效，当该元素的位置将要偏移出范围时，定位会变成fixed
注意：
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
透明属性

opacity:number;
filter:alpha(opacity=number)兼容IE8及以下浏览器
3、flash和marquee(滚动字幕)
flash

语法：

<object width="value" height="value">
<embed width="value" height="value" src="路径" wmode="transparent"(设置背景透明)></embed>
</object>

滚动字幕

<marquee behavior（行为）="scroll(滚动)/alternate（晃动）" direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"
scrollamount（滚动速度）="value" height="value(上下滚动范围)" width=""(左右滚动范围)>
内容
</marquee>

4、拓展
将块元素在容器中垂直居中

对于内联块元素如img元素在盒子中垂直居中，对其父元素设置行高与高度同高，设置img的对齐方式：vertical-align:middle
如果完全垂直居中应该去掉浏览器默认的字体大小，将其父元素的font-size:0;

如果设置p标签的多行文本在父元素中垂直居中，可以将父元素转换为表格dispaly:table-cell，设置垂直对齐方式vertical-align:middle
就可以将它的子元素p整体垂直居中。这时盒子的父元素是table，并不是书面上的父元素，所以要设置table-cell的宽高

同样，对于p标签多行文本居中，可以给p标签添加一个兄弟标签如span，将其设置为inline-block,并且垂直对齐方式verticla-align:middle，width:0,height,0；
并且把p标签也设置为inline-block,vertical-align:middle;
此时p标签就会相对兄弟元素进行垂直居中