盒模型

小鱼儿 2021-05-03 16:18 566阅读 0赞

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）

![20170423140658456][]

**padding 内边距：**  
 ① 只写一个数，表示四条边同时修改  
 ② 写两个数：第一个数表示上下/第二个数表示左右  
 ③ 写四个数：表示上、右、下、左 四条边的方向  
 可以只用padding-top/left/right/bottom 修改一条边  
 修改元素内边距时，会把元素所在区域撑大！

padding: 20px 0px 0px 0px;
      padding-bottom: 30px;

border 边框：  
必须要写三个值： 边框宽度 边框的样式 边框的颜色  
也可以通过border-top等修改其中一条边

border:5px solid blue;

border-bottom:5px solid blue;

也可以分开写为：

border-width:5px;

border-style:solid;

border-color:blue;

border-style（边框样式）常见样式有：

dashed （虚线） |dotted （点线） |solid （实线）

**margin 外边距:**  
 方向处理，同padding  
margin:0 auto; 让当前元素，在父容器水平居中

**宽度和高度：**

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

![20170423142620466][]

元素的高度也是同理

[20170423140658456]: /images/20210501/9cba8dd392f243b182cf93f72821dfce.png
[20170423142620466]: /images/20210501/7a4346ab9aa84308ae5eff9f2c14328e.png

发表评论取消回复

表情：

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

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

相关阅读

相关标准盒模型和怪异盒模型(marksheng)

[标准盒模型和怪异盒模型][Link 1] 盒子模型众所周知，这里先简单介绍一下。 ![bf87fcb7ab972914ed580e0b5e79d775.png][]

矫情吗；*/ 2023年01月17日 10:57/ 0 赞/ 142 阅读

相关 CSS盒模型

1 元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

我就是我/ 2022年06月14日 02:15/ 0 赞/ 304 阅读

相关 css3盒模型、弹性盒模型、怪异盒模型

一、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒

ゝ一纸荒年。/ 2022年05月28日 00:58/ 0 赞/ 462 阅读

相关 CSS盒模型

1）盒模型结构 ![70][] 想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

古城微笑少年丶/ 2022年05月27日 08:46/ 0 赞/ 283 阅读

相关什么是CSS盒模型 IE盒模型和W3C盒模型

看到一篇不错的文章就转载过来了说得全面 https://www.cnblogs.com/ylliap/p/6119740.html[点击打开链接][Link 1]

向右看齐/ 2022年05月21日 04:55/ 0 赞/ 328 阅读

相关 CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Micros

缺乏、安全感/ 2022年05月19日 03:49/ 0 赞/ 297 阅读

相关 CSS盒模型

盒模型单地说每个html标签都是一个方块，然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 Margin(外边距) - 清除边框外的区

r囧r小猫/ 2022年05月17日 02:25/ 0 赞/ 341 阅读

相关盒模型

盒模型定义: 由内而外 content padding border margin 盒模型分两种 1.标准和盒模型标准盒模型就是w3c盒模型 width= cont

r囧r小猫/ 2022年04月10日 02:54/ 0 赞/ 242 阅读

相关标准盒模型和IE怪异盒模型

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（qui

野性酷女/ 2021年10月09日 04:14/ 0 赞/ 446 阅读

相关盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（...

小鱼儿/ 2021年05月03日 16:18/ 0 赞/ 567 阅读