css知識點總結之 實現居中布局

2021-08-15 01:19:22 字數 737 閱讀 5893

css實現居中布局

水平居中:

塊級元素:設定寬度且設定margin:0 auto;

行內元素:設定text-align: center;

垂直居中 :

行內元素:設定 line-height 和 height 相等

塊級元素:父元素設定相對布局 

已知高度:子元素設定絕對布局 top: 50%;,再設定 margin-top為負的二分之一自身高度;

未知高度:子元素使用絕對布局 position: absolute; top: 50%; transform: translatey(-50%);

水平垂直居中 (前面兩種方法父元素需設定相對布局) :

定高定寬:先設定絕對布局 top: 50%; left: 50%; 再為子元素設定二分之一自身高、寬度的負 margin-top

和margin-left;

高度和寬度未知:先用絕對布局 top: 50%; left: 50%;,再設定 transform: translate(-50%, -50%);

flex布局:為父元素設定display:flex; justify-content: center; align-items: center;

CSS四種方案實現 居中布局

不定寬元素的居中對齊 方案一 text align center display inline block css html demo 效果 優點 1.相容性好,相容ie 6 7只需對元素 display 屬性修改為 inline 缺點 child 會繼承 parent 的text align ce...

CSS知識點總結

css匯入方式 1.標籤內聯2.內部放置3.外部放置4.import url css選擇器 1.標籤選擇器2.id選擇器3.class選擇器4.組合選擇器 css優先順序 就近原則 標籤 id class 為了防止不支援css的瀏覽器將.標籤間的css規則當成普通字串,而顯示在網頁上,應將css的規...

CSS知識點總結

1 內聯樣式 行內樣式 將樣式宣告在元素的style屬性中 2.內部樣式 將樣式宣告定義在頁面的style屬性中 3.外部樣式表 步驟 建立乙個新的css檔案 建立和html檔案的關聯 css樣式表的特徵 繼承性 1 子級元素可以直接使用父級元素宣告好的樣式 這裡不是所有的樣式都可以被繼承 層疊性 ...