前端一些小知識點

yzzz 發布于2019-04-23 11:48 / 1007人閱讀

摘要：兩個只會一個有效。值大的那個有效幼圓無效有效幼圓解決只設置一個六，不加載情況下網站能運作的一個小例子圖片作為超鏈接時，網速不佳不能加載，依然可以繼續操作。然后高度為零此時圖片就顯示不出來。

一，主流瀏覽器及內核

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，

GPU云服務器云服務器 ddos一些比較小的網站前端知識小知識前端知識阿里云

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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