盒子模型
2013-12-06 00:01
162 查看
盒子模型是使网页中各个元素能合理地进行组织的一套原则和规范。有content(内容)、border(边框)、padding(内边距)、margin(外边距)4个部分组成。一个盒子实际在页面上占据的空间由“内容+内边距+外边距+边框”组成。也不是用<div>定义的网页元素才是盒子,所有的网页元素都可以看做是盒子。
当连个元素是行内元素水平定位margin设置时,它们之间的距离是第一个元素的margin-right加上第二个元素的margin-left,若是垂直排列的块级元素,则margin的距离是两者制作较大的,这种现象称为margin的“塌陷”现象。
当块级元素的定位为嵌套关系(父子关系,即一个元素包含另一个元素)时,margin将以父块的内容为参考。
如下代码:
可以看出外层盒子的宽度会自动延伸,直到浏览器边界为止,而里面嵌套的div宽度也会自动延伸,并以外面的内容部分为限。
当margin为负值时会使设为负值的块相反方向移动,甚至覆盖在一个块上。
盒子的定位:
盒子的定位有四中方式:
static(静态定位 ,是默认值) :盒子以标准流方式布局
relative(相对定位):盒子以标准流方式为基础,是盒子相对于原来的标准位置偏移指定距离。
absolute(绝对定位):盒子的位置以它的包含框为基准偏移。
fixed(固定定位):以浏览器窗口为基准定位,即拖动浏览器窗口滚动条是,依然保持对象位置不变。
当连个元素是行内元素水平定位margin设置时,它们之间的距离是第一个元素的margin-right加上第二个元素的margin-left,若是垂直排列的块级元素,则margin的距离是两者制作较大的,这种现象称为margin的“塌陷”现象。
当块级元素的定位为嵌套关系(父子关系,即一个元素包含另一个元素)时,margin将以父块的内容为参考。
如下代码:
<HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> div.father{ background-color:#fffebb; text-align:center; font-family:Arial1, Helvetica, sans-serif; font-size:20px; padding:10px; border:1px solid #000000; } div.son{ background-color:#a2d2ff; margin-top:30px; margin-bottom:0px; padding:15px; border:1px dashed #004993; } </style> </HEAD> <BODY> <div class="father"> <div class="son">内容距离父div边框为10+30+15+1=56px</div> </BODY> </HTML>运行效果如图:
可以看出外层盒子的宽度会自动延伸,直到浏览器边界为止,而里面嵌套的div宽度也会自动延伸,并以外面的内容部分为限。
当margin为负值时会使设为负值的块相反方向移动,甚至覆盖在一个块上。
盒子的定位:
盒子的定位有四中方式:
static(静态定位 ,是默认值) :盒子以标准流方式布局
relative(相对定位):盒子以标准流方式为基础,是盒子相对于原来的标准位置偏移指定距离。
absolute(绝对定位):盒子的位置以它的包含框为基准偏移。
fixed(固定定位):以浏览器窗口为基准定位,即拖动浏览器窗口滚动条是,依然保持对象位置不变。
相关文章推荐
- 盒子模型
- CSS盒子/框模型
- CSS背景、尺寸、显示、盒子模型以及元素的定位
- 盒子模型关于嵌套关系、margin:0 auto与text-align区别
- 盒子模型(div)
- CSS 盒子模型边界合并
- 盒子模型详解
- css中的盒子模型及其浮动
- 盒子模型的总结
- CSS之盒子模型(Box Model)
- HTML+CSS之盒子模型
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- css中盒子模型的理解
- 盒子模型
- css知多少(7)——盒子模型
- box-sizing重置盒子模型计算规则
- css基础 盒子模型 外边距 边线 内边距 内容的布局(图)
- CSS 盒子模型
- 盒子模型要注意的问题
- CSS 盒子模型