css盒子模型
2015-07-02 09:38
531 查看
盒子模型概述
盒子模型是CSS的基石之一,他指定元素如何显示以及(在某种程度上)如何交互。页面上的每个元素都被看做一个矩形框,这个框由元素的内容、内边距、边框和外边距组成,如图所示:![](http://images.cnitblog.com/blog/590219/201401/03142553-a67e888ef2944a6084eefba91802cfb4.png)
内边距,边框和外边距都是可选的,默认值为0,但是很多元素会由用户代理样式表(浏览器样式)设置内边距和外边距,可以通过通用选择器显式地将内边距和外边距设置为0来覆盖浏览器样式:
* { margin: 0; padding: 0; }
内边距出现在内容区域周围,如果给元素添加背景,北京会应用于内容和内边距组成的区域,内边距通常用于创建一个隔离带,使内容不会与背景混在一起;边框会在内边距的外边添加一条线,这些线可以是多种样式的,如实线,虚线活点线等;在边框外部的是外边距,外边距是透明的,通常使用它控制元素之间的间隔。Width和Height是指内容区域的宽度和高度,当设置margin或padding时,会改变整个元素框的尺寸。
外边距的叠加
以下情况仅限于普通元素,非浮动元素。1. 当两个或更多垂直外边距相遇时,他们形成的外边距并不是上面元素的下外边距和下面元素的上外边距之和,而是这两个外边距中值较大的一个,如图所示:
![](http://images.cnitblog.com/blog/590219/201401/03145151-a306672f9e644ff6be6a37ec80930843.png)
2. 当子元素的上外边距与父元素的上外边距相遇时,同样会形成一个值为较大外边距值的外边距,如图所示:
![](http://images.cnitblog.com/blog/590219/201401/03150027-8172d64ffbdd4830a0a05a89c76dd747.png)
3. 如果一个元素的内容为空,则上外边距和下外边距也会发生叠加,如图所示:
![](http://images.cnitblog.com/blog/590219/201401/03150613-35ae46ffb0084d32aa5b1320e995eb6a.png)
相关文章推荐
- CSS样式表
- (转)Seven Ways of Centering With CSS
- 样式表中的 element.style样式如何修改
- 简短的几句js实现css压缩和反压缩功能
- 通过Span设置TextView中字体的样式、大小
- index.css
- 不错的文字样式
- css div img 垂直居中对齐!
- 父元素未被子元素的margin撑开-外边距折叠问题
- css权威指南阅读笔记-第三章声明的层级
- 多屏复杂动画CSS技巧三则(转载)
- 使用JS配合CSS实现Windows Phone中的磁贴效果
- Selenium - CSS Selector
- CSS3之Transform(变形)一
- 什么是CSS网页切图
- CSS选择器
- js的封装库css
- CSS3小分队——进击的border-radius
- css嵌入任意字体
- CSS3动画(性能篇)