上一篇我提到每一个元素都有自己的display属性,其属性值可以改变。其改变的方式,可以利用神奇的css盒模型(BFC)。
盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局。一个盒模型是一个box,包括内容(content),padding(内边距),border(边框),margin(外边距)。我们知道行内元素是在一行排列,其内容决定宽高。块级元素可以自定义宽高,但是占据一整排。而成为box后,他内容的宽高我们就可以自行设定,且可以不占据一整排。如何将一个行内元素变成一个块级元素呢?可利用以下几种方式:1、根元素;2、float;3、overflow;4、display;5、position。其中经常会用到的是float和position,当我们定义一个div是,其中包括img,h标签,p标签,还有蒙版等等,如何使他们按照我们预想的方式排列。则是float浮动和position定位的有序组合。自然当用到浮动将其放在一排上是,而后面的box想另起一排,然后上一排后面剩余的宽度还足够后面的 box时,我们可以用到一个清除浮动,clear。
特别是在页面布局的时候,BFC让我发现这个页面可以随心所欲的排列,感到特别神奇。就像树上一朵花,我想让它开在哪跟枝上,想它长什么样,就是那个样。