整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1. border-style:solid(實(shí)線)/dashed(虛線)/dotted(點(diǎn)劃線)/double(雙線)
2. padding 內(nèi)容區(qū)域距離邊框
3. padding會(huì)撐開(kāi)原有盒子的寬、高所以我們要減去padding的長(zhǎng)度
4. padding的屬性值4種方式：上 右 下 左、上 左右 下、上下 左右、 一個(gè)值四個(gè)方向（可以單獨(dú)設(shè)置某一邊）
5. 如果出現(xiàn)邊框塌陷那么：overflow:hidden；
1. margin 塊與塊之間的位置
2. margin: 0 auto
3. margin-top;設(shè)置時(shí)，如果子父都設(shè)置了margin，子的margin會(huì)傳遞到父的margin，例如：
解決方法：在父元素加入：overflow:hidden；
4. margin與padding
1. margin框架與框架之間、塊與塊之間、盒子與盒子、
2. padding盒子內(nèi)部
1. 語(yǔ)法{overflow:visible/hidden/scroll/auto/inherit;}
說(shuō)明：
visible:默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)出現(xiàn)在元素框之外。
hidden:內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的；
sorcll:內(nèi)容會(huì)被修剪，但瀏覽器會(huì)顯示滾動(dòng)條，以便查看其余的內(nèi)容；
auto:如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條，以便看見(jiàn)其他的內(nèi)容；
inherit:規(guī)定應(yīng)該從父元素繼承overflow屬性的值。
2. 語(yǔ)法{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}
normal:默認(rèn)。空白會(huì)被瀏覽器忽略。
pre:空白會(huì)被瀏覽器保留。
nowrap:文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到<br>標(biāo)簽為止。
pre-wrap:保留空白符序列，但是正常的進(jìn)行換行
pre-line：合并空白符序列，但保留換行符。
inherit：規(guī)定應(yīng)該從父元素繼承white-space屬性的值。
1. 語(yǔ)法{text-overflow:clip/ellipsis;}
clip：不顯示省略號(hào)，而是簡(jiǎn)單的裁剪。
ellipsis：當(dāng)對(duì)象內(nèi)文本沒(méi)有溢出時(shí)，顯示省略標(biāo)記。
2. 使用ellipsis時(shí)需要配合下面：
width:10px;容器的寬，
white-space:nowrap;強(qiáng)制文本在一行內(nèi)顯示，
overflow:hidden; 溢出內(nèi)容為隱藏，
text-overflow:ellipsis; 溢出文本顯示省略號(hào)，
嘍大家好，我是作者“未來(lái)”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！
所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標(biāo)樣式，表單輪廓等。但是比如滾動(dòng)條的樣式改動(dòng)受到了很多瀏覽器的抵制，因此我們就放棄了，防止表單域拖拽。
1 鼠標(biāo)樣式cursor
設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
cursor:default小白
pointer小手
move移動(dòng)
text文本
盡量不要用hand因?yàn)榛鸷恢С?/p>
pointer ie6以上都支持的盡量用
2 輪廓線outline
是繪制于元素周?chē)囊粭l線，位于邊框邊緣的外圍，可起到突出元素的作用。
但是我們都不關(guān)心可以設(shè)置多少，我們平時(shí)都是去掉的。
最直接的寫(xiě)法是：outline：0；或者 outline:none；
3 防止拖拽文本域resize
resize:none這個(gè)單詞可以防止火狐谷歌等瀏覽器隨意的拖動(dòng)文本域。
4 行內(nèi)塊和文字對(duì)齊
Vertical-align垂直對(duì)齊
以前我們講過(guò)讓帶有寬度的塊級(jí)元素居中對(duì)齊，是 margin：0 auto;
以前我們還講過(guò)讓文字居中對(duì)齊，是 text-align:center；
但是我們從來(lái)沒(méi)有講過(guò)有垂直居中的屬性，我們的媽媽一直很擔(dān)心我們的垂直居中怎么做。
vertical-algn垂直對(duì)齊，這個(gè)看上去很美好的一個(gè)屬性，實(shí)際有著不可捉摸的脾氣，否則我們也不會(huì)這么晚來(lái)講解。
vertical-align ：baseline、top 、 middle 、 bottom
設(shè)置或檢索對(duì)象內(nèi)容的垂直對(duì)齊方式。
vertical-align不影響塊級(jí)元素中的內(nèi)容對(duì)齊，它只針對(duì)于行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素，通常用來(lái)控制圖片/表單與文字的對(duì)齊
所以我們知道，我們可以通過(guò) vertical-align控制圖片和文字的垂直關(guān)系了。默認(rèn)的圖片會(huì)和文字基線對(duì)齊。
5 去除圖片底側(cè)縫隙
有個(gè)很重要特性你要記住：圖片或者表單等行內(nèi)塊元素，他的底線會(huì)和父級(jí)盒子的基線對(duì)齊。這樣會(huì)造成一個(gè)問(wèn)題，就是圖片底側(cè)會(huì)有一個(gè)空白縫隙。
解決的方法就是：
1 給 img添加vertical-align:middle / top等等。讓圖片不要和基線對(duì)齊。
2 給img添加 display:bock;轉(zhuǎn)換為塊級(jí)元素就不會(huì)存在問(wèn)題了。
6 word-break 自動(dòng)換行
normal使用瀏覽器默認(rèn)的換行規(guī)則。
break-all允許在單詞內(nèi)換行。
keep-all只能在半角空格或連字符處換行。
主要處理英文單詞
7 white-space
設(shè)置或檢索對(duì)象內(nèi)文本顯示方式。通常我們使用于強(qiáng)制一行顯示內(nèi)容
normal：默認(rèn)處理方式
nowrap：強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對(duì)象才換行。
8 超出的部分省略號(hào)顯示
text-overflow文字溢出
text -overflow:clip / ellipsis
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（…）標(biāo)示對(duì)象內(nèi)文本的溢出
clip：不顯示省略標(biāo)記（…），而是簡(jiǎn)單的裁切
ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…）
注意:一定要首先強(qiáng)制一行內(nèi)顯示，再次和 overflow屬性搭配使用?
看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個(gè)月后，回過(guò)頭來(lái)看之前的文章就會(huì)感覺(jué)簡(jiǎn)單極了。
本章已結(jié)束，下篇文章將分享《18 CSS精靈技術(shù)》小伙伴們不要錯(cuò)過(guò)喲！
篇文章主要給大家介紹一下在html頁(yè)面中如何讓單行文本以及多行文本溢出顯示省略號(hào)(…)。
當(dāng)我們?cè)诰帉?xiě)網(wǎng)頁(yè)代碼的時(shí)候，肯定會(huì)遇到過(guò)文字列表中的文字太多超出了我們所寫(xiě)的寬度，導(dǎo)致文本換行或者文本超出了界限，這時(shí)有人就會(huì)說(shuō)了，讓后臺(tái)限制一下調(diào)用的文字個(gè)數(shù)不就行了嗎，但是我們?cè)谧鲰憫?yīng)式的時(shí)候由于是百分比布局，無(wú)法計(jì)算一行會(huì)顯示多少個(gè)文字，所以這并不是一個(gè)好的解決方案，我們使用css3就可以輕松的實(shí)現(xiàn)，而且簡(jiǎn)單好用。
核心css語(yǔ)句：
1、overflow:hidden; （顧名思義超出限定的寬度就隱藏內(nèi)容）
2、white-space: nowrap; （設(shè)置文字在一行顯示不能換行）
3、text-overflow: ellipsis;（規(guī)定當(dāng)文本溢出時(shí)顯示省略符號(hào)來(lái)代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設(shè)置ul寬度為300，超出的文字內(nèi)容讓其自動(dòng)隱藏并顯示...）
我們?cè)诰帉?xiě)網(wǎng)頁(yè)代碼時(shí)，有時(shí)候新聞列表頁(yè)中新聞簡(jiǎn)介可能有一行或者多行，我們要如何處理這種問(wèn)題，讓其超出多行后還能顯示省略號(hào)呢，不要慌，我們css還是很強(qiáng)大的，已經(jīng)給我們提供了方法來(lái)處理這種問(wèn)題了。
核心css語(yǔ)句：
1、-webkit-line-clamp:2; （用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù),2表示最多顯示2行。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性）
2、display: -webkit-box; （和1結(jié)合使用，將對(duì)象作為彈性伸縮盒子模型顯示 ）
3、-webkit-box-orient:vertical;（ 和1結(jié)合使用 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。）
4、overflow:hidden; （顧名思義超出限定的寬度就隱藏內(nèi)容）
5、text-overflow: ellipsis;（規(guī)定當(dāng)文本溢出時(shí)顯示省略符號(hào)來(lái)代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設(shè)置段落p寬度為300，超出2行的文字內(nèi)容讓其自動(dòng)隱藏并顯示...）
好了，本篇文章就給大家說(shuō)到這里，大家自己下來(lái)可以自己找例子寫(xiě)一下試一試到底能不能實(shí)現(xiàn)我們所說(shuō)的效果，以后在寫(xiě)頁(yè)面的的遇到這種問(wèn)題的時(shí)候直接復(fù)制使用即可。
每日金句：必須從過(guò)去的錯(cuò)誤學(xué)習(xí)教訓(xùn)而非依賴過(guò)去的成功。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
