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

資訊專欄INFORMATION COLUMN

cssfloat布局以及其他小技巧

ISherry / 835人閱讀

摘要：如果里有多行，那么就把每一行的行高加起來算。姓名怎么和聯(lián)系方式對(duì)齊其他的方法直接用可以的，不過會(huì)受到字體的影響。字體一變，加的就會(huì)變。代碼解釋代碼如果是內(nèi)聯(lián)元素要被改變寬度的話，一定要先寫上。

css float 布局以及其他小技巧總結(jié)

這篇博文 前面四個(gè)部分是關(guān)于css 經(jīng)典布局 如果你已經(jīng)知道了 可以直接跳過看第六部分 css 的其他小技巧

1.0 左右居中布局 




    
    Document
    



    

        

            a1
        

        
a2
2.0 左中右布局 




    
    Document
    



    
Left

    
Right

    
Main



```
3.0 水平居中 
 



    
    Document
    



    

    水平居中
4.0 垂直居中 （兩種方法） 




    
    垂直居中第一種方法table自帶
    



    

        

            
                垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中
            
        

    



```





    
    垂直居中第二種方法marginautoabsolute
    



    

    

                垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直
5.0 水平垂直居中 




    
    Document
    



    

        水平垂直居中
6.0 其他小技巧

6.1 css 有類似javascript 的console.log 的工具嗎？

//用border
div{
border: 1px solid red;
}

6.2 為什么明明在數(shù)字1和2之間敲兩個(gè)空格 但是網(wǎng)頁顯示出來它們之間 只有一個(gè)空格 ？ 那是因?yàn)槟銢]有添加   (no break space)




    
    你寫的bug


    

    1  2

6.3 為什么只有一個(gè)阿拉伯?dāng)?shù)字且已經(jīng)設(shè)定了 字體大小是20 px 但一旦打開開發(fā)者工具：顯示的字體大小是 28px ？
因?yàn)槊恳环N字體被設(shè)計(jì)時(shí)，為了【好看】設(shè)計(jì)師會(huì)給每一種字體一個(gè)好看系數(shù) eg：默認(rèn)的字體時(shí)pingfang 那么28px /20px =1.4 這個(gè)1.4 就是【好看（字體）系數(shù) 】每一種字體都有自己的 【好看系數(shù)】
如果不想使用字體設(shè)計(jì)師給你的【好看系數(shù)】一定要用自己的 可以添加一行

line-height： 20px；

代碼如下




    
    test
    


    

        1

6.4 為什么分別兩個(gè)span元素之間 看似什么都沒有 但游覽器 1 和 2 之間確有空隙 ？
? span元素 之間有tab 有回車等都會(huì)造成有空格的情況




    
    Document
    


    

       1
       2

6.5 塊級(jí)元素的高度怎么確定？

    如果div 里 只有一個(gè)內(nèi)聯(lián)元素  那么div 的高度是由這個(gè)內(nèi)聯(lián)元素的行高所決定。
    如果div 里有多行，那么就把每一行的行高加起來算。

6.6 姓名怎么和聯(lián)系方式對(duì)齊 ？
? ? 其他的方法：直接用  ？可以的，不過會(huì)受到字體的影響。字體一變， 加的  就會(huì)變。
? ? ?代碼解釋：代碼如果是內(nèi)聯(lián)元素要被改變寬度的話， 一定要先寫上display：inline-block 。

  text-align: justify; 當(dāng)有多行字體時(shí)，這句話會(huì)讓強(qiáng)迫癥看了之后 非（兩）常（邊）舒（對(duì)）心 （齊）。

? ? 那只有一行的時(shí)候 怎么對(duì)齊？看上去是多添加了一行。代碼
? ? ?如下：
? ? ?

  span:after{
        content:"";
        display: inline-block;
        width: 100%;
        border: 1px solid pink;
    }




    
    JS Bin




    

        姓名

        聯(lián)系方式

6.7 六個(gè)內(nèi)聯(lián)元素 怎么寫才能沒有空隙 ？

    添加 float：left 
             clearFix  




    
    Document
    


 
    
     
  • 選項(xiàng)1
    • 
     
  • 選項(xiàng)2
    • 
     
  • 選項(xiàng)3
    • 
     
  • 選項(xiàng)4
    • 
     
  • 選項(xiàng)5
    • 
     
  • 選項(xiàng)6
    •

6.8 怎么做 一行和多行文本過長(zhǎng)變省略號(hào)？

//一行 




    
    Document
    



    

        s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f
     




// css multi line text ellipsis





    
    Document
    



    

        s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f

6.9 什么情況下margin 會(huì)合并以及怎么修改使其正?；?？

   如果父元素沒有什么東西擋住子元素   那么子元素的邊距就會(huì)父合并起來 




    
    Document
    



    

        

            111

怎么修改 ：

第一種添加： 在父元素里添加border -top 和 border - bottom ；
第二種添加： 同樣是在 父元素里添加 padding-top





    
    Document
    



    

        

            111

6.10 怎么break out words？
添加一行代碼： word-break: break-all;





    
    JS Bin




    

        1 apppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppple

6.11 怎么脫離文檔流 ？
三種方法：

position：absolute；
float： left；
position：fixed；

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

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

相關(guān)文章

  • cssfloat布局以及其他小技巧

    摘要：如果里有多行，那么就把每一行的行高加起來算。姓名怎么和聯(lián)系方式對(duì)齊其他的方法直接用可以的，不過會(huì)受到字體的影響。字體一變，加的就會(huì)變。代碼解釋代碼如果是內(nèi)聯(lián)元素要被改變寬度的話，一定要先寫上。 css float 布局以及其他小技巧總結(jié) 這篇博文 前面四個(gè)部分是關(guān)于css 經(jīng)典布局 如果你已經(jīng)知道了 可以直接跳過看第六部分 css 的其他小技巧 1.0 左右居中布局 ...

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

  • CSS小技巧（二）：布局

    摘要：在我們寫代碼的過程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。不到萬不得已，盡量少使用或在可控范圍內(nèi)使用。可以在縮小瀏覽器窗口時(shí)等比例縮放。但此時(shí)不能加左右的，否則總寬度會(huì)超過的寬度。我們?yōu)檫_(dá)到目的讓同一類和左右排布不同類上下排布。 在我們寫CSS代碼的過程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。 1. 一般特定的元素都有自己默認(rèn)的樣式，但是在我們的整體布局中，可能適得其反。我們可以去掉其默認(rèn)樣式。 ...

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

  • getComputedStyle方法的那些事

    摘要：返回的是一個(gè)樣式聲明對(duì)象，只讀。方法返回一個(gè)最初值對(duì)象或值列表對(duì)象，這取決于屬性值的類型。而且，雖然中，對(duì)象支持方法，但總是返回因此，目前來講，方法可以先不聞不問。本文轉(zhuǎn)載之張?chǎng)涡竦牟┛? 一、getComputedStyle是？getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值。返回的是一個(gè)CSS樣式聲明對(duì)象([object CSSStyleDeclara...

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

  • getComputedStyle方法的那些事

    摘要：返回的是一個(gè)樣式聲明對(duì)象，只讀。方法返回一個(gè)最初值對(duì)象或值列表對(duì)象，這取決于屬性值的類型。而且，雖然中，對(duì)象支持方法，但總是返回因此，目前來講，方法可以先不聞不問。本文轉(zhuǎn)載之張?chǎng)涡竦牟┛? 一、getComputedStyle是？getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值。返回的是一個(gè)CSS樣式聲明對(duì)象([object CSSStyleDeclara...

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

  • 關(guān)于css布局、居中的問題以及一些小技巧

    摘要：例一個(gè)高的，里面的文字垂直居中使該元素變大倍動(dòng)畫過渡效果 CSS的兩種經(jīng)典布局 左右布局 一欄定寬，一欄自適應(yīng) 定寬 自適應(yīng) .left{ width: 200px; height: 600px; float: left; display: table; text-align: ...

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

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

0條評(píng)論

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