我腦中飄來(lái)飄去的css魔幻屬性

JouyPub 發(fā)布于2019-08-29 14:02 / 3066人閱讀

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

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

為什么此處li標(biāo)簽內(nèi)的p元素看起來(lái)獨(dú)自撐開(kāi)了一行

這是我在segmentfault上看到的一個(gè)問(wèn)題，以前自己遇到過(guò)，所以就很熱情洋溢的去回答了一下，難道遇到個(gè)自己會(huì)的，示例代碼是這樣的：
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

大概就是這樣子，其實(shí)文和圖有點(diǎn)不對(duì)應(yīng)，代碼中第一個(gè)模塊他只寫(xiě)了一個(gè)“1”,我為了現(xiàn)象更加明顯，且好說(shuō)明為什么，就打了一大段文字，現(xiàn)在我們來(lái)說(shuō)說(shuō)為什么。先來(lái)一張圖，看懂vertical-align的幾個(gè)屬性,順便帶上圖片出處，文章講得還可以，理解這張圖片，后面就好理解了。

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

img圖片撐不滿(mǎn)整個(gè)div，有空隙

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

相關(guān)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;
    }

圖片一中，實(shí)現(xiàn)了文字環(huán)繞圖片那種想要的效果，并且后面的元素沒(méi)有上移錯(cuò)位,其原因是上面說(shuō)過(guò)的，如果塊狀元素沒(méi)有顯示的設(shè)置高度，其高度由其元素內(nèi)的最高的linebox決定,所以第一張圖片div的高度是比img高度高的，因?yàn)槲抑匾氖虑檎f(shuō)了三遍，文字夠多。而第二張圖片，div高度只有144px，因?yàn)閕mg是浮動(dòng)的，他的linebox被浮動(dòng)屬性破壞了,而文字又不夠多，所以就造成了所謂的高度塌陷，致使最后兩個(gè)div陷進(jìn)了圖片所在的div中，要知道，這種情況在正常塊狀元素布局中是根本不會(huì)出現(xiàn)的。至于解決浮動(dòng)引起的高度塌陷，我總結(jié)了兩條，分別是：

使用clear:both，常見(jiàn)的什么clearfix；

觸發(fā)浮動(dòng)元素父元素的BFC（塊狀格式上下文，為解決盒子與盒子之間，內(nèi)容不相符影響而生的概念）；

清除浮動(dòng)，相信大家都懂，而觸發(fā)bfc。

我說(shuō)說(shuō)我常用的幾條，網(wǎng)上講bfc的很多：

float屬性不為none的元素

position（absolute，fixed）

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

overflow屬性不為visible

除了上面講的這些，我還遇到過(guò)有人問(wèn)，為什么我用了浮動(dòng)，但元素沒(méi)有浮在這一行，卻換了行，像下圖這樣

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

上面這種沒(méi)按想要的方式浮，是因?yàn)閴K狀元素會(huì)不敢其內(nèi)容長(zhǎng)度有沒(méi)有一行的長(zhǎng)度，其都會(huì)占據(jù)一行的長(zhǎng)度，后面的元素會(huì)自動(dòng)換行。解決這個(gè)其最簡(jiǎn)單的方式就是將fr元素放在gr元素前，為什么這樣就可以，因?yàn)閒loat破壞了div元素的塊狀屬性，但其未撐開(kāi)父元素的高度，其浮動(dòng)屬性為right，默認(rèn)從右側(cè)開(kāi)始布局，所以后面的div仍按正常的文檔流從最左端開(kāi)始布局。

有一種行內(nèi)元素，又叫置換元素

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

置換元素是指：瀏覽器根據(jù)元素的標(biāo)簽和屬性，來(lái)決定元素的具體顯示內(nèi)容。

例如：瀏覽器根據(jù)標(biāo)簽的src屬性顯示圖片。input元素根據(jù)標(biāo)簽的type屬性決定顯示輸入框還是按鈕。還有，還有近來(lái)很火的canvas。

置換元素有如下共同點(diǎn)：

置換元素一般內(nèi)置寬高屬性，因此可以設(shè)置其寬高；

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

感覺(jué)要寫(xiě)的還有很多，事件根本不夠用，先睡了，未完待續(xù)
如果文中有任何不足和錯(cuò)誤之處，還請(qǐng)及時(shí)指正。

云服務(wù)器 GPU云服務(wù)器 css屬性訪(fǎng)問(wèn)CSS屬性 position屬性，css 獲取CSS屬性值

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

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

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

登陸后可評(píng)論

0條評(píng)論

JouyPub

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

第九講軟件測(cè)試面試題一

閱讀 1488·2021-10-08 10:04
云主機(jī)熱遷移是什么意思-云主機(jī)的優(yōu)缺點(diǎn)是什么呢？

閱讀 2893·2021-09-22 15:23
世間最美好的相遇是久別重逢、猶如你在什么時(shí)候選擇軟件測(cè)試、不思量自難忘...

閱讀 2867·2021-09-04 16:40
webpack 性能提速

閱讀 1251·2019-08-29 17:29
# CSS 絕對(duì)定位釋義

閱讀 1578·2019-08-29 17:28
我腦中飄來(lái)飄去的css魔幻屬性

閱讀 3067·2019-08-29 14:02
css 定位及屬性命名規(guī)范

閱讀 2307·2019-08-29 13:18
Chrome 控制臺(tái)常用調(diào)試技巧詳解

閱讀 953·2019-08-23 18:35

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

我腦中飄來(lái)飄去的css魔幻屬性

相關(guān)文章

css魔幻屬性跟進(jìn)篇

CSS相對(duì)定位和絕對(duì)定位

回顧Java 發(fā)展，看 Docker 與Mesos | 數(shù)人云COO謝樂(lè)冰@KVM分享實(shí)錄

云計(jì)算正在改變整個(gè)ICT世界

B站智能防擋彈幕的一種python實(shí)現(xiàn)

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

0條評(píng)論

JouyPub

男|高級(jí)講師

TA的文章

第九講軟件測(cè)試面試題一

云主機(jī)熱遷移是什么意思-云主機(jī)的優(yōu)缺點(diǎn)是什么呢？

世間最美好的相遇是久別重逢、猶如你在什么時(shí)候選擇軟件測(cè)試、不思量自難忘...

webpack 性能提速

# CSS 絕對(duì)定位釋義