前端技術分享:盒模型的概念和文字溢位解決辦法
前端開發中盒模型是所有元素的基礎,如果弄不懂盒模型的概念就很難開發出好的頁面,下面小千就來給大家介紹一下盒模型和解決前端文字溢位的程式碼。
盒模型
盒模型是css佈局的基石,它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白(填充)、邊框、邊界(外邊距)這就是盒模型。
PADDING的用法及值含義
MARGIN的用法及值含義
盒模型的大小計算方式
文字溢位
1.overflow
visible:預設值,內容不會被修剪,會呈現在元素框之外;
hidden:內容會被修剪,並且其餘內容是不可見的;
scroll:內容會被修剪,但是瀏覽器會顯示捲軸,以便檢視其餘的內容;
auto:如果內容被修剪,則瀏覽器會顯示捲軸,以便檢視其他的內容;
inherit:規定應該從父元素繼承overflow屬性的值。
2.white-space
normal:預設值,多餘空白會被瀏覽器忽略只保留一個;
pre:空白會被瀏覽器保留;
pre-wrap:保留一部分空白符序列,但是正常的進行換行;
pre-line:合併空白符序列,但是保留換行符;
nowrap:文字不會換行,文字會在同一行上繼續,直到遇到<br/>標籤為止;
3.text-overflow
clip:不顯示省略號(...),而是簡單的裁切;
ellipsis:當物件內文字溢位時,顯示省略標記;
4.文字溢位變省略號設定
text-overflow屬性僅是:當文字溢位時是否顯示省略標記,並不具備其它的樣式屬性定義,要實現溢位時產生省略號的效果還需定義:
1)、容器寬度:width:value;(px、%,都可以)
2)、強制文字在一行內顯示:white-space:nowrap;
3)、溢位內容為隱藏:overflow:hidden;
4)、溢位文字顯示省略號:text-overflow:ellipsis;
注:必須是單行文字才能設定本文溢位!!!
以上就是盒模型和前端文字溢位的介紹了,同學們趕緊去自己實踐一下吧。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2771890/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- web前端技術分享:多行文字溢位問題解決方案Web前端
- 004-盒模型及文字溢位模型
- Python中的棧溢位及解決辦法Python
- 好程式設計師web前端技術分享css盒模型程式設計師Web前端CSS模型
- CSS解決文字溢位問題CSS
- eclipse啟動時記憶體溢位的解決辦法Eclipse記憶體溢位
- 防溢位提升許可權攻擊解決辦法(轉)
- 用word-wrap解決文字溢位的問題
- 解決記憶體溢位九法記憶體溢位
- JVM 發生記憶體溢位的 8 種原因、及解決辦法JVM記憶體溢位
- 常見的heimao技術及解決辦法
- J2EE專案記憶體溢位解決辦法總結記憶體溢位
- 長沙WEB前端培訓講解:WEB前端多行文字溢位問題Web前端
- 盒模型-深入理解盒模型及相關概念模型
- 自學前端程式設計非技術性問題及解決辦法和學習方法總結前端程式設計
- web前端陣列塌陷的解決辦法Web前端陣列
- web前端技術分享:詳解模組化require 和 import的區別Web前端UIImport
- 微信攔截及app類分享連結的解決辦法,細談微信域名防封技術原理APP
- 記憶體溢位:native溢位 和 上層溢位記憶體溢位
- 標準盒模型和怪異盒模型模型
- SqlDateTime溢位類錯誤解決SQLLDA
- 前端面試之盒模型前端面試模型
- html表格比較寬溢位的解決方法HTML
- 細說微信域名防封技術原理,微信域名被封的解決辦法
- Web前端技術分享:img標籤下方出現空隙的問題解決方案Web前端
- css文字溢位用省略號表示CSS
- 如何實現溢位文字省略號
- CSS文字溢位用省略號替代CSS
- css文字溢位顯示省略號CSS
- win10黑屏了堆疊溢位怎麼辦_win10系統黑屏提示堆疊溢位解決教程Win10
- [分享] CentOS 6.3忘記root密碼的解決辦法CentOS密碼
- web前端培訓:CSS中單行文字溢位顯示省略號的方法Web前端CSS
- 前端技術分享:不重複的組成4位數求平均值前端
- 記錄佇列序列化模型導致的記憶體溢位的解決方案佇列模型記憶體溢位
- 阿里大佬講解Java記憶體溢位示例(堆溢位、棧溢位)阿里Java記憶體溢位
- Redis緩衝區溢位及解決方案Redis
- (轉)沙盒軟體SimPholders2無法獲取當前版本Xcode的沙盒路徑解決辦法XCode
- Java記憶體溢位的詳細解決方案Java記憶體溢位