css盒子模型包含哪几部分

html-css019

css盒子模型包含哪几部分,第1张

盒子模型分为哪几部分？

一个盒子模型分成几部分：

- 内容区（content）

- 内边距（padding）

- 边框（border）

- 外边距（margin）12345

内容区

内容区：盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

如果没有元素设置内边距和边框，则设置内容大小偶人和盒子大小一致123

通过width 和height 两个属性可以设置内容的大小1

width 和height属性值适合用于块元素1

内边距

内边距：元素内容区与边框以内的空间1

默认情况下width和height不包含padding的大小

12

使用padding属性来设置元素的内边距

举例：

-padding:10px 20px 30px 40px

这样会设置元素的 上，右，下，上 四个方向的内边距。(按照顺时针方向)

padding:10px 20px 30px

分别指定 上，左右，下 四个方向的内边距

padding:10px 20px

分别指定上下，左右四个方向的内边距

padding:10px

分别指定 上左下右 四个方向的内边距

同时在CSS中还提供padding-top padding-right padding-left padding-bottom1234567891011121314

边框

可以在元素周围创建边框，边框是元素可见的最外部1

可以使用border属性来设置盒子的边框：

-border:1px red solid

上边的样式分别指定了边框的 宽度 ，颜色，样式123

也可以使用border-top/left/right/bottom分别指定 上右下左 四个方向的边框

和padding一样，默认width 和height 并包括边框的宽度123

边框样式

边框样式可以设置多种样式：

-none（没有边框）

-dotted（点线）

-dashed（虚线）

-solid（实线）

-double（双线）

-groove（槽线）

-ridge（脊线）

-inset（凹线）

-outset（凸线）1234567891011

外边距

外边距是原素边框与周围元素相距的空间1

使用margin属性可以设置外边距1

用法和padding 类似，同样也提供了四个方向的

margin-top/right/bottom/left12

当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码 margin:0 auto 可以使元素居中

1

margin 在一个声明中设置所有外边距属性。

margin-top设置元素的上外边距。

margin-bottom 设置元素的下外边距。

margin-left设置元素的左外边距。

margin-right 设置元素的右外边距。

一个网页是被分解成若干区块来控制页面框架的，当然这些区块都是为了放置网页不同元素服务的！

基于div+css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。你可以把“盒子模型”看成是网页的一个区块，

也可以把它看成是大区快中的一个“区块元素”。既然是区块，“盒子模型”自然就会占据一定的空间。

到底我的区块要占多少空间？区块边缘的样式如何定义？区块与其他区块之间的距离怎么样。。。诸如此类的问题就

引出了今天我们的话题--------【盒子模型的技术，也即“相框模型的技术”】

盒子模型的组成部分：content (内容)、padding (间隙)、border(边框)、margin(间隔)。如图所示：

打个比方：相框，或者说是盒子，都有一些参数：比如相框中相片的所占空间（content）、相片与相框的距离

(padding)、相框本身的宽度(border)、墙上两个相框之间的距离(margin).这下大家应该比较熟悉了吧！！

小结一下：盒子模型的的高度（即相框模型的宽度）=content+padding+border+margin

这几个参数可是说是“盒子模型”的基本属性名，我们可以通过css技术给这些属性定义不同的属性值，就可以达到丰富

的效果了！

content作为网页内容，是由height、width等属性值对内容单独定义的。作为框架部分，下面列举padding、border、

margin的部分常用属性，以做参考：

padding    padding-Bottom  padding-left                  padding-right                   padding-Top

border      border-bottom     border-bottom-color     border-bottom-style         border-bottom-width 等等

margin      margin-bottom    margin-left                    margin-right                     margin-top