我腦中飄來飄去的css魔幻屬性

JouyPub 發布于2019-08-29 14:02 / 2987人閱讀

摘要：先來一張圖，看懂的幾個屬性順便帶上圖片出處，文章講得還可以，理解這張圖片，后面就好理解了。元素根據標簽的屬性決定顯示輸入框還是按鈕。還有，還有近來很火的。

最近看到一篇20 個CSS高級技巧匯總的匯總，感觸很深，不過我想，與技巧相比，有些常見css布局難題，有時候更加讓我們的日常開發變得躊躇沮喪吧。
在寫這一篇文章之前，自己還寫過一篇：我所不注意的那些CSS冷知識，但卻阻止了我做項目的速度,如果你看了，我相信你也會受益的。

為什么此處li標簽內的p元素看起來獨自撐開了一行

這是我在segmentfault上看到的一個問題，以前自己遇到過，所以就很熱情洋溢的去回答了一下，難道遇到個自己會的，示例代碼是這樣的：
CSS:

li{
    display: inline-block;
    text-align: center;
}
.left,.center,.right{
    width:300px;
    height:300px;
}
.left{
    background-color: #999;
}
.center{
    background-color: #ccc;
}
.right{
    background-color: #eee;
}  
HTML:

    
        1

大概就是這樣子，其實文和圖有點不對應，代碼中第一個模塊他只寫了一個“1”,我為了現象更加明顯，且好說明為什么，就打了一大段文字，現在我們來說說為什么。先來一張圖，看懂vertical-align的幾個屬性,順便帶上圖片出處，文章講得還可以，理解這張圖片，后面就好理解了。

inline-block的vertical-align 屬性默認是baseline對齊（深入理解的送福利），也就是英文文字小寫字母a,b,c這類字母底部的那條線，因為這些是外國人發明的，所以以英文字母才有針對性。inline-block擁有vertical-align屬性，其默認是基線對齊的，所以這三個inline-box需要基線對齊，而其基準線就是正常流中最后一個line box的基線,如果這個元素是空的，沒有內容，那么這個基線就是最后這個元素的margin-bottom線；如果這個元素不為空，那么這個元素的基線就是元素里面內容最后一行文字的基線；所以我們一個一個來套，發現這三個li元素在一行，第一個有文字，其基線為文字底部；最后一個沒有文字，其基線為margin-bottom線,考試要考，劃重點，可以自己為元素設置margin-bottom試試,這就會造成第一個和二，三個錯行的感覺，其實他兩是為了基線對齊，所以多敲幾十個文字就能明顯看出其差別。所以最簡單的解決方案就是為li添加vertical-align: 屬性不為baseline，氣不氣，改變其縱向的對齊方式的默認屬性;為啥非弄個折騰人勒。關于vertical-align,如果還想做這方面的深入了解，可以看看張大俠的分析

img圖片撐不滿整個div，有空隙

直接上圖更直觀(箭頭所指)：

相關css和html:




    
    
      
    .test {
    background-color: yellowgreen;
    font-size: 18px;
    vertical-align: top;
    }
    .test span {
        background-color: bisque;
    }
    .blank {
        line-height: 20px;
        height: 20px;
    }
    img {
        width: 260px;
        height: 260px;
        float: left;
    }
    input {
        border: 1px solid red;
        height: 24px;
        margin-left: 30px;
    }
    .box {
        background: black;
        color: white;
        padding-left: 20px;
        line-height: 10px;
    }
    .box .dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: white;
        vertical-align: bottom;
    }

圖片一中，實現了文字環繞圖片那種想要的效果，并且后面的元素沒有上移錯位,其原因是上面說過的，如果塊狀元素沒有顯示的設置高度，其高度由其元素內的最高的linebox決定,所以第一張圖片div的高度是比img高度高的，因為我重要的事情說了三遍，文字夠多。而第二張圖片，div高度只有144px，因為img是浮動的，他的linebox被浮動屬性破壞了,而文字又不夠多，所以就造成了所謂的高度塌陷，致使最后兩個div陷進了圖片所在的div中，要知道，這種情況在正常塊狀元素布局中是根本不會出現的。至于解決浮動引起的高度塌陷，我總結了兩條，分別是：

使用clear:both，常見的什么clearfix；

觸發浮動元素父元素的BFC（塊狀格式上下文，為解決盒子與盒子之間，內容不相符影響而生的概念）；

清除浮動，相信大家都懂，而觸發bfc。

我說說我常用的幾條，網上講bfc的很多：

float屬性不為none的元素

position（absolute，fixed）

display (table-cell,inline-block，flex等)

overflow屬性不為visible

