网页设计-在进行网页设计之前需要知道的一些基本知识

时间：2023-10-03 21:12:01 | 来源：网站运营

时间：2023-10-03 21:12:01 来源：网站运营

网页设计-在进行网页设计之前需要知道的一些基本知识：在进行网页设计前要知道的一些基本知识，包括边距、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设置为relative_相对前一元素底部】。

2.“将position设置为absolute_绝对位置”

“将position设置为absolute_绝对位置”一般是小面积内位置确定或控件间位置不规则使用比较方便。

默认情况，金蜘蛛网页设计器创建的控件都是“将position设置为absolute_绝对位置”的，这是因为为了适应刚入门的朋友。如果你已熟悉，建议改为“将position设置为relative_相对前一元素底部”。如当父面板已用“将position设置为relative_相对前一元素底部”，那么他的子控件就会继承父的这个类型。

三、水平居中

HTML元素水平居中非常常用。如本文档中的图片、主内容面板。一般的电脑显示分辨率都很大，现在基本都1920*1024以上，像本页这种文档的阅读，如果都做成这么大，那么遇到1024*768这种小的分辨率，就需要显示滚动条，另外如果宽度大，人们在阅读就头部转动的幅度就会过大，体验都不好。这样，我们在设计网页，一般主内容面板宽度可以设定为1024px，居中显示即可，如本文档。

1.面板水的平居中

是指“常用组件”->“面板”，创建一个容易的移动网页，在这个网页创建一个“常用组件”->“面板”。然后做以下设置：

“对齐方式”设置为“水平居中对齐_运行网页后生效”(设计时不居中，运行后居中)；“位置、大小”->“position”设置为“将position设置为relative_相对前一元素底部”；“颜色”->“颜色”设置为“clblue”，方便测试。如下图：

如上图，面板是我们随意放置的，不是水平居中的，然后点“预览网页”，如下：

如上图，预览后是水平居中的，如果我们改变浏览器的宽度，发现仍然还是水平居中的。

2.LayUI面板的水平居中

LayUI的面板水平居中很简单，只需要把“面板类型”设置为“容器面板layui—container”即可。

3.文本框中的文字的水平居中

文本框中的文字水平居中也很简单，把其属性“文本属性”->“水平对齐”设置为“Center—居中对齐”即可。一般来说，文字居中是在父容器中居中，这时我们可以把文本框的属性“位置、大小”->“与父的宽度同”和“自动左边距”都设置为“true”。如下图，是在一个面板上创建了文本框，文字水平居中显示：

预览后文字是在面板中居中，效果如下图：