浮动与定位

学习笔记 何锋
文章标签: HTML基础

浮动:

1.常用的只有两个属性,left或right,当盒子浮动之后,此时该盒子不属于文档普通流,可以漂浮在文档普通流     之上,原来位置会被其他的DIV盒子取代,也会被行级标签(p)取代,但p标签中的文字会空出浮动框的宽高显示,而img标签不会取代浮动框原有位置,img宽高不超出文档范围时会紧随其后同一行显示。image.png

2.对于浮动布局,基本做法,给予外框宽高,内部盒子同样给予宽高进行浮动。浮动四大基本元素:宽、高、内边距,外边距。浮动的盒子通常顶着左上角排列,无法给予left或top属性,只能通过外边距和内边距进行浮动到指定位置。

3.为什么要清除浮动?首先,块状元素会钻进浮动元素下面,被浮动元素覆盖;其次,行内元素会围绕浮动元素,为浮动元素留出空间;再次,浮动会造成父级元素塌陷。

定位:

1.相对定位:相对于本身位置而言进行定位,在原位置上进行偏移量。相对定位会无论移动与否都占据空间。

2.绝对定位:相对于最近定位的元素进行定位,如无最近定位元素,则默认以body进行定位,绝对定位不占据空间。

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :