亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－CSS踩坑紀(jì)錄

用戶83 / 3123人閱讀

摘要：解決方法設(shè)置即可其實(shí)所有的都會(huì)出現(xiàn)這個(gè)問題，瀏覽器會(huì)自動(dòng)給元素的結(jié)尾添加一個(gè)空白字符大小和有關(guān)解決方法可以對(duì)父元素設(shè)置再在該元素里把設(shè)置回來的設(shè)置百分比是根據(jù)父元素的寬度來的。結(jié)語坑先挖這么點(diǎn)，以后碰到再陸續(xù)補(bǔ)充

前言 
簡(jiǎn)單記錄一下工作中經(jīng)常碰到的css的一些坑，歡迎隨時(shí)拍磚
水平居中

該元素是position:nomal, 父元素內(nèi)block子元素定寬的情況下，對(duì)子元素采用margin:0 auto 即可

該元素是position:absolute, 元素定寬width的情況下，用left:50%; margin-left:-(1/2)width 能絕對(duì)居中

父元素設(shè)置 display:flex, 父元素再設(shè)置justify-content:center 即可

該元素是inline, 那么對(duì)父元素設(shè)置text-align:center即可

父元素寬度自適應(yīng)，對(duì)父元素加padding-left和padding-right即可

position:fixed 的元素居然可以用margin:0 auto的方式居中，真神奇

垂直居中

該元素是position:nomal, 對(duì)父元素采用display:table-cell; vertical-align:middle;
即可

該元素是position:absolute, 元素定高h(yuǎn)eight的情況下，用top:50%; margin-top:-(1/2)height 即可

父元素設(shè)置 display:flex, 父元素再設(shè)置align-item:center 即可

如果子元素是inline, 那么對(duì)父元素設(shè)置text-align:center即可

父元素高度自適應(yīng)，對(duì)父元素加padding-top和padding-bottom即可

如果只簡(jiǎn)單對(duì)文字垂直居中，只要把文字的line-height設(shè)置成和容器一樣高即可

Canvas

Canvas只支持px單位，并且如果canvas的寬高用css控制，或者$(‘canvas’).css({})來控制的話，里面圖片都會(huì)變形. 只能用 $(‘canvas’)[0].width = 100 ; $(‘canvas’)[0].height = 300 ，或者在標(biāo)簽上寫< canvas width=100 height=300>

Display

當(dāng)父元素設(shè)置了display:flex之后， 父元素會(huì)變成block級(jí)， 同時(shí)最好把子元素全部設(shè)置成block，如果子元素是inline-block或者inline,容易出問題

當(dāng)父元素設(shè)置了display:table-cell之后，父元素變成inline-block級(jí)， 對(duì)子元素沒影響

Width&Height

html和body都可以看做一個(gè)特殊的div, 一般不會(huì)對(duì)它設(shè)置高度，只當(dāng)有整屏滑動(dòng)的需求時(shí)候，才會(huì)設(shè)置html height:100% , body height:100%. 不過body經(jīng)常和min-width, max-width，width等屬性連用。

Background

即使body設(shè)置了寬高， 對(duì)body設(shè)置background還是整屏

利用background-position:center和background-size可以做出背景圖一直居中且寬or高的自適應(yīng)的效果

Css3中的background-origin：content-box 和background-repeat: repeat 一起連用會(huì)沖突

Position

子元素設(shè)置成position:absolute后會(huì)脫離正常的文檔流，這時(shí)父元素的padding對(duì)子元素失效

position:absolute 是根據(jù)最近的position不為normal的父元素來定位的

positon:fixed 是根據(jù)瀏覽器視窗進(jìn)行定位

Animation

transform:對(duì)元素進(jìn)行變形

animation:規(guī)定元素動(dòng)畫，可以設(shè)立多個(gè)關(guān)鍵幀，并且不需要事件觸發(fā) 如果做復(fù)雜的動(dòng)畫，通常和transform連用

transition: 只有兩個(gè)關(guān)鍵幀的animation，即只有開始和結(jié)束. 另外，transition需要事件觸發(fā)，比如hover

其他

按鈕一般都寫成 span+backgrount-image的形式，因?yàn)槿缭O(shè)置成img,會(huì)出現(xiàn)用戶移動(dòng)端長(zhǎng)按可以保存的情況造成疑惑

BUG

div下img就算height:100%還是會(huì)比div少幾px,原因是因?yàn)閕mg是行內(nèi)元素，會(huì)自動(dòng)在尾部添上空白符。 解決方法：img 設(shè)置display:block即可
其實(shí)所有的display:inline-block都會(huì)出現(xiàn)這個(gè)問題，瀏覽器會(huì)自動(dòng)給元素的結(jié)尾添加一個(gè)空白字符(大小和font-size有關(guān)). 解決方法: 可以對(duì)父元素設(shè)置font-size:0px; 再在該元素里把font-size設(shè)置回來

padding/margin 的top, bottom 設(shè)置百分比是根據(jù)父元素的寬度來的。

結(jié)語

坑先挖這么點(diǎn)，以后碰到再陸續(xù)補(bǔ)充

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111334.html

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－合理組織CSS結(jié)構(gòu)

    摘要：前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請(qǐng)叫我前端工程師從方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條技巧的高低，甚至很多工程師在一些的奇技淫巧都比不上切圖崽那切圖崽到底和工程師之間的差別是什么呢差別是年工作經(jīng)驗(yàn)視野，是格局，是 前言 不要再叫我切圖崽，我很生氣，這樣很不禮貌，請(qǐng)叫我前！端！工！程！師！ 從css方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條css技巧的...

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

  • 切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

    摘要：但是這么多模塊合并在一個(gè)文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個(gè)是哪個(gè)模塊呢因此，我們需要對(duì)這些模塊給不同的進(jìn)行標(biāo)識(shí)。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡(jiǎn)單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國(guó)內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個(gè)使用S...

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

  • 切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

    摘要：但是這么多模塊合并在一個(gè)文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個(gè)是哪個(gè)模塊呢因此，我們需要對(duì)這些模塊給不同的進(jìn)行標(biāo)識(shí)。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡(jiǎn)單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國(guó)內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個(gè)使用S...

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

  • 切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

    摘要：但是這么多模塊合并在一個(gè)文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個(gè)是哪個(gè)模塊呢因此，我們需要對(duì)這些模塊給不同的進(jìn)行標(biāo)識(shí)。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡(jiǎn)單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國(guó)內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個(gè)使用S...

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

  • 切圖崽的自我修養(yǎng)－梳理Jquery API

    摘要：前言梳理一下中還不太熟悉的事件綁定統(tǒng)一用摒棄掉之前的解綁事件統(tǒng)一用語法糖，支持多個(gè)事件綁定同一個(gè)函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)可以往里傳參可以給未創(chuàng)建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統(tǒng)一用on(摒棄掉之前的click,bind),解綁事件統(tǒng)一用off 語法...

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

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

0條評(píng)論

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