HTML、CSS学习总结二:浮动与定位
在总结浮动与定位之前,先引入一个概念,就是HTML中文档流,文档流简单的理解就是HTML中的元素按照代码的先后顺序以从左到右,从上到下的顺序排列,一个接一个的排列,也就成为了一个流stream,每个元素都在文档流中都占据一定的大小、空间,改变一个元素的布局会直接影响其他元素的布局。
而浮动与定位中的绝对定位都会使元素脱离文档流,什么意思呢?就是说如果一个元素被设置了浮动或绝对定位属性,那么这个元素好像脱离HTML文档一样,而其余的元素重新按照正常的文档流排列。
浮动:浮动会使元素脱离正常的文档流,浮动的块状元素元素是以浮动元素所在行为基准,并且按照不合并margin的方式来进行浮动的。浮动元素会脱离当前的文档流,将元素放在父元素内边距里侧的左边或者右边,浮动的定位层在块状元素之上,内联元素相邻,自成一新的文档流,按照从左到右,从上到下的顺序排列。
定位:元素默认的定位方式是position:static;当设置了position:relative; position:fixed;或者position:absolute;时,我们说元素是被定位了的,其中一个绝对定位(position:absulote;)的元素,是以离它最近的被定为的祖先元素为基准的,绝对定位会使元素脱离文档流,它的layout将不会对其他元素的产生影响,而其他的元素重新按照正常的文档流排列。一个元素,无论是display:block;还是inline-block还是inline,只要设置了绝对定位,那么它将表现为一个绝对定位元素,绝对定位的定位层在未进行绝对定位的元素之上。可以设置width、height,不会拉伸但是会自动包裹。通过绝对定位可以将元素定位到其他元素的上面或者上面,从而实现首字母下沉、文本替换等效果。
对于一个元素,通过display:block | inline; positon:static | absolute;以及设定尺寸(sized)、拉伸(stretched)、包裹(wrapped)的不同组合,将产生多种不同的设计模式,这也是HTML网页设计中经常用到的设计模式,总结了一下如下表: (图片引自博主的新浪博客)
如果你交给某人一个程序,你将折磨他一整天;如果你教某人如何编写程序,你将折磨他一辈子。