目錄
六、常用屬性
| 屬性 | 取值 | 備註 | |
| background | background-color | 背景顏色 | |
| background-image | 背景圖片 | ||
| background-repeat | 背景圖片是否平鋪 | 默認平鋪 | |
| background-position | 背景圖片位置，取值center、left、right等 | ||
| background-attachment | 背景圖片是否固定，取值fixed、scroll | ||
| background-size 背景圖片大小隻能通過background-size |
background-size: 100px, 200px; background-size: cover; background-size: contain;
|
cover:會自動調整縮放比例，保證圖片填滿整個背景區域，如果有溢出部分則會被隱藏 contain:自動調整縮放比例，保證圖片始終完整顯示在背景區域，但是背景區域可能不能填滿 |
|
| background簡寫形式 |
background: #00a4ff url('./images/fa-search.png') center center no-repeat; |
設置背景色、圖片水平居中和垂直居中、不平鋪 | |
|
text-decoration 用於給鏈接修改裝飾效果 |
none | 默認，定義標準的文本 | 可以去標籤a有下劃線 |
| underline | 帶有下劃線 | ||
| overline | 帶有上劃線 | ||
| line-through | 文本被橫線穿過，相當於刪除線 | ||
| border | border-width | 邊框的寬度 | |
| border-color | 邊框的顏色 | ||
| border-style | 邊框的樣式，取值，none、solid、dashed、dotted、double | ||
| border-collapse:collapse | 合併相鄰邊框 | ||
| border-radius |
圓角邊寬， border-radius：10px; 表示4個角弧度是10px border-radius:50%; 顯示成圓形 |
||
| padding | padding-top | ||
| padding-right | |||
| padding-bottom | |||
| padding-left | |||
| box | box-sizing |
取值 在content-box模式下，當我們給一個盒子設置寬度或者高度，是不包含border、padding，也就是說此時我們再給設置border、padding會撐開盒子。 在border-box模式下，盒子的寬度和高度是包含border、padding的。 |
注意：兩種模式都不包含margin |
| box-shadow |
給盒子添加陰影， box-shadow: 水平陰影 垂直陰影 模糊距離 陰影大小 陰影顏色 inset; 水平陰影、垂直陰影是必選，其他可選 inset 表示內陰影，默認是外陰影 |
水平陰影:正值向由，負值向左 垂直陰影:正值向下，負值向上 |
|
| text-shadow 文字陰影 | 與邊框陰影屬性值一樣 | ||
| letter-sapcing | 設置字間距 | ||
| 元素隱藏 | display: none; | 隱藏元素，原有位置不保留 | |
| visibility:hidden | 隱藏元素，原有位置保留 | ||
| overflow,取值範圍visible(默認)、auto(超出顯示滾動條)、hidden（超出部分隱藏）、scroll（無論是否超出都顯示滾動條） | 檢索或者設置當前對象的內容，超過其指定高度及寬度時應該如何管理內容 | 其中hidden使用最多 | |
| z-index | 指定疊放次序，數值越大越在上層 | ||
| outline | 輪廓線 | 當一個文本框獲得焦點後會有一個默認輪廓線，我們可以通過outline:0 /outline:none將輪廓線取消掉 | |
| 居中 | 文字居中 | 文字水平居中：text-align:center | |
| 文字垂直居中： line-height 等於 height | |||
| 盒子居中 | 盒子水平居中：margin 0 auto | ||
| 盒子垂直居中：使用定位 | |||
| vertical-align | 垂直對其方式，屬性取值爲：baseline(基線對其，默認)、middle（中線）、bottom（底線）、top（頂線） |
對於塊級元素無效，對行內元素、行內塊元素有效。通常設置圖片/表單元素與文字對齊。 <div > <a href="">找回密碼</a> |
img/表單元素等行內塊元素默認場景下，它的底線與父元素基線對其，圖片底側會有一個白色縫隙。我們可以通過vertical-align:top 、middle來解決這個問題 |
| text-overflow | 超出的文字是否顯示省略號，屬性取值爲：clip(不顯示)，ellipsis（省略號） |
如果實現超出部分顯示應該這樣： white-sapce:nowrap; /* 強制一行顯示 */ overflow:hidden; /* 隱藏多於內容 */ text-overflow:clip; /* 直接裁剪 */ text-overflow:ellipsis; /* 顯示省略號 */ 前兩個屬性是必須的
|
text-overflow通常用於新聞標題等 |
| text-indent | 首行縮進 | ||
| transform | 應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等 |
rotateX\rotateX\rotateZ 按照x、y、z翻轉多少度 translate3d(x,y,z) 設置運動路徑 |
|
| transform-style | 屬性值preserve-3d | 讓子盒子有3D效果 | 設置給父盒子，用於實現3D輪播圖，做3D效果這行代碼經常用 |
|
perspective （透視） |
實際是人眼到屏幕的舉例，此屬性和transform結合使用，達到3D效果 |
perspective:500px; 數值越小，效果越明顯（近大遠小效果） |
做爲屬性設置給父元素，作用域所有3D轉換的子元素， |
| backface-visibility | backface-visibility:hidden; | 不是正面對向屏幕則隱藏，實際是大於90度則隱藏 | 此屬性用於兩張相同大小的圖片進行翻轉顯示 |
七、小技巧
| 技巧 | 說明 | 舉例 |
| 在一行內的盒子中，設置行高等於盒子的高度，就可以使文字 垂直居中 | 即line-height等於height的屬性值，可使文字垂直居中 | div { width: 600px; height: 200px; text-align: center;/* 水平居中 */ line-height: 200px;/* 垂直居中 將line-height行高等於盒子高度height */ } |
| 當盒子內文本字數不一致，可以使用padding將其文本水平居中 |
1、不 需要設置盒子的寬度 2、設置padding， 上下爲0，左右爲實際寬度即可 |
nav a { display:inline-block; height:40px; line-height:40px; /*設置垂直居中*/ /* 盒子不設置width 直接設置padding */ padding:0 15px; /* 上下是0px 左右是15px */ } <nav> <a href="#">首頁</a> <a href="#">三個字</a> <a href="#">手機新浪網</a> <a href="#">網站導航</a> </nav> |
| 實現盒子水平居中，可以使用外邊距margin |
1、盒子必須是塊級元素 2、盒子必須指定寬度width 3、通過margin auto屬性設置水平居中 |
div {/* div是塊級元素 */ width: 200px; /* 盒子必須有寬度 */ height: 220px; background-color: red; margin: 30px auto;/* 上下30 左右auto */ } |
| 瀏覽器生成成塊級元素經常有一個默認邊距，可以使用margin、padding清除掉 |
body { margin:0; padding:0; } div { margin:0; padding:0; } |
|
| 嵌套盒子（例如嵌套div），設置內部盒子的外邊距，默認是不生效的，可以使用如下三種方式解決 | 三種解決方法 | <style> .father { width: 500px; height: 500px; background-color: red; /* 解決方法1：設置父盒子邊框 border: 1px solid;*/ /* 解決方法2：設置父盒子的padding padding: 5px;*/ /* 解決方法3：最佳方式 overflow */ overflow: hidden; } .son { width: 300px; height: 300px; background-color:purple; margin-top:30px; /* 外邊框距離父div 是30px */ } </style> <!-- 嵌套盒子(div) 設置內部盒子外邊距 --> <div class="father"> <div class="son"></div> </div> |
| 取消列表樣式 |
ul { list-style:none;/* 取消列表默認樣式(小點) */ } |
|
| 隱式模式轉換 |
行內元素 如果添加了 絕對定位或者 固定定位後 或 浮動後，可以不用顯示進行模式轉換（即可以不寫display），直接給高度和寬度就可以了 |
|
| 當a標籤裏面有圖片，往往是作爲背景圖片，而不是插入img標籤導入圖片，a標籤顯示背景圖片需要設置寬和高，但a標籤屬於行內元素直接設置寬高是無效的，因此需要display:block轉成塊元素 | ||
| ul、h1標籤默認有內外邊距，通常我們需要取消掉內外邊距 | ||
|
我們在開發的時候通常將logo放到h1中，爲了搜索引擎優化，提升搜索的權重 |
||
| 讓文字在圖片垂直位置 |
兩種方式： 1、定位方式 2、在圖片處增加vertical-algin:center，或者指定正負像素 |
|
| 浮動的盒子例如float:left，如何居中 |
注意浮動的盒子使用margin 0 auto是不行的 1、在子盒子外面套一個父盒子，是父盒子進行margin 0 auto 2、採用flex伸縮佈局方式 |
利用flex伸縮佈局可以去掉盒子間的空白縫隙，例如 .copyright-link ul { width: 1140px; display: flex;/* 設置flex模式 */ flex-direction: row; /* 行模式顯示 */ justify-content: center; /* 居中顯示 */ margin: 0 auto; } |
| 使用position:absolute;的元素在使用margin 0 auto水平居中，將無效。 | ||