码迷,mamicode.com
首页 > 其他好文 > 详细

神奇的盒模型(BFC)

时间:2016-04-17 12:56:23      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

     上一篇我提到每一个元素都有自己的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让我发现这个页面可以随心所欲的排列,感到特别神奇。就像树上一朵花,我想让它开在哪跟枝上,想它长什么样,就是那个样。

神奇的盒模型(BFC)

标签:

原文地址:http://www.cnblogs.com/nicole2koala/p/5400683.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!