CSS盒子模型介绍

最新推荐文章于 2021-04-25 10:51:14 发布

mayan_FE

最新推荐文章于 2021-04-25 10:51:14 发布

阅读量816

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/mayan_fe/article/details/8467604

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

盒子模型定义

如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么我们可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性（内容、填充、边框、边界），可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分。

盒子模型如下：

margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。

一些HTML元素如div、p等块元素，默认情况下就是一个盒子，有些内联元素如span、a等虽然默认不是盒子，但也可以通过CSS中的display属性将其声明成盒子，在HTML文档中，不是盒子的元素各自的宽度为其所呈现的信息内容宽度，它们彼此间互相紧靠从左到右依次排列，直到占满整个浏览器窗口后自动行。对于是盒子的元素，如果没有特殊设置，其默认总是占单独一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子只能排列在它的上面或者下面，即上下累加着进行排列。每个盒子都可以看成是由从内到外的四个部分构成，即内容、填充、边框和边界，CSS为这四个部分规定了相关的属性，通过对这些属性的控制可以丰富盒子的实际表现效果。

四个组成部分及各自具备的属性

CONTENT

内容是盒子模型的中心，它呈现了盒子的主要信息，这些信息可以是文本、图片等多种类型。内容是盒子模型必备的组成部分，其他的三部分都是可选的。内容有三个属性，width、height和overflow。使用width和height属性可以指定盒子内容的高度和宽度，其值可以是长度计量值或者百分比值。当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以滚动显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

PADDDING

填充是内容和边框之间的空间，可以被看作是内容的背景区域。填充的属性有五种，即padding、padding-top、padding-bottom、padding-left、padding-right。使用这五种属性可以指定内容与各方向边框间的距离，对应的属性值类型与width和height相同。同时通过对盒子背景色属性的设置可以使填充部分呈现相应的颜色。

BORDER

边框是内容和填充的边界。边框的属性有border、border-style、border-width和border-color。边框样式属性border-style是边框最重要的属性，根据CSS规范，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted、doshed、solid等九种边框样式。使用边框宽度属性border-width可以为边框指定具体的厚度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS规定的颜色名。

MARGIN

边界位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。边界使元素盒子之间不必紧凑地连接在一起，是CSS布局的一个重要手段。边界的属性有五种，即margin、margin-top、margin-bottom、margin- left、margin-right，其具体的设置和使用与填充属性类似。对于两个邻近的都设置有边界值的盒子，他们邻近部分的边界将不是二者边界的相加，而是二者的重叠，若二者邻近的边界值大小不等，则取二者中较大的值。同时，CSS容许给边界属性指定负数值，当指定负边界值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定边界正负值的方法可以移动网页中的元素，这是CSS布局技术中的一个重要方法。

盒子计算

盒子本身的大小是这样计算的：

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

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

值为未明的情况

如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)。

如果未声明盒子的width(而且这个盒子是一个块级元素)，那么事情就变得有点奇怪，看下面的几种情况。

块级盒的默认宽度

如果没有声明宽度，而且盒子是静态或者相对定位，那么宽度将保持100%且padding和border将向内推动而不是向外扩展。

如果明确的确定宽度为100%，那么padding就会向外扩展。

上面这个图形中，第一个是没有设置宽度，并且padding为20px的盒子。第二个是设置宽度为100%，并且padding为20px的盒子。

从这个例子可以看出，盒子的默认宽度并不是100%，也可能是其他值，应该了解这种特别有价值的情况，因为在现存的很多情况下，它对于设置/不设置宽度是很多帮助的。

我遇到的最大的麻烦就是 textarea(文本框) 元素了，它们需要设为宽度为所需的”cols”属性，并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%，但有 padding 时，就会延展 textarea 的宽度。固定宽度环境下，通常可以设置为合适的像素值宽度，但是变宽情况就没那么幸运了。