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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

CSS用法的一些總結

Anchorer 發布于2019-08-28 18:10 / 851人閱讀

摘要：黃金檔未垂直對齊同一行的一組為的使用了或者是時，如果某個的內部標簽中填充一些文字等內容，可能就會出現垂直不對齊的情況。解決方法倒不難的應用會被其他一些屬性破壞，例如和，所以與或是屬性最好不要同用。

工作上，除了Django和一些并不復雜的腳本以外，其余時間寫了大量的CSS和jQuery，現在回頭看之前的一些代碼，寫得十分丑陋又低效，其中的CSS就有很大改進空間。
正如多數人的認知一樣，HTML和CSS并不難學難用，從學習曲線上來說確實如此，難度甚至不如使用VIM。但是寫不寫得好又是另一回事，好的CSS代碼能用最少的代碼量實現功能，易修改且性能佳。易修改，舉個最簡單的例子，比如要求修改一個div的高寬且保持其子div自適應高寬，若是寫死了子div的高寬，修改工作很麻煩，所以最好是將子div在需求下盡可能寫成自適應，這樣修改時就只需要修改父div的高寬即可。性能佳，能用CSS實現的絕對不用js實現，不管是網頁布局還是動畫效果，原生的CSS都是快速又具備高度兼容性的選擇。

清除浮動

清除浮動是個常見問題，不少人的解決辦法是添加一個空的 div 應用 clear:both。事實上僅需要使用after偽類即可在元素尾部自動清除浮動

.clear-fix { overflow: hidden; zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

DIV同行排列

最容易想到的是將一行div全設置為display:inline-block，但這種做法會使得兩個div之間存在“間隔”，這個“間隔”的大小通常由font-size決定，將font-size設為0將不存在"間隔"。清除間隔可以通過使用注釋的方法實現。

更好的方式自然還是使用float

.item {float: left}

靈活使用BFC

BFC（Block Formatting Context）直譯為“塊級格式化范圍”。當一個HTML元素滿足以下任何一點時，就會產生BFC:

float的值不為none

overflow的值不為visible

display的值為table-cell, table-caption或inline-block

position的值不為relative和static

BFC提供了一個環境，這個環境中的元素不會影響到其它環境中的布局。比如浮動元素形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。BFC就是一個作用范圍，可看作是一個獨立的容器，并且這個容器的布局，與這個容器外的元素毫不相干。

BFC的元素不能與浮動元素重疊，當容器有足夠的剩余空間容納 BFC 的寬度時，所有瀏覽器都會將 BFC 放置在浮動元素所在行的剩余空間內。

上圖所示，畫線左側是描述，字數不定，即寬度不定，畫線占滿同一行的剩余部分。正好使用上面提到的BFC與浮動元素的位置情況。

.desc { float: left;}
.line { overflow: hidden;}


 黃金檔

未垂直對齊

同一行的一組class為item的div使用了display:inline-block或者是float:left時，如果某個div的內部標簽中填充一些文字等內容，可能就會出現垂直不對齊的情況。但非常奇怪的是，這時內部元素并沒有超出父級div的范圍，沒有任何溢出或撐開的情況，這點我也不是很理解，知道其發生原因的同學歡迎留言。解決方法倒不難：

.item { vertical-align: top;}

display:table-cell的應用

table-cell會被其他一些CSS屬性破壞，例如float和 position:absolute，所以display:table-cell與float:left或是position:absolute屬性最好不要同用。設置了該屬性的元素對寬度高度敏感，響應padding屬性，對margin值無反應

垂直居中

.content {
    display: table-cell;
    border: 1px solid #eee;
    width: 600px;
    text-align: center;
}


    what a beautiful day

兩欄自適應布局

適用于一欄寬度不固定，比如大小不確定的圖片，另一欄自動調整占滿剩余寬度的場景。

.box {
    width: 70%;
}
.content {
    display: table-cell;
    border: 1px solid #eee;
}
.fix {
    float: left;
    color: #a8c;
}


    This is left fixed block
    
        風住塵香花已盡，日晚倦梳頭。物是人非事事休，欲語淚先流。聞說雙溪春尚好，也擬泛輕舟。只恐雙溪舴艋舟，載不動許多愁。

垂直對齊的trick

上面提到過可以用table-cell讓div內的元素垂直居中，但對div的float和position屬性有限制，現在介紹一種可以用在浮動元素(容器)里的垂直居中方法，這是在工作中碰到使用了float不好使時發現的
使用一個用作協助的inline-block的幫助元素，此處是span并將該元素和準備居中的元素都設置為vertical-align: middle即可

css

.frame {
    float: left;
    height: 220px;
    width: 300px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

原理是相鄰的兩個inline-block元素可以互相對齊，所以使用一個不可見的100%高度的span可以幫助img對齊
來源：http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

不過這時仍然有個問題，假設上面的img后面要跟一個文字介紹的div塊(inline-block)，如下所示


    
    
    ABCD

如果需求是設置.desc的margin-top: 10px，直接設置的話會發現前面居中對齊的img也會向下10px。
原因是因為塊元素的vertical-align默認是baseline，設置margin-top會導致整個baseline下降，所以之前已經居中對齊的元素也會受到影響。解決辦法是將div.desc設置為其它的對齊方式，推薦vertical-align: top

另外一種解決辦法既能解決上面的問題，也能解決inline-block的塊元素設置margin無效的問題

.desc {
    postion: relative;
    top: 10px;
}

hover時顯示邊框

方法一
對于一個塊元素比如div，通常先設置好border-width，并將border-color設為#fff或transparent，hover時直接改變border的顏色即可

方法二
將寬高的值寫上，然后設置box-sizing: box，hover時直接設置border即可，此時邊框寬度包括在width或height的數值中

GPU云服務器云服務器 vps日常維護中的一些要點總結 php中css的用法 java的一些代碼深度學習的一些應用

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111062.html

bootstrap select2 tags用法總結

摘要：原創用法總結前言最近用到的，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。（原創） bootstrap select2 用法總結前言最近用到bootstrap 的 select2，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。效果圖 showImg(https://segmentfault.com/img/bV...

Zack 2019-06-27 11:34 評論0 收藏0
bootstrap select2 tags用法總結

摘要：原創用法總結前言最近用到的，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。（原創） bootstrap select2 用法總結前言最近用到bootstrap 的 select2，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。效果圖 showImg(https://segmentfault.com/img/bV...

flyer_dev 2019-08-22 11:59 評論0 收藏0
css文本屬性用法總結

摘要：稍稍總結了下文本的一些屬性用法，自己忘記的時候也可以用來查查，不用去查網站那么麻煩。稍稍總結了下css文本的一些屬性用法，自己忘記的時候也可以用來查查，不用去查網站那么麻煩。下面是部分總結，也希望對其他人有用 ? 文本修飾 (1)text-decoration:? 文本修飾（橫線） 4個屬性值 overline?? line-through?? underline? blink (1)ov...

masturbator 2019-04-23 13:28 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

lemanli 2019-08-02 15:57 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

xfee 2019-08-21 11:53 評論0 收藏0