除了上面講的這些，我還遇到過有人問，為什么我用了浮動，但元素沒有浮在這一行，卻換了行，像下圖這樣

   
    我是導航欄的一些文字
    我想浮在右邊
   
   .gr{
      background-color: yellowgreen;
      margin:5px;
    }
    .fr{
      float:right;
      background-color: green;
    }

上面這種沒按想要的方式浮，是因為塊狀元素會不敢其內容長度有沒有一行的長度，其都會占據一行的長度，后面的元素會自動換行。解決這個其最簡單的方式就是將fr元素放在gr元素前，為什么這樣就可以，因為float破壞了div元素的塊狀屬性，但其未撐開父元素的高度，其浮動屬性為right，默認從右側開始布局，所以后面的div仍按正常的文檔流從最左端開始布局。

有一種行內元素，又叫置換元素

如果你看上面一題代碼的時足夠細心，你會發現我給img設置了width和height兩個屬性值為130，但由于又在css屬性里定義了寬高260,但最終表現出的寬高為260。如果css不定義寬高呢?答案是多少,要不你試試，你慢慢試，我還是先公布答案：130.這里我們將會說一個css中的一個鮮為人知的術語:置換元素，那什么又是置換元素呢？

置換元素是指：瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。

例如：瀏覽器根據標簽的src屬性顯示圖片。input元素根據標簽的type屬性決定顯示輸入框還是按鈕。還有，還有近來很火的canvas。

置換元素有如下共同點：

置換元素一般內置寬高屬性，因此可以設置其寬高；

置換元素與一般的行內元素相比，其可以設置margin,padding，height,width等css屬性；

感覺要寫的還有很多，事件根本不夠用，先睡了，未完待續
如果文中有任何不足和錯誤之處，還請及時指正。

GPU云服務器云服務器 css屬性訪問CSS屬性 position屬性，css 獲取CSS屬性值

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

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

css魔幻屬性跟進篇

摘要：中是這樣定義的屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。其同樣適用于設置屬性為絕對定位或固定定位的內聯元素。至于為什么，可以理解為內聯元素沒有盒模型，其高度由內容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關的文章，文章絕大部分是自己工作總結得來，另一部分是平日sf回答的與面試中向面試官交流學到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0
CSS相對定位和絕對定位

摘要：三絕對定位拼爹型絕對定位不占有位置。父級有定位絕對定位是將元素依據最近的已經定位絕對固定或相對的父元素祖先進行定位。絕對定位的盒子水平垂直居中普通盒子左右居中用即可，但對于絕對定位的就無效了。為什么要學定位定位是CSS中的難點和重點，特別是后面學javascript特效時候，比如實現下拉菜單、彈框等，要蓋住下面內容又不會影響下面內容，比如要超出盒子一部分，比如屏幕中有一個小彈窗飄來...

xinhaip 2019-08-30 15:54 評論0 收藏0
回顧Java 發展，看 Docker 與Mesos | 數人云COO謝樂冰@KVM分享實錄

摘要：馬拉松會匹配每個和提供的資源，然后通過將任務下發下去。對外暴露的就是負載均衡的某個服務，后面自動將流量轉發到某個容器的端口上。還有一直辦法是用內網的，這個會維護現有的容器列表端口，并且返回任意一個的端口，頁實現了負載均衡和服務發現功能。演講嘉賓數人云COO 謝樂冰在德國工作十年，回國后加入惠普電信運營商部門，擁有多年項目經驗和創業公司工作經驗。在數人云負責產品售前和運營，專注行...

canger 2019-06-28 15:09 評論0 收藏0
云計算正在改變整個ICT世界

摘要：隨著服務器自身能力的不斷提升，尤其是云計算帶來的軟件定義可靠性的到來，服務器正在吞噬整個服務器市場，定制化和廠家興起，在中國以天蝎整機柜服務器為代表。云計算正在改變整個產業，將被和正在被云計算改變的，還包括創新創業采購機器學習自動駕駛和等?！　∫豁椝^的革命性技術，要么性價比比前輩至少提高一個數量級，要么可以滿足之前技術無法實現剛需。但僅靠這兩樣，新興力量要打敗舊勢力還不夠，還要采用與舊勢...

cocopeak 2019-04-28 19:26 評論0 收藏0
B站智能防擋彈幕的一種python實現

摘要：將圖片的處理方法放到視頻中的每一幀，再加上彈幕飛過的效果，就完成了版的智能防擋彈幕。不知道站的實現方法是怎樣，是否有人工干預，是否有預計算。某天代碼寫得老眼昏花，去B站上摸魚，突然發現奇怪的現象： showImg(https://segmentfault.com/img/remote/1460000017911829?w=600&h=284); 喲呵，B站竟然做了視頻前景提取，把...

jzzlee 2019-07-31 11:21 評論0 收藏0