對css中包裹性的淺顯認識

2021-08-18 23:22:29 字數 988 閱讀 4483

從乙個例子中看包裹性和水平對齊的兩種方式

《css世界》一書中有這麼乙個例子,(主要考察對包裹性的理解。)

包裹性:(自適應性)指元素的尺寸只由內部元素決定,但是永遠小於包含塊容器的尺寸

需求:頁面中某個模組的文字內容是動態的,可能是幾個字,也可能是一句話,希望當字數少的時候居中顯示,字數超過 一行的時候居左顯示,問該如何實現。

在這裡就要知道text-align的作用條件,如圖所示:實現需求的**及其結構已經畫出來,此時需要兩個div盒子, 根據總結:【text-align是乙個寫在父級元素css中對子元素的文字或內聯物件(或者類內聯元素)水平對齊方式有改變的屬性】。最外邊的box使用text-align屬性,是作用於子元素content,但是由於content是乙個塊級別元素,所以必須使用display:inline-block,來改變content的外在表現。使其變成乙個披著inline皮的塊元素。同時對content使用text-align:left讓裡面的文字進行居左顯示,但是由於文字外部的content盒子是具有包裹性的(即其大小尺寸是由內部元素決定的,即為張老師所說的內部尺寸),所以content的大小會一直和內部的文字大小所同步,當content內部中的文字不足一行時外部的box的center會讓這個inline-block的content盒子進行居中顯示,當文字內容已經超出了一行的時候,box的center已經對content無法產生影響了。所以此時就會居左顯示。如圖:

在這裡面引申出乙個知識點:

第一:

水平居中顯示的兩種方式:(這兩種方法在前邊已經分享了微博,我再將個人的理解總結一下)

1) text-align:center; text-align屬性是乙個寫在父級元素中對子元素內的文字或者內聯物件(類內聯物件)水平對齊方式有作用的屬性。

2) margin:0 auto; margin是乙個只對塊元素有作用的,寫在**就作用在哪的乙個屬性。

CSS中的包裹性

之前一直都知道css中的部分元素具有包裹性,今天寫部落格的時候正好也遇到了乙個,所以想總結一下,有錯誤的地方歡迎指出來。包裹性就是父元素的寬度會收縮到和內部元素寬度一樣。就我已知的有 absolute,fixed,float,inline box等等。仔細看看這些元素,他們都有乙個共同特點,那就是都...

對CSS中幾種定位的認識

1 靜態定位 static left right top bottom z index等屬性無效。2 絕對定位 absolute 將被賦予絕對定位的元素從文件流中拖出,使用left right top bottom等屬性相對於其最接近的乙個最有定位設定的父級元素進行絕對定位,如果元素的父級沒有設定定...

談談我對CSS的認識

最近一直很流行div css,我也就試著學了一下,css是標記性語言,配合html進行網頁外觀與內容實現分離。css是w3c組織制定並發布,由於w3c是民間組織,所以沒有強制要求各瀏覽器一定要對css給以支援,故此,各瀏覽器對css的支援也五花八門。不過隨著瀏覽器開發商對css認識的重視,現在對cs...