1. 元素的顯示與隱藏
- display 設(shè)置或檢索對象是否及如何顯示。
display: none 隱藏對象
display：block 除了轉(zhuǎn)換為塊級元素之外，同時還有顯示元素的意思。 -
特點： 隱藏之后，不再保留位置。
29none.png
2. visibility 可見性
- 設(shè)置或檢索是否顯示對象。
visibility：visible ; 對象可視
visibility：hidden; 對象隱藏 -
特點： 隱藏之后，繼續(xù)保留原有位置。
30visibility.png
3. overflow 溢出
- 檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容。
| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內(nèi)容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內(nèi)容，超出的部分隱藏掉 |
| scroll | 不管超出內(nèi)容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
實際開發(fā)場景：
- 清除浮動
- 隱藏超出內(nèi)容，隱藏掉, 不允許內(nèi)容超過父盒子。
4. 顯示與隱藏總結(jié)
| 屬性 | 區(qū)別 | 用途 |
|---|---|---|
| display | 隱藏對象，不保留位置 | 配合后面js做特效，比如下拉菜單，原先沒有，鼠標(biāo)經(jīng)過，顯示下拉菜單， 應(yīng)用極為廣泛 |
| visibility | 隱藏對象，保留位置 | 使用較少 |
| overflow | 只是隱藏超出大小的部分 | 1. 可以清除浮動 2. 保證盒子里面的內(nèi)容不會超出該盒子范圍 |
CSS用戶界面樣式
5. 鼠標(biāo)樣式
設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
| 屬性值 | 描述 |
|---|---|
| default | 小白 默認(rèn) |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
6. 輪廓線 outline
是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我們都不關(guān)心可以設(shè)置多少，我們平時都是去掉的。 li
最直接的寫法是 ： outline: 0; 或者 outline: none;
7. 防止拖拽文本域resize
實際開發(fā)中，我們文本域右下角是不可以拖拽：
<textarea style="resize: none;"></textarea>
8. vertical-align 垂直對齊
vertical-align 垂直對齊，它只針對于行內(nèi)元素或者行內(nèi)塊元素
vertical-align : baseline |top |middle |bottom
- 注意：
vertical-align 不影響塊級元素中的內(nèi)容對齊，它只針對于行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素， 通常用來控制圖片/表單與文字的對齊。
-
去除圖片底側(cè)空白縫隙
35vertical.png - 原因
圖片或者表單等行內(nèi)塊元素，他的底線會和父級盒子的基線對齊。
就是圖片底側(cè)會有一個空白縫隙。 - 解決
- 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊。
- 給img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了。
9. 溢出的文字省略號顯示
/*1. 先強(qiáng)制一行內(nèi)顯示文本*/
white-space: nowrap;
/*2. 超出的部分隱藏*/
overflow: hidden;
/*3. 文字用省略號替代超出的部分*/
text-overflow: ellipsis;
10. CSS精靈技術(shù)（sprite)
為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度。
CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。
這樣，當(dāng)用戶訪問該頁面時，只需向服務(wù)發(fā)送一次請求，網(wǎng)頁中的背景圖像即可全部展示出來。
我們需要使用CSS的
- background-image、
- background-repeat
- background-position屬性進(jìn)行背景定位，
- 其中最關(guān)鍵的是使用background-position 屬性精確地定位。
首先我們知道，css精靈技術(shù)主要針對于背景圖片，插入的圖片img 是不需要這個技術(shù)的。
- 精確測量，每個小背景圖片的大小和 位置。
- 給盒子指定小背景圖片時， 背景定位基本都是 負(fù)值。
11. 滑動門
為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少，出現(xiàn)了CSS滑動門技術(shù)。它從新的角度構(gòu)建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應(yīng)元素內(nèi)部的文本內(nèi)容，可用性更強(qiáng)。 最常見于各種導(dǎo)航欄的滑動門。
http://weixin.qq.com/
核心技術(shù)
核心技術(shù)就是利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄。
一般的經(jīng)典布局都是這樣的：
<a href="#">
<span>導(dǎo)航欄內(nèi)容</span>
</a>
</li>
css樣式
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
總結(jié)：
- a 設(shè)置 背景左側(cè)，padding撐開合適寬度。
- span 設(shè)置背景右側(cè)， padding撐開合適寬度 剩下由文字繼續(xù)撐開寬度。
- 之所以a包含span就是因為 整個導(dǎo)航都是可以點擊的。
12. margin負(fù)值
-
負(fù)邊距+定位：水平垂直居中
一個絕對定位的盒子， 利用 父級盒子的 50%， 然后 往左(上) 走 自己寬度的一半 ，可以實現(xiàn)盒子水平垂直居中。 -
**壓住盒子相鄰邊框 **
margin.png
13. CSS三角形
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
- 我們用css 邊框可以模擬三角效果
- 寬度高度為0
- 我們4個邊框都要寫， 只保留需要的邊框顏色，其余的不能省略，都改為 transparent 透明就好了
- 為了照顧兼容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;
14. 字體圖標(biāo)
字體圖標(biāo)下載
- icomoon字庫
http://icomoon.io - 阿里iconfont字庫
http://www.iconfont.cn/
字體圖標(biāo)的引入
- 選擇圖標(biāo)，下載字體包
- 解壓，將font文件夾放在項目根目錄下
- 在style.css文件中復(fù)制字體聲明放在自己css中
- 打開demo.html文件復(fù)制想要圖標(biāo)的小方框
- 設(shè)置字體樣式‘font-family’,必須和字體聲明中的‘font-family’一樣
