在进行网页设计前要知道的一些基本知识，包括边距、position等、设计时与运行时的区别等。这些知识无论是自己手工编写HTML还是用软件（如金蜘蛛网页设计器）进行设计都应该知道。
一、左边距、顶边距与内外边距
这里所说的左边距与顶边距与内外边距是指下面图中方框中的。
在利用金蜘蛛网页设计器进行设计网页时，在编辑器中控件的位置与“位置、大小”-“左边距”，“顶边距”是相同的。
在运行（是指在浏览器中运行）时，对应的HTML元素位置是否与设计时控件的位置相同这要分情况：
1.“位置、大小”-“position”为“将position设置为absolute_绝对位置”时，如下图：
如上图所示，在运行时，对应的HTML元素位置与设计时控件的位置相同。这种就是完全所见即得。
注意：有一种例外情况，如果“位置、大小”-“自动左边距”设置为“true”、“自动顶边距”设置为“true”、，则此时运行时的实际“左边距”=0，“顶边距”=0。
2.“位置、大小”-“将position设置为relative_相对前一元素底部”时，如下图：
如上图所示，在运行时，对应的HTML元素位置与设计时控件的位置就会不同。HTML元素位置如下确定：
a.HTML元素的“顶边距”的确定
HTML元素的“顶边距”由“内外边距”-“外边距”-“顶边距”和前一个HTML元素的顶边距确定。即“顶边距”=前一HTML元素的顶边距+前一HTML元素的高度+前一HTML元素的“内外边距-底边距”+本HTML元素的“内外边距-顶边距”。
如上图所示，序号为“12”(红字为序号)的控件的“内外边距”-“顶边距”设置为“10”。那么序号为“12”运行时的实际“顶边距”为：前一HTML元素（序号为“11”）的顶边距+前一HTML元素（序号为“11”）的高度+前一HTML元素（序号为“11”）的“内外边距-底边距”+10。
我们经常看到一些例子，看到的控件的顶位置与运行后不一样一般就是这个原因。
b.HTML元素的“左边距”的确定
“左边距”=“位置、大小”-“左边距”+“内外边距”-“左边距”。上图序号为“12”运行时的实际“左边距”为：“位置、大小”-“左边距”（如上图值为0）+“内外边距”-“左边距”（如上图为空即为0）=0。
注意：有一种例外情况，如果“位置、大小”-“自动左边距”设置为“true”，则此时运行时的实际“左边距”=“内外边距”-“左边距”。
二、position
这里所说的position是指“位置、大小”-“position”，对应html元素的position属性。金蜘蛛网页设计器的“位置、大小”-“position”有6个选项：
将position设置为absolute_绝对位置,将position设置为relative_相对前一元素底部,将position设置为inherit_继承父元素position,将position设置为fixed_固定位置,将position设置为static,不设置
。其中选项“不设置”则会默认为“
将position设置为relative_相对前一元素底部
”，“
将position设置为fixed_固定位置
”和
“将position设置为static
”一般用在特别情况下。
而最常用的就是“将position设置为relative_相对前一元素底部”和“将position设置为absolute_绝对位置”。
1.“将position设置为relative_相对前一元素底部”
使用“将position设置为relative_相对前一元素底部”是最广泛的，也建议大家使用这种类型，好处是这种类型可以非常方便准确确定位置，特别是使用css样式表可以多个HTML元素用一个css样式来统一确定位置。如页面上有10个面板（div）,如果我们要使每个面板之间间隔10px，使用这种类型直接将“内外边距”-“顶边距”设置为10即可。如果是使用“将position设置为absolute_绝对位置”这种类型，还得考虑每个面板的高度，麻烦很多。另外，我们在设计时也可以不必在意控件的顶边距，只设计好“内外边距”-“顶边距”即可。
使用这种类型运行后的实际顶边距的计算，请看上一节的-。
2.“将position设置为absolute_绝对位置”
“将position设置为absolute_绝对位置”一般是小面积内位置确定或控件间位置不规则使用比较方便。
默认情况，金蜘蛛网页设计器创建的控件都是“将position设置为absolute_绝对位置”的，这是因为为了适应刚入门的朋友。如果你已熟悉，建议改为“将position设置为relative_相对前一元素底部”。如当父面板已用“将position设置为relative_相对前一元素底部”，那么他的子控件就会继承父的这个类型。
三、水平居中
HTML元素水平居中非常常用。如本文档中的图片、主内容面板。一般的电脑显示分辨率都很大，现在基本都*以上，像本页这种文档的阅读，如果都做成这么大，那么遇到*这种小的分辨率，就需要显示滚动条，另外如果宽度大，人们在阅读就头部转动的幅度就会过大，体验都不好。这样，我们在设计网页，一般主内容面板宽度可以设定为px，居中显示即可，如本文档。
1.面板的水平居中
是指“常用组件”-“面板”，创建一个容易的移动网页，在这个网页创建一个“常用组件”-“面板”。然后做以下设置：
“对齐方式”设置为“水平居中对齐_运行网页后生效”(设计时不居中，运行后居中)；“位置、大小”-“position”设置为“将position设置为relative_相对前一元素底部”；“颜色”-“颜色”设置为“clblue”，方便测试。如下图：
如上图，面板是我们随意放置的，不是水平居中的，然后点“预览网页”，如下：
如上图，预览后是水平居中的，如果我们改变浏览器的宽度，发现仍然还是水平居中的。
2.LayUI面板的水平居中
LayUI的面板水平居中很简单，只需要把“面板类型”设置为“容器面板layui—container”即可。
3.文本框中的文字的水平居中
文本框中的文字水平居中也很简单，把其属性“文本属性”-“水平对齐”设置为“Center—居中对齐”即可。一般来说，文字居中是在父容器中居中，这时我们可以把文本框的属性“位置、大小”-“与父的宽度同”和“自动左边距”都设置为“true”。如下图，是在一个面板上创建了文本框，文字水平居中显示：
预览后文字是在面板中居中，效果如下图：