CSS基礎 CSS常見問題

2021-09-14 02:47:23 字數 1921 閱讀 7929

父元素高度為auto

乙個父元素如果不設定高度的話，預設就是緊包裹著子元素，如果父元素設定的pading-top和padding-bottom相同，這本身就是乙個垂直居中效果，但是當子元素並不是獨佔一行，而是inline元素和inline-block元素組合成一行，比如下面這個例子：

inline元素和inline-block元素在同一行顯示，由於這個inline-block元素本身有高度，就會把整個行撐開，但是文字和依然在一行，細看可以發現，本身並沒有和文字最下邊對齊，這是由於inline-block預設帶有vertical-align屬性，其值預設為baseline，也就是和文字的baseline對齊，注意vetical-align只對inline-block元素有效，這種情況下，只需要對inline-block元素設定vertical-align:middle即可實現垂直居中。效果如下：

父元素height為固定值

這種情況只需要在父元素上設定line-height屬性等於父元素的height屬性即可(line-height = height)，這種只適用於單行文字，且父元素高度固定，對於多行文字就無能為力了。

子元素高度固定

這種情況下可以利用absolute定位來實現垂直居中。缺點就是脫離了普通文件流。

.parent 


.child 


// 或者下面的實現方法


.child
該情況下對子元素是塊級元素或非塊級元素均可以。

.parent
該方法由於display:table-ceil屬性的相容性不夠好，只能在ie8及更高版本使用。

.parent 


.child
該方法由於transform:translatey(-50%)屬性的相容性不夠好，只能在ie9及更高版本使用。

.parent
flex彈性布局更加的靈活簡單，對頁面中其他元素的影響更小，在ie11以及更高版本才能相容，如果是在移動端開發，盡量使用該屬性實現各種複雜的布局。

兩欄布局：一欄定寬，一欄自適應，自適應的一欄作為內容主體。

1：使用float + margin屬性。

.left 


.right
也可以使用absolute定位來實現。

.container 


.left 


.right
三列布局也是經常使用到的一種布局，它的特點是兩邊兩列固定，中間自適應。

1：左右兩欄使用float屬性，中間欄使用margin屬性。

左欄


右欄中間欄


.left,.right 


.right 


.middle
該方法必須要將中間欄放在最後，且如果父元素的寬度小於左右兩欄寬度時，右側欄會被擠下去。

2：使用position布局

.container 


.left,.right 


.right 


.middle
該方法的缺點是如果父元素有內外邊距的時候，會導致中間欄的位置出現偏差。

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...