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 子級元素可以直接使用父級元素宣告好的樣式 這裡不是所有的樣式都可以被繼承 層疊性 ...