- 浏览: 1609817 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。 盒子的尺寸是怎样精确计算的,请看下图:
如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。
注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影响盒子本身的大小,但是它会
影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的:
Width | width + padding-left + padding-right + border-left + border-right |
Height | height + padding-top + padding-bottom + border-top + border-bottom |
值未声明的情况
如果未声明 padding 或者 border,那他们或者值为零(使用 css reset 时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)
块级盒的默认宽度
如果未声明宽度,并且盒子是静态或者相对定位的,宽度会保持 100%的 宽度,padding 和 border 会向内推动,而不是向外扩展。
但是,如果明确设置盒子的宽度为 100%,那么 padding 就会向外延展。
The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
要注意的是,盒子的默认宽度并不真的是 100%,而是剩下的可能值(应该是说,剩余真实存在的宽度 - 糖伴西红柿)。应该了解这个特殊值,因为很多情况下,它对于设置/不设置宽度都是非常有用的。
我遇到的最大的麻烦就是 textarea(文本框) 元素了,它们需要设为宽度为所需的”cols”属性,并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%,但有 padding 时,就会延展 textarea 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。
无宽度的绝对定位盒子
未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此,如果盒中只有一个单词,盒子就会像那个词的表现一样宽。如果变成两个词,盒子的宽度也会相应增加。
这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口),然后就会折行。
对盒子来说,垂直扩展以适应包含的内容是很自然的。值得奇怪的是,不仅仅是不同平台下的文本表现不同,不同的浏览器处理这个问题时,也有很多怪癖。
无宽度浮动盒子
同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度,直到其父元素的宽度(其父元素不必是相对定位的)。由于这些无宽度盒 子的脆弱性,我们要学到的是关键任务模式的时候它们是不能依赖的,像总体页面布局中。如果浮动一列作为侧边栏使用,并指望那些内部元素(如图片)来负责包 含它的宽度,你就是在自找麻烦。
内联元素也是盒子
我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子,但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形,它们也可以像其它盒子一样有 margin, padding he border
折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边,但是只在第一行有效,因为那是盒子的起点。padding 正常的应用在文本的上部或下部,当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。
亲眼目睹一下
想看看组成页面的每个单独的“盒子”吗?试着把这行代码暂时放入样式表:
* { border: 1px solid red !important; }
<!-- post paging--> <!-- Post Meta-->
发表评论
-
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 751WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 731一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 928<td align="center" ... -
深入浅出URL编码
2009-08-11 19:58 617版权声明:如有转载请求,请注明出处: http://blog ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 577Absolute ,CSS 中的写法是:positio ... -
【CSS布局.1】盒子模型
2009-08-20 15:51 589例子: .box { width: 200px; ... -
【CSS布局.4】五种CSS布局类型
2009-08-20 15:52 617CSS 布局的五种类型概述 有五种基本布局定位类型可供选择: ... -
【CSS布局.3】列表样式定义法
2009-08-20 15:52 584CSS代码: .list{ margin: 0px 10 ... -
区别不同浏览器,CSS hack写法
2009-08-20 16:01 601区别IE6 与FF : backgroun ... -
常用CSS缩写语法总结
2009-08-24 17:55 642使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩 ... -
CSS颜色代码大全
2009-08-25 15:55 828CSS颜色代码大全 FFFF ... -
CSS @import at规则
2009-09-02 10:40 659at规则 HTMLDog指南 > CSS高级指南 &g ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:05 661前言 如果你想尝试一 ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:06 596熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种 ... -
彻底弄懂CSS盒子模式之二
2009-09-02 17:07 590作者:唐国辉 实现原理动画演示:http://www ... -
彻底弄懂CSS盒子模式之三
2009-09-02 17:08 710一、下面请看float的精彩表演,有请。 大 ... -
彻底弄懂CSS盒子模式之五
2009-09-02 17:09 560在本人上一篇教程《彻 ... -
彻底弄懂CSS盒子模式之四
2009-09-02 17:09 656前言 在用CSS控制排版过程中,定位一直被人认为是一个难 ... -
DOM标准与IE的html元素事件模型区别
2009-09-23 13:35 671事件 HTML元素事件是 ... -
15个优秀的第三方 Web 技术集成
2009-09-25 10:13 665在 Web 开发与设计中, ...
相关推荐
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素(图片、段落、单元格等)进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本节主要介绍...
这是一个CSS的PPT CSS 盒模型,主要介绍CSS中的盒模型
css盒模型css盒模型css盒模型css盒模型css盒模型
CSS+盒模型,css盒模型面试题,HTML源码
通过这个css盒子模型的实战,更好的理解css盒子模型
CSS盒模型的应用知识介绍,基础的CSS盒模型教学
总结:深刻理解盒模型是学习 div+css 的基础,是网页布局的前提。只有牢固掌握盒子模型的结构和原理,才能在网页布局中游刃有余。 因此,在学习 div+css 时,一定要重视盒子模型的学习,掌握盒子模型的组成部分、...
CSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rar
详细分析了css盒模型 希望对大家有帮助
CSS 盒子模型 CSS 盒子模型是 CSS 的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互。在网页设计中,每个 HTML 元素都可以看作是一个装了东西的盒子,这个盒子由元素的内容、填充、边框和边界组成...
CSS 盒子模型
简述介绍css盒模型,从基础的一些知识解释了盒模型,以及他的一些使用方法。 来自新人小白的粗略文章,希望大家多多包涵!
CSS盒子模型的应用
CSS盒子模型图片,和大家分享一下,里面详细的介绍了CSS的盒子模型
NULL 博文链接:https://yiminghe.iteye.com/blog/254095
CSS+盒模型
1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用
CSS 盒子模型和排版 CSS 盒子模型是前端开发技术中的重要概念,它是 CSS 布局页面元素所使用的一种思维模型。在盒子模型中,所有页面中的元素被看做是一个个盒子,它们占据一定的页面空间,在其中放着特定的内容。...
CSS盒子模型教程学习教案.pptx
css盒子模型视频简介上帮助理解社么是盒子模型