网页中的盒子模型内边距的设置

上一篇文章教了如何设置盒模型的边框，这篇文章主要教大家如何设置盒模型中的边框，就是边框和内容区域之间的部分，也就是实际放置的地方。
。
中间的部分在设置padding中被称为margin，可以让我们调整内容区域的位置，而不影响盒子在网页中的位置。
1、如图所示，我们新建一个记事本，将记事本名称修改为“网页中盒模型内边距的设置(31).html”，回车确认，这样该文件可以转换为可由浏览器打开的HTMLweb页面文件。
2、如图所示，我们右键点击html图标，在弹出的下拉列表菜单中选择“打开方式(H)”，然后选择“SublimeText”文本编辑器进行写入html文档。
3.如图所示，我们编写!DOCTYPEhtml标签来声明这是一个html5文档，接下来我们编写html标签来包含html文档的主体部分。
在header部分，编写一个title标签来输入页面的标题，然后编写一个meta标签将文本编码方式设置为UTF-8，这样浏览器就可以更好的显示我们编写的网页。
4.如图所示，我们写一个body标签来包含主要的html内容我们写一个div并为其设置内联样式将其padding-top设置为50px，然后像这样先在里面写另一个div的内容区域​​div被包围第二个div被整个盒子模型占据，那么我们可以清楚地看到第一个div盒子模型的padding顶部（由于padding无法设置颜色等，所以需要显示为这是因为颜色内容区域与填充颜色相同）。
5、如图所示，我们写一个div并给它设置内联样式，设置padding-right为60px，然后在里面再写一个div，这样第一个div的内容区域就被第二个div覆盖了。
占据整个盒子模型，我们可以清楚地看到第一个div盒子模型的right-pad，即right-y-pad。
6、如图，我们写一个div并给它设置内联样式，设置它的padding-bottom为70px，然后在里面再写一个div，这样第一个div的内容区域就被第二个div覆盖了分区占据了整个盒子模型，我们可以清晰的看到第一个div盒子模型的bottompadding，也就是底部padding。
7、如图，我们写一个div并给它设置内联样式，设置padding-left为80px，然后在里面再写一个div，这样第一个div的内容区域就被第二个div覆盖了。
占据了整个盒子模型，我们可以清晰的看到第一个div盒子模型的leftpadding，也就是leftpadding。
8、如图所示，我们写一个div并给它设置内联样式，设置它的padding为10px，然后在里面写另一个div，这样第一个div的内容区域就被整个盒子覆盖了第二个div，然后我们可以清楚地看到盒子模型的padding第一个div，也就是padding，是10px。
9、如图所示，我们单击鼠标右键，在弹出的下拉列表菜单中选择“在浏览器中打开”项。
10、如图所示，第一个设置为padding-toppadding，第二个设置为padding-rightpadding，第三个设置为padding-rightpadding-。
paddingbelow，即padding下面，paddingpadding-left第四组，leftpadding，paddingpadding第五组，即四个侧面有衬垫。
11、如图所示，这是本案例的源代码，您可以直接将代码复制粘贴到一个空白的txt文件中，保存文件后，将txt文件的后缀修改为html，然后点击。
。
直接打开html文件，就可以看到这个网页是这位大师为大家写的！!--使用!DOCTYPEhtml声明这是一个html5文档--!DOCTYPEhtml!--使用html标签包含网页主体--html!--使用head标签包含htmlhead部分--head!--使用title标签写网页的标题--在标题网页中设置边距在盒模型(31)/title!--使用meta标签设置编码格式以便浏览器可以解释文档网页正确--metacharset="utf-8"/head!--使用body标签包含html文档的主体部分--body!--盒模型内部的padding设置，使用padding-top属性，padding-right属性、padding-bo属性ttom、padding-left--!--padding-top属性display--divstyle="padding-top:50px;background-color:red;width:800px;height:30px"divstyle="width:100%;height:100%;background-color:green;"用于效果displaypaddingmarginin-top/div/div!--显示的换行符清除--br/!--display-padding-right--divstyle="padding-right:60px;背景颜色:红色;宽度:800px;高度:30px"divstyle="宽度:100%;高度:100%;background-color:green;"用于在/div/div的边距上显示padding-right效果！--换行符，以便清晰显示--br/!--padding-bottomdisplay--divstyle="padding-bottom:70px;background-color:red;width:800px;height:30px"divstyle="width:100%;height:100%;background-color:green;"用于显示效果padding-bottom/div/div!--换行以便清晰显示--br/!--padding-left显示---divstyle="padding-left:80px;背景颜色:红色;宽度:800px;height:30px"divstyle="宽度:100%;高度:100%;背景颜色:绿色;"用于显示padding的效果--左边距在/div/div中!--换行以便清晰显示--br/!--使用padding一次性设置上、右、下、左值--!--padding-right显示--divstyle="padding:10px;背景颜色:蓝色;宽度:800px;高度:30px"divstyle="宽度:100%;高度:100%;背景颜色:绿色;"用于设置四边padding效果后显示padding/div/div!--盒子模型width=border-width-left+padding-width-left+width+padding-right-width+border-right，盒子模型高度=边框宽度顶部+填充顶部宽度高度+填充宽度底部+边框宽度底部--/body/html

