国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端一些小知識(shí)點(diǎn)

yzzz / 1000人閱讀

摘要：兩個(gè)只會(huì)一個(gè)有效。值大的那個(gè)有效幼圓無(wú)效有效幼圓解決只設(shè)置一個(gè)六，不加載情況下網(wǎng)站能運(yùn)作的一個(gè)小例子圖片作為超鏈接時(shí)，網(wǎng)速不佳不能加載，依然可以繼續(xù)操作。然后高度為零此時(shí)圖片就顯示不出來(lái)。

一，主流瀏覽器及內(nèi)核

Chrome? ? ? ? ? Webkit/blink

IE? ? ? ? ? ? ? ? ? ? Trident

Firfox? ? ? ? ? ? ? Gecko

Safari? ? ? ? ? ? ? Webkit

Opera? ? ? ? ? ? ? presto

二，css權(quán)重

！importent? ? ? ? ? Infinity（正無(wú)窮）

行間樣式? ? ? ? ? ? ? ?1000

id? ? ? ? ? ? ? ? ? ? ? ? ? ? 100

class/屬性/偽類? ? ? ? 10

標(biāo)簽/為元素? ? ? ? ? ? ? ?1

通配符? ? ? ? ? ? ? ? ? ? ? ? 0

css的優(yōu)先級(jí)取決于權(quán)重，權(quán)重間的進(jìn)制是256.

三，行級(jí) 塊級(jí) 行級(jí)塊 元素

行級(jí)元素：1內(nèi)容決定元素大小? 2無(wú)法通過(guò)css改變寬高（span em a strong...）

塊級(jí)元素：1獨(dú)占一行? ?2可以改變寬高 （p div ul li form address...）

行級(jí)塊元素：內(nèi)容決定大小? 可以改變寬高? (img)

四，定位

絕對(duì)定位：absolute：脫離原來(lái)位置，以最近父級(jí)定位，如果沒(méi)有以文檔頂端定位

相對(duì)定位：relative：保留自己以前的位置，并且以自己以前位置定位

五，margin倆bug

1，margin-top塌陷：子div在父div中 子div margin-top無(wú)效，除非子div margin-top值大于父級(jí)的，而且此時(shí)還帶動(dòng)父級(jí)一起移動(dòng)。

?

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;/* 這句話并不會(huì)有效 */
                width: 50px;
                height: 50px;
                background: #008000;
            }
        style>
    head>
    <body>
        <div class="wrapper">
            <div class="content">div>
        div>
    body>
html>

?

父級(jí)div上邊框消失了一樣，給父級(jí)加上一個(gè)上邊框可以解決（不可取），或者使用BFC（block formatting context 塊級(jí)格式化上下文）

CSS2.1中規(guī)定滿足下列CSS聲明之一的元素便會(huì)生成BFC。

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

?

給父級(jí)添加如上所示就能解決此問(wèn)題

2，margin合并：兩個(gè)并排塊級(jí)元素，上塊設(shè)置margin-bottom同時(shí)下塊設(shè)置margin-top。兩個(gè)只會(huì)一個(gè)有效。（值大的那個(gè)有效）

?

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

            .wrapper {
                margin-bottom: 50px;
                /* 無(wú)效 */
                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>

?

解決：只設(shè)置一個(gè)

?六，不加載css/js情況下網(wǎng)站能運(yùn)作的一個(gè)小例子

圖片作為超鏈接時(shí)，網(wǎng)速不佳不能加載css，依然可以繼續(xù)操作。

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標(biāo)簽設(shè)置塊級(jí)/行級(jí)塊 和寬。然后高度為零（此時(shí)圖片就顯示不出來(lái)）。

2，然后加上padding-top就會(huì)把圖片需要的位置頂出來(lái)（圖片可以出現(xiàn)在padding中），并且把超鏈接文字頂出a標(biāo)簽范圍。

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

4，當(dāng)不加載css的屬性時(shí)，‘爐石’就會(huì)出現(xiàn)，不耽誤操作。

第二種

1，給a標(biāo)簽設(shè)置塊級(jí)/行級(jí)塊 寬和高。

2，然后設(shè)置文本縮進(jìn)，把‘爐石’頂出去，并設(shè)置不換行。

3，

4，

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1190.html

相關(guān)文章

  • 小光光談前端

    摘要：這個(gè)問(wèn)題應(yīng)該是百度或者知乎都能知道答案的，以上是自己親身學(xué)習(xí)的一些途徑方便少走一點(diǎn)彎路入門(mén)。 問(wèn)題1：前端的學(xué)習(xí)路線 基礎(chǔ)的html，css，js，推薦慕課網(wǎng)免費(fèi)課程:前端工程師路徑,極客學(xué)院免費(fèi)課程:前端工程師路徑 大概刷過(guò)就可以了，不用死記硬背某個(gè)知識(shí)點(diǎn)，css跟js還需要加深學(xué)習(xí)的，在實(shí)戰(zhàn)過(guò)程中不懂就去查文檔 基礎(chǔ)的ps切圖能力 慕課網(wǎng)ps基礎(chǔ)課程 擁有自己的虛擬主機(jī) 傳送...

    canopus4u 評(píng)論0 收藏0

  • 小光光談前端

    摘要：這個(gè)問(wèn)題應(yīng)該是百度或者知乎都能知道答案的，以上是自己親身學(xué)習(xí)的一些途徑方便少走一點(diǎn)彎路入門(mén)。 問(wèn)題1：前端的學(xué)習(xí)路線 基礎(chǔ)的html，css，js，推薦慕課網(wǎng)免費(fèi)課程:前端工程師路徑,極客學(xué)院免費(fèi)課程:前端工程師路徑 大概刷過(guò)就可以了，不用死記硬背某個(gè)知識(shí)點(diǎn)，css跟js還需要加深學(xué)習(xí)的，在實(shí)戰(zhàn)過(guò)程中不懂就去查文檔 基礎(chǔ)的ps切圖能力 慕課網(wǎng)ps基礎(chǔ)課程 擁有自己的虛擬主機(jī) 傳送...

    shiguibiao 評(píng)論0 收藏0

  • 前端基礎(chǔ)入門(mén)

    摘要：手把手教你做個(gè)人火的時(shí)候，隨便一個(gè)都能賺的盆滿缽滿，但是，個(gè)人沒(méi)有服務(wù)端，沒(méi)有美工，似乎就不能開(kāi)發(fā)了，真的是這樣的嗎秘密花園經(jīng)典的中文手冊(cè)。涵蓋前端知識(shí)體系知識(shí)結(jié)構(gòu)圖書(shū)推薦以及入門(mén)視頻教程，全的簡(jiǎn)直不要不要的了。 JavaScript 實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能，不需要依賴 flash。...

    shinezejian 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<