CSS实例教程之CSS盒实体模型

2021-01-20 15:53 jianzhan

CSS 盒实体模型

网页页面设计方案中的每一个元素全是长方形的盒子。盒子的规格是如何精准测算的,请看下图:

假如是 Firebug 客户的话(基础和前端开发相关的都会用到 Firebug 吧 – 糖伴番茄),就会很熟习下面的图表了。
这个图表很好地展现了功效于网页页面就任意盒子的标值。

留意以上两个事例中,margin 全是白色的。Margin 较为非常,它不容易危害盒子自身的尺寸,可是它会
危害和盒子相关的别的內容,因而 margin 是盒实体模型的1个关键的构成一部分。

盒子自身的尺寸是这样测算的:

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 的宽度。固定不动宽度自然环境下,一般能够设定为适合的像素值宽度,可是变宽状况就没那末好运了。

无宽度的肯定精准定位盒子

未设置宽度的肯定精准定位的盒子的主要表现有点不1样。它们的宽度只必须合适它们所包括的內容便可。因而,假如盒中仅有1个单词,盒子就会像那个词的主要表现1样宽。假如变为两个词,盒子的宽度也会相应提升。

这类状况会不断到盒子的宽度做到父元素宽度的 100%(近期的相对性精准定位的父元素或访问器对话框),随后就会折行。

对盒子来讲,竖直拓展以融入包括的內容是很当然的。值得怪异的是,不仅是不一样服务平台下的文字主要表现不一样,不一样的访问器解决这个难题时,也是有许多怪癖。

无宽度波动盒子

同无宽度的肯定精准定位盒子的主要表现1样。盒子的宽度只必须拓展到所包括內容的宽度,直至其父元素的宽度(其父元素无须是相对性精准定位的)。因为这些无宽度盒子的敏感性,大家要学到的是重要每日任务方式的情况下它们是不可以依靠的,像整体网页页面合理布局中。假如波动1列做为侧面栏应用,并期望那些內部元素(如照片)来负责包括它的宽度,你便是在自惹麻烦。

内联元素也是盒子

大家这里1直把关键放在块级元素的盒子上。很非常容易便可以把块级元素想像为盒子,可是内联元素也是盒子。能够把她们想像为十分长而窄的长方形,它们还可以像其它盒子1样有 margin, padding he border

折行使它看起来一些不太好了解。如上所示的左 margin 把盒子推向右侧,可是只在第1行合理,由于那是盒子的起始点。padding 一切正常的运用在文字的上部或下部,当折行时它会忽视上面行的 padding 而且以行高(line-height)规定的部位做为起始点。全透明情况是以便让实际效果看起来更清晰。

亲眼亲眼看到1下

想看看构成网页页面的每一个独立的“盒子”吗?试着把这行编码临时放入款式表:

	* {
   		border: 1px solid red !important;
	}