盒模型
盒模型是css布局的基石,它規(guī)定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系讳苦。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間宾娜。即都包含內(nèi)容區(qū)批狐、補(bǔ)白(填充)、邊框、邊界(外邊距)這就是盒模型嚣艇。
PADDING
MARGIN
盒子大小計(jì)算
文本溢出
overflow
visible:默認(rèn)值承冰,內(nèi)容不會(huì)被修剪,會(huì)呈現(xiàn)在元素框之外食零;
hidden:內(nèi)容會(huì)被修剪困乒,并且其余內(nèi)容是不可見的;
scroll:內(nèi)容會(huì)被修剪贰谣,但是瀏覽器會(huì)顯示滾動(dòng)條娜搂,以便查看其余的內(nèi)容;
auto:如果內(nèi)容被修剪,則瀏覽器會(huì)顯示滾動(dòng)條吱抚,以便查看其他的內(nèi)容;
inherit:規(guī)定應(yīng)該從父元素繼承overflow屬性的值百宇。
white-space
normal:默認(rèn)值,多余空白會(huì)被瀏覽器忽略只保留一個(gè)秘豹;
pre:空白會(huì)被瀏覽器保留携御;
pre-wrap:保留一部分空白符序列,但是正常的進(jìn)行換行既绕;
pre-line:合并空白符序列啄刹,但是保留換行符;
nowrap:文本不會(huì)換行凄贩,文本會(huì)在同一行上繼續(xù)誓军,直到遇到
標(biāo)簽為止;
text-overflow
clip:不顯示省略號(hào)(...),而是簡(jiǎn)單的裁切;
ellipsis:當(dāng)對(duì)象內(nèi)文本溢出時(shí)怎炊,顯示省略標(biāo)記谭企;
文本溢出變省略號(hào)設(shè)置
省略號(hào)設(shè)置:
text-overflow屬性僅是:當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記,并不具備其它的樣式屬性定義评肆,要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還需定義:
1债查、容器寬度:width:value;(px瓜挽、%盹廷,都可以)
2、強(qiáng)制文本在一行內(nèi)顯示:white-space:nowrap;
3久橙、溢出內(nèi)容為隱藏:overflow:hidden俄占;
4、溢出文本顯示省略號(hào):
text-overflow:ellipsis;
?
注:必須是單行文本才能設(shè)置本文溢出O浴8组!
?
?
?
?
本文轉(zhuǎn)自知乎號(hào):千鋒HTML5學(xué)院