盒子模型

URLOS 发布于2019-08-29 18:39 / 2668人阅读

摘要：盒子模型可以设置四个值，如图表示内边距，内容与盒子上右下左的距离。如图，只规定了两个，但是在下面的盒子模型中默认使得对面的属性一致。三个参数值，表示边框的粗细，线条样式，颜色也可以分开设置。上面将盒子四周的样式设置不同。

盒子模型

padding

可以设置四个值，如图

padding: 1px 2px 3px 4px;

表示内边距，内容与盒子上右下左的距离。

记住顺时针转就行。

如果padding不全，那么就和对面的padding一样。

如图，只规定了两个，但是在下面的盒子模型中默认使得对面的padding属性一致。

只规定一个，那么上下左右内边距均为一致。

还可以多带带设置内边距

 padding-left: 1px;
 padding-right: 2px;
 padding-top: 3px;
 padding-bottom: 4px;

同时设置会怎么覆盖呢

这是css代码的顺序

padding-left: 5px;
padding-right: 6px;
padding: 1px 2px 3px 4px;
padding-top: 7px;
padding-bottom: 8px;

可以清晰地看出，后面的覆盖了前面的属性

margin

和padding一样，也可以设置四个值。不过表示的是外边距。如图

 margin: 1px 2px 3px 4px;

同样，四个值表示上右下左外边距，顺时针

其他的都和padding一样，也可以多带带设置各个方向的margin,如margin-top等，不赘述。

border

border:10px solid black;

三个参数值，表示边框的粗细，线条样式，颜色

也可以分开设置。

border-style: solid dashed dotted double;

上面将盒子四周的border样式设置不同。

content

图中的100*100的空间就是content。也即是我们在css中设置的width和height大小

由下图可以看出：div大小

水平空间大小 = border(左右) + padding(左右) + width

垂直空间大小 = border(上下) + padding(上下) + height

GPU云服务器云服务器盒子模型比价盒子盒子比价电视盒子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114477.html

盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

xiangzhihong 2019-08-30 12:49 评论0 收藏0
盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

myshell 2019-08-01 15:05 评论0 收藏0
小白都能读懂的 Cell 模型：一个被施展了魔法的盒子

摘要：为了让大家更好的理解公链的模型，我们为大家带来两期小白都能读懂的模型文章。该篇是小白都能读懂的模型系列文章之一秘猿科技区块链小课堂第期只能存放数字的盒子我们先从区块链鼻祖说起。设计一条好的底层公链，必须从技术角度、经济角度、以及共识角度进行全方位的考量。我们花了 4 期（第 16/17/18/19 期）向大家解释了底层公链 CKB 技术实现中的关键点之一：Cell 模型。为了让大家更...

syoya 2019-06-27 19:20 评论0 收藏0
【前端】CSS盒子模型

摘要：盒子模型及更早的版本使用的是盒模型。盒子模型组成为。盒子模型盒子模型的盒子模型的意味着盒子的和的大小是上述属性相加的最大总和。标准盒子模型盒子模型的盒子模型的盒子模型大小计算就简单多，设置的和就是内容大小。盒子模型 IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。盒子模型组成为：margin、border、padding、...

Keagan 2019-08-30 15:55 评论0 收藏0
「前端早读君」css进阶之彻底理解视觉格式化模型

摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。今日励志不论你在什么时候开始，重要的是开始之后不要停止。前言对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 评论0 收藏0