网页|在CSS学习中的问题总结

问题描述

经过前面对HTML5的入门学习，我已经对HTML格式有了大致了解，也掌握了如何运用标题、段落、图像以及列表、表格、表单来丰富自己的网页。为了使页面看起来更美观，我开始着手对CSS的学习，在刚开始的学习过程中也确实遇到了许多问题，现在我把他们集中总结。

解决方案

首先明确我的学习顺序：CSS盒子模型→CSSborder→CSSoutline→CSS margin→CSS padding.

boxmodle中遇到的问题：

问题一：（待解决）盒中内容过长会超出盒子。如图：

图2.1.1内容未超出盒子范围时

图2.1.2内容超出盒子范围时

问题二：（待解决）盒子中文本换行的规则？我原本以为空格会导致换行，但后来发现好像跟空格没有什么关系，如图：

图2.1.3盒子的代码

图2.1.4盒子中文本的换行情况

（2）CSS border中遇到的问题：

问题一：（已解决）在学习盒子模型时，对这样一行代码“border:30pxsolid gray”中“solid”一词存在困惑：好像跟颜色的设置没有关系，可以去掉吗？后来实践证明这个词并不是可有可无的，去掉他后不会显示设置为灰色的部分，如图：

图2.2.1去掉“solid”之后的盒子

后来查阅发现solid其实是边框样式中实线的意思。

问题二：（已解决）对于同一个border，可以有最少一种，最多四种边框样式，那么当我们选用三种样式时，就会有两边是一样的样式，是哪两边呢？这里涉及边框样式的顺序，我发现不论是三种还是四种（因为一、二种不便于观察规律），都是按照顺时针顺序设置样式，即top→right→bottom→left,这是四种时的顺序，若border-style为三种，则为top→right→bottom,那么剩下的left就跟与之对应的right样式相同。

问题三：（未解决）设置边框样式就要有“p.{}”格式，这里的p与段落标签显然不同，但又不知道他的含义是什么？不过也可以发现一些规律，那就是在“p.”后面、“{}”之前，是可以跟东西的，比如菜鸟上的实例：

图2.2.2菜鸟实例

实例中的“one”可以理解为这个边框的“身份”，当边框数量＞1时可快速区分各边框。不过有的教学网站直接将边框样式作为其身份，使我误以为需要将每一个样式都放在P.之后，事实证明，不论放多少个“身份”，他只会识别第一个。以设置三种边框样式为例来观察一个“身份”与多个“身份”的运行区别，如图：

图2.2.3一个“身份”代码

图2.2.4一个“身份”运行效果

图2.2.5多个“身份”代码

图2.2.6多个“身份”运行效果

不知道为什么三种样式、多个“身份”的运行效果会和两种样式、一个身份的运行效果相同？但要知道“p.”后面只需跟一个身份就可以了。

问题四：（已解决）在设置border-color时，没有特别说明border-color是什么颜色的边框显什么色？下面我们仍然通过对比来寻找答案，如图：

图2.2.7border-color代码

可以看出，共有三个边框是设置了边框颜色的，其余边框均未特别规定颜色，再对比是否设置边框颜色的效果图：

图2.2.8是否设置了border-color的对比效果图

其中，前三个边框均为设置了border-color的效果图，而后三个则未特殊设置，可以看出，后三个边框的颜色一致，应该为默认色。

（3）CSS outline中遇到的问题：

问题一：（未解决）为什么给一个边框添加轮廓会使所有边框被框住？如图：

图3.1.1outline

在所有边框的代码中，仅此一处规定了outline，但所有边框都增加了一样的轮廓。（参考图2.2.8）猜想：是否可以给每一个边框都定义不同的轮廓？不需要轮廓的边框是否需要隐藏轮廓才不会显示轮廓？

（4）CSS margin中遇到的问题：

问题一：（未解决）该在什么范围内设置外边距较为合理？

（5）CSS padding中遇到的问题：

问题一：（已解决）填充顺序？与border-style一样为顺时针填充。

结语

在学习H5与CSS的过程中，会遇到很多让人疑惑的地方，我的解决方法是实践与记录。先将问题暂时记在记事本，再在过程中不断试验并记录截图，方便后期总结对比。总结的过程中也会重新发现很多当初没有注意或没有深入思考的点，而正是这些点促成我们的进步。

实习编辑 | 王楠岚

责 编 | 赵 微