`
天梯梦
  • 浏览: 13732671 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

 
阅读更多

W3C规范

一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说,页面的布局就是一个个盒子的排列和摆放。掌握了盒子呈现的本质,布局也就轻而易举。

在 W3C 规范中定义了标准的盒模型:

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding

每一个盒子都有一个内容区域(比如:文本,图片.etc)和可选的环绕着内容的内边距(padding),边框(border),外边距(margin)。盒子的大小有这些属性定义。下面这张图很直观的说明了这一点

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

 

提示:背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

 

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

 

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

 

提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。

提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。

 

如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

注意以上两个例子中,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 就会向外延展。

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

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 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。

 

无宽度的绝对定位盒子

未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此,如果盒中只有一个单词,盒子就会像那个词的表现一样宽。如果变成两个词,盒子的宽度也会相应增加。

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口),然后就会折行。

 

对盒子来说,垂直扩展以适应包含的内容是很自然的。值得奇怪的是,不仅仅是不同平台下的文本表现不同,不同的浏览器处理这个问题时,也有很多怪癖。

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

无宽度浮动盒子

同 无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度,直到其父元素的宽度(其父元素不必是相对定位的)。由于这些无宽度盒 子的脆弱性,我们要学到的是关键任务模式的时候它们是不能依赖的,像总体页面布局中。如果浮动一列作为侧边栏使用,并指望那些内部元素(如图片)来负责包 含它的宽度,你就是在自找麻烦。

 

内联元素也是盒子

我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子,但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形,它们也可以像其它盒子一样有 margin, padding he border

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

折 行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边,但是只在第一行有效,因为那是盒子的起点。padding 正常的应用在文本的上部或下部,当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。

 

亲眼目睹一下

想看看组成页面的每个单独的“盒子”吗?试着把这行代码暂时放入样式表:

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

 

 

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

box-sizing

不过在新的 CSS3 中,新增了一种盒模型计算方式:box-sizing属性。盒模型默认的值是content-box, 新增的值是padding-boxborder-box,几种盒模型计算元素宽高的区别如下:

 

content-box(默认)

布局所占宽度Width:

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

 

padding-box(只在部分浏览器中有效,例如firefox,所以建议不要使用)

布局所占宽度Width:

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

 

border-box

布局所占宽度Width:

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

 

参考:

http://www.w3school.com.cn/css/css_boxmodel.asp

https://www.qianduan.net/css-box-model/

https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/box-module.html

 

更多内容可以参考:CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

本文转自:详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    css 盒模型整理

    CSS盒模型主要分为两种:标准盒模型(W3C Box Model)和IE盒模型(Internet Explorer Box Model)。这两种模型在处理元素宽度和边距时有所不同。 #### W3C盒模型: - 内容区域(Content):实际的内容,如文字或...

    CSS盒子模型.rar

    在CSS中,可以通过`box-sizing`属性来改变盒子模型的计算方式。默认的`content-box`模式遵循上述计算方式,而`border-box`模式则将边框和内边距包含在设定的宽度和高度之内。 **三、盒子模型的CSS控制** 1. **内容...

    详解CSS中的Box Model盒属性的使用

    Box Model是CSS布局的核心概念,它定义了网页元素在页面上的占用空间,包括内容区域(content)、内边距(padding)、边框(border)和外边距(margin)四部分。理解Box Model对于精确控制元素的尺寸和布局至关重要。 正常...

    DIV CSS 盒子模型PPT演讲.zip

    在网页设计中,DIV CSS是构建页面布局的重要工具,而盒子模型(Box Model)则是理解CSS布局的关键概念。这个PPT演讲将深入探讨这一核心知识点,帮助初学者掌握网页设计的基础。 首先,我们要了解什么是盒子模型。在...

    CSS-box-model

    **CSS盒模型详解** 在网页设计中,CSS(层叠样式表)盒模型是一个至关重要的概念,它定义了网页元素如何占用空间并与其他元素交互。理解CSS盒模型对于精确控制网页布局至关重要。本文将深入探讨CSS盒模型的各个方面...

    CSS-Box-Model

    **CSS盒模型详解** 在网页设计中,CSS(层叠样式表)盒模型是理解元素布局和尺寸计算的关键概念。CSS盒模型定义了元素如何占据空间并与其他元素交互。它包括元素的内容、内边距、边框和外边距,这四个部分共同构成...

    彻底弄懂CSS盒子模式系列教程集合

    - **盒模型的显示模式**:CSS提供了两种盒模型的显示模式:标准盒模型(W3C Box Model)和IE盒模型(IE Box Model)。标准盒模型是默认模式,而IE盒模型则通过设置`box-sizing: border-box;`来启用。 #### 四、盒...

    css+div入门ppt

    CSS+Div布局是现代网页设计的标准,利用CSS的盒模型(Box Model)进行页面布局。盒模型包括内容(Content)、内边距(Padding)、边框(Border)和外边距(Margin),这些元素共同决定了元素的总尺寸。 ### 4. 层叠...

    css 跨浏览器实现float-center.docx

    3. 确保所有相关元素的盒模型(box model)一致,避免因边距、填充计算方式不同产生的偏差。可以使用`box-sizing:border-box`确保元素的宽度包括边框和内边距。 4. 测试在主流浏览器如Chrome、Firefox、Safari、Edge...

    58同城最新秋招前端笔试试题.docx

    1. CSS3的`box-sizing`属性:该属性可以改变元素的盒模型,取值包括`content-box`(默认值,元素宽度和高度只包含内容区域)和`border-box`(元素宽度和高度包含内容、内边距和边框)。 2. `switchCase`函数执行...

    java web 技术基础详解

    - `box-sizing`: 控制元素的尺寸计算方式。 - `display`: 定义元素的渲染方式。 ##### 8. 浏览器的“混杂模式” 如果文档中的某些HTML标签不符合标准,则浏览器可能进入混杂模式,这会导致页面渲染出现差异。为了...

    WEB前端框架API

    而`box-sizing`属性则改变了元素的盒模型,帮助我们更好地控制元素的尺寸。 接着,jQuery是一个高效、易用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作等任务。jQuery的API非常丰富,如`$(selector)`...

    Web前端开发

    - **框模型**:通过`box-sizing`属性来控制元素的大小计算方式。 - **背景和边框**:支持多背景图、边框图片、圆角等特性。 - **文本效果**:通过`text-shadow`属性可以轻松添加阴影效果,`@font-face`属性允许...

    js代码实现随机颜色的小方块

    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14...

Global site tag (gtag.js) - Google Analytics