[CSS三] 盒子模型

小咪咪 2022-11-26 05:00 156阅读 0赞

### 1. 盒子模型的介绍 ###

所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。

**盒子模型示意图如下：**

![在这里插入图片描述][20200810164814650.png]

### 2. 盒子模型相关样式属性 ###

*  盒子的内容宽度(width)，注意：不是盒子的宽度
 *  盒子的内容高度(height)，注意：不是盒子的高度
 *  盒子的边框(border)
 *  盒子内的内容和边框之间的间距(padding)
 *  盒子与盒子之间的间距(margin)

**设置宽高：**

设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度*/ 
    height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度*/

**设置边框:**

设置一边的边框，比如顶部边框，可以按如下设置：

border-top:10px solid red;

说明:

其中10px表示线框的粗细；solid表示线性；red表示边框的颜色

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

**设置内间距padding**

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
    padding-left:30px;     /* 设置左边内间距30px */ 
    padding-right:40px;    /* 设置右边内间距40px */ 
    padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
    四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
    padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
    padding：20px; /* 设置四边内边距为20px */

**设置外间距margin**

外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

**盒子的真实尺寸**

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

*  盒子宽度 = width + padding左右 + border左右
 *  盒子高度 = height + padding上下 + border上下

[20200810164814650.png]: /images/20221124/cb7d06283b364f6db501ac092b9f448e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS盒子模型(css盒子模型的理解)

CSS+DIV写盒子模型图网页盒子模型存在两种： 1：标准W3C盒子模型； 2：IE盒子模型(IE浏览器默认的模型)。在两种不同模型网页里，定义了相同CSS属性的

短命女/ 2023年09月26日 13:53/ 0 赞/ 106 阅读

相关 CSS学习笔记（三）——盒子模型

CSS盒子模型盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

红太狼/ 2023年08月17日 17:05/ 0 赞/ 81 阅读

相关 css总结三(盒子模型)

故心故心故心故心小故冲啊 -------------------- 文章目录 1.盒子模型 1.1盒子模型（Box Model）

红太狼/ 2023年01月03日 04:24/ 0 赞/ 153 阅读

相关 [CSS三] 盒子模型

1. 盒子模型的介绍所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(

小咪咪/ 2022年11月26日 05:00/ 0 赞/ 157 阅读

相关 css盒子模型

浏览器中的元素都是一个个的盒子，每一个盒子都有特定的结构。块级元素和行级元素块级元素（block element）块级元素会独占一行，默认其宽度自动填满其

绝地灬酷狼/ 2022年09月21日 11:56/ 0 赞/ 58 阅读

相关 css盒子模型

1.盒子模型所有的html元素都可以看做盒子。 ![这里写图片描述][20160615161131029] 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左

叁歲伎倆/ 2022年09月21日 04:57/ 0 赞/ 47 阅读

相关【CSS】——盒子模型

前提　　在跟着牛腩老师学习前台制作的时候，觉的和在C/S制作的时候有很大的不同，因为之前的界面都是可视化的，都是通过拖拽创建的，而进入B/S阶段所有的控件都是通过代码来

客官°小女子只卖身不卖艺/ 2022年07月28日 01:04/ 0 赞/ 304 阅读

相关 css盒子模型

一般称IE8及其以上为w3c盒子模型，W3C 盒子模型的范围包括 `margin、border、padding、content`，并且 `content` 部分不包含其他部分。

不念不忘少年蓝@/ 2022年07月15日 08:48/ 0 赞/ 259 阅读

相关 css_盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了

「爱情、让人受尽委屈。」/ 2022年05月25日 05:05/ 0 赞/ 311 阅读

相关 css 盒子模型

span标签(行内标签)：为了设置单独的样式 div标签(块级标签): 用来布局,会将其中的子元素内容作为一个独立的整体而存在

客官°小女子只卖身不卖艺/ 2021年07月24日 14:14/ 0 赞/ 591 阅读