HTML常用的标签
html,head,body,title,h1~h6,p,div,a,span,table,tr,td,th,ul,li,ol form,input,select,option,textarea
块级元素和行内元素
- HTML模式是流式布局。
- 所有的块级元素独占一行,所有的块级元素都可以设置大小。
- div,p,h系列,li
- 行内元素不独占一行,行内元素大部分是不能设置大小。
- table,img,a,span,input....
- 行内元素可以设置大小的:table和img。
行内元素和块级元素之间的切换
- 行内元素切换为块级元素: 将display修改block
- 块级元素转为行内元素:将display修改为inline
- 如果希望元素既不独占一行,也可以设置大小,将display修改为:inline-block
float的元素特征
- HTML中的元素都是平面的,只有XY和两个方向,但是一旦给元素添加float。就有z轴方向
- float之后,元素会离开之前的标准流。默认在另外一个层面靠左考上对齐。
- float之后的元素脱离了标准流,float的元素不会再将外部的元素撑大,要使用clera封闭外面的元素
HTML的四种定位方式
- HTML中的定位样式属性:position
- 默认定位:static。 标准流的定位方式. 当定位方式为static时候,样式属性left和top不生效
- 相对定位: relative。 当前元素相对于父级别元素的定位方式。
- 绝对定位:absolute。脱离标准流。 如果父级别的元素不是相对定位或者绝对定位,则当前元素默认是参考整个文档定位,如果父级别有定位,就参考夫元素定位
如果绝对定位是没有设置top和left的,这时绝对定位的元素在父元素内部。 一旦设置了top和left,就要看夫元素的定位方式了。 子绝父相 - 固定定位:fixed。 相对于窗体,固定在某个位置。
- 当由于定位的方式导致多个元素重叠的时候,可以使用z-index设置元素的显示顺序。