前端一些小知识点

yzzz 发布于2019-04-23 11:48 / 870人阅读

摘要：两个只会一个有效。值大的那个有效幼圆无效有效幼圆解決只设置一个六，不加载情况下网站能运作的一个小例子图片作为超链接时，网速不佳不能加载，依然可以继续操作。然后高度为零此时图片就显示不出来。

一，主流浏览器及内核

Chrome Webkit/blink

IE Trident

Firfox Gecko

Safari Webkit

Opera presto

二，css权重

！importent Infinity（正无穷）

行间样式 1000

id 100

class/属性/伪类 10

标签/为元素 1

通配符 0

css的优先级取决于权重，权重间的进制是256.

三，行级块级行级块元素

行级元素：1内容决定元素大小 2无法通过css改变宽高（span em a strong...）

块级元素：1独占一行 2可以改变宽高（p div ul li form address...）

行级块元素：内容决定大小可以改变宽高 (img)

四，定位

绝对定位：absolute：脱离原来位置，以最近父级定位，如果没有以文档顶端定位

相对定位：relative：保留自己以前的位置，并且以自己以前位置定位

五，margin俩bug

1，margin-top塌陷：子div在父div中子div margin-top无效，除非子div margin-top值大于父级的，而且此时还带动父级一起移动。

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                margin-left: 100px;
                margin-top: 100px;
                width: 100px;
                height: 100px;
                background: #000000;
            }
            .content{
                margin-left: 50px;
                margin-top: 50px;/* 这句话并不会有效 */
                width: 50px;
                height: 50px;
                background: #008000;
            }
        style>
    head>
    <body>
        <div class="wrapper">
            <div class="content">div>
        div>
    body>
html>

父级div上边框消失了一样，给父级加上一个上边框可以解决（不可取），或者使用BFC（block formatting context 块级格式化上下文）

CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

给父级添加如上所示就能解决此问题

2，margin合并：两个并排块级元素，上块设置margin-bottom同时下块设置margin-top。两个只会一个有效。（值大的那个有效）

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }

            .wrapper {
                margin-bottom: 50px;
                /* 无效 */
                width: 100px;
                height: 100px;
                background: #000000;
            }

            .content {
                margin-left: 50px;
                margin-top: 100px;
                /* 有效 */
                width: 50px;
                height: 50px;
                background: #008000;
            }
        style>
    head>
    <body>
        <div class="wrapper">
        div>
        <div class="content">div>
    body>
html>

解決：只设置一个

六，不加载css/js情况下网站能运作的一个小例子

图片作为超链接时，网速不佳不能加载css，依然可以继续操作。

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style type="text/css">
            a {
                display: block;
                border: 1px solid black;
                background: url(img/lushi.ico) 0 0 no-repeat;
                width: 100px;
                /* 第一种 */
                /* 
                height: 0px;
                padding-top: 100px;*/
                /* 第二种*/
                /* 
                height: 100px;
                text-indent: 199px;
                white-space: nowrap; */

                overflow: hidden;
                background-size: 100% 100%;

            }
        style>
    head>
    <body>
        <a href="https://baidu.com" target="_blank">炉石a>
    body>
html>

第一种

1，给a标签设置块级/行级块和宽。然后高度为零（此时图片就显示不出来）。

2，然后加上padding-top就会把图片需要的位置顶出来（图片可以出现在padding中），并且把超链接文字顶出a标签范围。

3，然后overflo-hidden把文字隐藏就好了。

4，当不加载css的属性时，‘炉石’就会出现，不耽误操作。

第二种

1，给a标签设置块级/行级块宽和高。

2，然后设置文本缩进，把‘炉石’顶出去，并设置不换行。

3，

4，

私有云云服务器 ddos一些比较小的网站前端知识小知识前端知识阿里云

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1190.html

小光光谈前端

摘要：这个问题应该是百度或者知乎都能知道答案的，以上是自己亲身学习的一些途径方便少走一点弯路入门。问题1：前端的学习路线基础的html，css，js，推荐慕课网免费课程:前端工程师路径,极客学院免费课程:前端工程师路径大概刷过就可以了，不用死记硬背某个知识点，css跟js还需要加深学习的，在实战过程中不懂就去查文档基础的ps切图能力慕课网ps基础课程拥有自己的虚拟主机传送...

canopus4u 2019-08-29 16:10 评论0 收藏0
小光光谈前端

摘要：这个问题应该是百度或者知乎都能知道答案的，以上是自己亲身学习的一些途径方便少走一点弯路入门。问题1：前端的学习路线基础的html，css，js，推荐慕课网免费课程:前端工程师路径,极客学院免费课程:前端工程师路径大概刷过就可以了，不用死记硬背某个知识点，css跟js还需要加深学习的，在实战过程中不懂就去查文档基础的ps切图能力慕课网ps基础课程拥有自己的虚拟主机传送...

shiguibiao 2019-08-23 10:26 评论0 收藏0
前端基础入门

摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...

shinezejian 2019-08-22 13:51 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0