元素的顯示與隱藏
在CSS中有三個顯示和隱藏的單詞比較常見邑飒，我們要區(qū)分開县匠，他們分別是 display visibility 和 overflow聚唐。
他們的主要目的是讓一個元素在頁面中消失杆查，但是不在文檔源碼中刪除。 最常見的是網(wǎng)站廣告客峭，當(dāng)我們點(diǎn)擊類似關(guān)閉不見了舔琅，但是我們重新刷新頁面，它們又會出現(xiàn)和你玩躲貓貓＝汲ⅰ流昏！
display 顯示
設(shè)置或檢索對象是否及如何顯示。
display: none 隱藏對象
display: block 除了轉(zhuǎn)換為塊級元素之外刁绒，同時還有顯示元素的意思。
display: none 隱藏之后初狰，
不再保留位置。
visibility 可見性
設(shè)置或檢索是否顯示對象腥光。
visibility: visible 對象可視
visibility: hidden 對象隱藏
visibility: hidden 隱藏之后，
繼續(xù)保留原有位置捉片。（停職留薪）
overflow 溢出
檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容。
visible : 不剪切內(nèi)容也不添加滾動條莹规。
auto : 超出自動顯示滾動條良漱，不超出不顯示滾動條
hidden : 不顯示超過對象尺寸的內(nèi)容，超出的部分隱藏掉
scroll : 不管超出內(nèi)容否幼苛，總是顯示滾動條
CSS用戶界面樣式
所謂的界面樣式墙杯， 就是更改一些用戶操作樣式溉旋， 比如 更改用戶的鼠標(biāo)樣式， 表單輪廓等梧油。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了骗村。 防止表單域拖拽
鼠標(biāo)樣式cursor
設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
cursor :
default 小白 | pointer 小手 | move 移動 | text 文本
鼠標(biāo)放我身上查看效果：
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動</li>
<li style="cursor:text">我是文本</li>
</ul>
盡量不要用hand 因?yàn)?火狐不支持 pointer ie6以上都支持的盡量用
輪廓 outline
是繪制于元素周圍的一條線，位于邊框邊緣的外圍财忽，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
一般都是去掉的：outline: 0;
<input type="text" style="outline: 0;"/>
防止拖拽文本域resize
resize：none這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。
一般情況下右下角可以拖拽：
<textarea></textarea>
設(shè)置右下角不可以拖拽：<textarea style="resize: none;"></textarea>
vertical-align 垂直對齊
居中對齊：
塊級元素居中對齊: 1. 設(shè)置寬度2.margin: 0 auto;
文字居中對齊:text-align: center;
垂直對齊：
vertical-align 垂直對齊， 對于塊元素?zé)o效舞终。
設(shè)置或檢索對象內(nèi)容的垂直對其方式：
vertical-align :
baseline |top |middle |bottom
vertical-align對塊級元素內(nèi)容對齊無效余爆，它只針對于行內(nèi)元素或者行內(nèi)塊元素內(nèi)容對齊。
特別是行內(nèi)塊元素桩砰， 通常用來控制圖片和表單等。
圖片和文字對齊
圖片和文字默認(rèn)是基線對齊，一般可以通過vertical-align: middle來設(shè)置圖文垂直居中
去除圖片底側(cè)空白縫隙
如果一個元素沒有基線，比如圖片或者表單等行內(nèi)塊元素砖茸，則他的底線會和父級盒子的基線對齊。 這樣會造成一個問題，就是圖片底側(cè)會有一個空白縫隙征绎。
解決方法：
- 給img 添加
display：block;轉(zhuǎn)換為塊級元素就不會存在問題了凫岖。
- 給img
vertical-align:middle | top等等婶芭。讓圖片不要和基線對齊。
vertical-align: top，推薦的方法
溢出的文字隱藏
word-break:自動換行
- normal 使用瀏覽器默認(rèn)的換行規(guī)則击你。
- break-all 允許在
單詞內(nèi)換行朝巫。- keep-all 只能在半角
空格或連字符處換行。
white-space:自動換行
- normal 默認(rèn)處理方式。
- nowrap 強(qiáng)制在同一行顯示文本，直到文本結(jié)束或者遇到換行符。
text-overflow 文字溢出
設(shè)置或檢索是否使用一個省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出
- clip : 不顯示省略標(biāo)記（...），而是
簡單的裁切- ellipsis : 當(dāng)對象內(nèi)文本溢出時
顯示省略標(biāo)記（...）
1> 單行文本顯示，超出省略號表示
p {
white-space: nowrap; /*強(qiáng)制文本一行顯示*/
overflow: hidden; /*超出元素默認(rèn)寬度任務(wù)隱藏*/
text-overflow: ellipsis; /*使用省略號代表有內(nèi)容未顯示*/
}
2> 多行文本顯示，超出省略號表示
/* 通用方案 */
p {
height: 30px;
line-height: 2em;
overflow: hidden;
border: 1px solid red;
position: relative;
}
p::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0px 5px 0px 5px;
background: #fff;
}
/* webkit方案 */
.p1 {
display: -webkit-box; /*將對象作為彈性的伸縮盒子顯示*/
-webkit-box-orient: vertical; /*設(shè)置伸縮盒子對象內(nèi)自對象的排列方式*/
-webkit-line-clamp: 2; /*用該屬性來限定塊元素內(nèi)文本顯示行數(shù)*/
overflow: hidden; /*超出文本部分隱藏*/
text-overflow: ellipsis; /*使用省略號告訴用戶有內(nèi)容未顯示*/
}
滑動門
滑動門出現(xiàn)的背景
制作網(wǎng)頁時抒和，為了美觀顿痪，常常需要為網(wǎng)頁元素設(shè)置特殊形狀的背景撕阎，比如微信導(dǎo)航欄碌补，有凸起和凹下去的感覺镇匀，最大的問題是里面的字?jǐn)?shù)不一樣多晰韵，咋辦？
為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少，出現(xiàn)了CSS滑動門技術(shù)起愈。它從新的角度構(gòu)建頁面官觅，使各種特殊形狀的背景能夠自由拉伸滑動，以適應(yīng)元素內(nèi)部的文本內(nèi)容，可用性更強(qiáng)杠览。 最常見于各種導(dǎo)航欄的滑動門钦铁。
核心技術(shù)
核心技術(shù)就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄。
<li>
<a href="#">
<span>導(dǎo)航欄內(nèi)容</span>
</a>
</li>
a {
margin: 100px;
display: inline-block;
height: 33px;
/* 千萬不要給寬度，寫死寬度是不對的，需要推拉門自由縮放 */
background: url(images/ao.png) no-repeat;
padding-left: 15px;
color: #fff;
text-decoration: none;
line-height: 33px;
}
a span {
display: inline-block;
height: 33px;
/* span 不能給寬度瘪板，利用 padding 擠開米诉，需要 span 右邊的圓角，所以背景位置右對齊 */
background: url(images/ao.png) no-repeat right;
padding-right: 15px;
}
總結(jié)：
- a 設(shè)置 背景左側(cè)篷帅，padding 撐開合適寬度史侣。
- span 設(shè)置背景右側(cè)拴泌，padding 撐開合適寬度 剩下由文字繼續(xù)撐開寬度。
- 之所以 a 包含 span 就是因?yàn)?整個導(dǎo)航都是可以點(diǎn)擊的惊橱。
before和after偽元素(詳解)
之所以被稱為偽元素蚪腐，是因?yàn)樗麄儾皇钦嬲捻撁嬖兀琱tml沒有對應(yīng)的元素税朴，但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣回季，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現(xiàn)正林，實(shí)際上是css樣式展現(xiàn)的行為泡一，因此被稱為偽元素。是偽元素在html代碼機(jī)構(gòu)中的展現(xiàn)觅廓，可以看出無法偽元素的結(jié)構(gòu)無法審查
偽元素的本質(zhì)就是：插入一個元素（標(biāo)簽 盒子）鼻忠，只不過是行內(nèi)元素（span a）
注意：偽元素:before和:after 添加的內(nèi)容默認(rèn)是 inline元素；這個兩個偽元素的content屬性杈绸，表示偽元素的內(nèi)容帖蔓，設(shè)置 :before 和 :after 時必須設(shè)置其content屬性，否則偽元素就不起作用瞳脓。
eg:
div {
width: 296px;
height: 180px;
margin: 20px auto;
position: relative; /* 子絕父相 */
}
div:hover::before { /* 鼠標(biāo)經(jīng)過之后 前面插入一個偽元素 */
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(255, 255, 255, .3);
display: block; /* 偽元素屬于行內(nèi)元素 要轉(zhuǎn)換 */
position: absolute; /* 要偽元素不占位塑娇， 就用絕對定位 */
top: 0;
left: 0;
box-sizing: border-box; /* 把padding 和 border 都算入 width 里面 */
}