CSS中margin和padding的区别

margin指外边距属性，padding指内边距属性。
这就是盒模型的概念。

1.盒模型原理图如下：

2．代码示例如下：

<!DOCTYPEhtml><html><head><title></title>div{border：1px深红色；浮动：左；边距：自动20px；宽度：100px；高度：100px；}a{背景：粉红色；yle></head><body>
22222
</body></html>

结果是如下：

6、盒子模型边框、圆角、阴影、内外边距、外边距塌陷

网页布局的核心是利用CSS来放置块。

网页布局过程：

块模型：将HTML页面上的布局元素视为一个矩形块，它是存储内容的容器。

1.border可以设置元素的边框。
边框由三部分组成：宽度（粗细）、边框样式、边框颜色；

2．语法：

border-style可以设置为以下值：

3、边框写在一起，分开写。

边框缩短：

边框单独写：

1.-collapse属性控制浏览器如何绘制表格边框。
它控制相邻单元格的边界。

2.语法：

“collapse”一词的意思是合并。

border-collapse:collapse;表示相邻边框合并在一起。

边框将添加到框的实际大小。
所以我们有两个解决方案：

CSS3中添加了新的圆角边框样式，这样我们的盒子就可以有圆角了。

border-radius属性用于设置元素外边框的圆角。

语法：

盒子阴影是CSS3中的一项新功能。
我们可以使用box-shadow属性给盒子添加阴影。
语法：

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。
语法：

1.padding属性用于设置padding，即边框与内容之间的距离。

2.语法：

共写属性：

分割属性：

1.对于盒子，发生了两件事：

2。
填充对盒子尺寸的影响：

3．解决方案：

如果您验证了这一点。
边距和渲染：要保持大小相同，只需从宽度/高度中减去额外的填充即可。

margin属性用于设置边距，即控制块与块之间的距离。

外边距使块级块水平居中的两个条件：

正常的书写方法，以下三种都可以：

注：以上方法居中水平块级元素。

注意：要使内联元素或内联块元素水平居中其子元素，只需添加text-align:center到其父元素。

文本对齐方式：居中。
您可以将内联元素（例如：span）和内联块元素（例如：img）在父块中居中。

当使用margin来定义块元素的垂直边距时，可能会发生边距合并。
。

主要有两种情况：

1合并相邻块元素的垂直边距。

当两个块元素上下相邻时（亲属关系）。
）如果顶部元素具有Margin-Bottom下边距且底部元素具有Margin-Top上边距，则它们之间的垂直距离不是Margin-Bottom和Margin-Top边距之和。
接受两个值中较大者的现象称为合并相邻块元素的垂直边距。

解决方案：尝试仅将字段值添加到一个字段。

2.嵌套块元素的垂直边距折叠。

类型1：对于嵌套关系（父子关系）的两个块元素，父元素具有水平上边距，而子元素也具有上边距，在这种情况下，父元素将折叠到较大的字段值。

第二种：对于两个具有嵌套关系（父子关系）的块元素，在子元素上设置margin-top:10px，会使父div向下移动10px，不是子元素；元素在父元素内向下移动10个像素；

解决方案：

许多网页元素都有默认的内边距和外边距，并且各个浏览器的默认值不一致。
因此，在布局之前，我们首先要清除网页元素的内外边距。

对于内联块元素的输入按钮的默认字段，上述方法不起作用。
为了解决这个问题，可以使用浮点值。
*笔记。
为了保证兼容性，行内元素尽量只设置左右内外边距，不要设置上下内外边距。
设置好上边距和下边距后，不会真正生效。
但转换为块和内联块元素会有帮助。