前端细微小知识

前端细微小知识

1：h1 h2 h3标签的特殊：

搜索引擎搜索时会先找到这三个标签内容匹配的网站

2：p div标签同为块级元素但要注意语义化不能随意乱用

3：写css时最好把设置位置的样式放在最前面写，其他样式放在后面

原因：影响浏览器渲染性能性能

4：选择器权值权重（排除顺序覆盖问题后）

id 权值为100； class 权值为10； tag 权值为1；
例如：
html结构

<div id="box">
    <p class="p1">12345</p>
</div>

css样式

#box{
            width: 400px;
            height: 400px;
    }
#box>p{background-color: green}  /*权值为100+1=101*/
.p1{background-color: yellow}   /*权值为10*/

此时由于#box>p{…}的权值大于.p1{…} 的权值，因此即使.p1{…} 写在了后面背景色也还是显示绿色

5：hover用法注意点

在使用效果（鼠标悬浮A元素，兄弟B元素做出样式改变）时，做出样式改变的兄弟B元素必须是A元素的紧邻着的后一个兄弟元素
css样式

#box{
        width: 400px;
        height: 400px;
    }
#box1{
        width: 200px;
        height: 200px;
    }
#box:hover+#box1{
        background-color: #ccc;
    }

html结构

<div id="box">
        <p class="p1">12345</p>
</div>
<div id="box1"></div>

上述写法能够成功实现样式改变
html结构

<div id="box">
        <p class="p1">12345</p>
</div>
<div></div>
<div id="box1"></div>

上述写法不能够成功实现样式改变

6：jQ中 $(‘XX’)的弊端

$(‘XX’)每做一次都会加载一次，使性能降低

7：定位元素实现居中

当需要设置某元素定位后又想要该元素实现居中的方法：只需要把该元素设置为top：0； left：0；则可实现margin：0 auto；

8：编写函数调用小知识

函数在前，调用在后，防止函数还没加载完成导致不能实现功能的错误。

9：块元素、行内元素、行内块元素

块属性:自己独自霸占一整行,默认宽度是100%,可以设置宽高div,p, h1~h6,form,ul,ol,li
25行内:可以与别人共处一行,不可以设置宽高,其宽高由内容给撑开span,a,strong
26行内块:可以设置宽高，可以共处一行img,input