前端小知识

12.6-12.12学习总结：

这一个星期都在围绕前端来制作页面，以下是我在首次制作页面时了解到的一些有趣的小知识

1.         一些标签，尤其是常用标签之后，最好带上class，以免影响同类型的标签，导致后面的页面塌陷。我在制作第一板块时因为一个p标签没有加上class，结果影响到了后面第二板块的布局，费了两天才救过来

2.        不同类型的标签后跟的class名称最好不一样，不要出现以下这种形式

<p class="ex"></px>
<div class="ex"></div>

建议使用下方格式

<p class="ex"></p>
<div class="ab"></p>

3.        提前了解页面的自适应。以免在放大或缩小后产生板块错位，这里要强调自适应不是给页面各板块定位，常用的页面自适应可以是在设置宽和高时不使用width:xxpx;这种形式，而是直接设置百分比，根据浏览器的大小或是电脑的大小来设置，形如width:20%;

4 .       最好不要在<ul></ul>标签下的<li></li>标签里放置<div></div>标签，在一个大板块需要被分割成几个小板块时可以在<div></div>里面再设置<div></div>即可

5.        当你的图片需要被切割成圆形时，不用直接去p图，只需要在css里设置下面代码即可被切割成圆形

 img.circle{
      clip-path:circle(50%);
          }

6.        前端css和html里存在很多优先级，在写网页时可以提前了解下，以免网页被而自己却不知道发生了什么，如果被覆盖也可以使用z-index来强行设置该片段的层级，使其浮在上层，html中的标签里设置的 style比在css里直接设置的优先级要高，如下：上方p标签的优先级就比下方p标签的优先级高

<p style="width:10px;"></p>
p{
   width;10px;
   }