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

在进行网页设计前要知道的一些基本知识,包括边距、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”。如下图,是在一个面板上创建了文本框,文字水平居中显示:
预览后文字是在面板中居中,效果如下图: