国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > HTMLCSS學習筆記(五)-- 盒模型及文本溢出

HTMLCSS學習筆記(五)-- 盒模型及文本溢出

來源:千鋒教育
發布人:wjy
時間: 2022-10-10 15:50:40 1665388240

  盒模型

  盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關系。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白(填充)、邊框、邊界(外邊距)這就是盒模型。

HTMLCSS學習筆記1

HTMLCSS學習筆記2

  PADDING

HTMLCSS學習筆記3

  MARGIN

HTMLCSS學習筆記4

  盒子大小計算

HTMLCSS學習筆記5

  文本溢出

  overflow

  visible:默認值,內容不會被修剪,會呈現在元素框之外;

  hidden:內容會被修剪,并且其余內容是不可見的;

  scroll:內容會被修剪,但是瀏覽器會顯示滾動條,以便查看其余的內容;

  auto:如果內容被修剪,則瀏覽器會顯示滾動條,以便查看其他的內容;

  inherit:規定應該從父元素繼承overflow屬性的值。

  white-space

  normal:默認值,多余空白會被瀏覽器忽略只保留一個;

  pre:空白會被瀏覽器保留;

  pre-wrap:保留一部分空白符序列,但是正常的進行換行;

  pre-line:合并空白符序列,但是保留換行符;

  nowrap:文本不會換行,文本會在同一行上繼續,直到遇到
標簽為止;

  text-overflow

  clip:不顯示省略號(...),而是簡單的裁切;

  ellipsis:當對象內文本溢出時,顯示省略標記;

  文本溢出變省略號設置

  省略號設置:

  text-overflow屬性僅是:當文本溢出時是否顯示省略標記,并不具備其它的樣式屬性定義,要實現溢出時產生省略號的效果還需定義:

  1、容器寬度:width:value;(px、%,都可以)

  2、強制文本在一行內顯示:white-space:nowrap;

  3、溢出內容為隱藏:overflow:hidden;

  4、溢出文本顯示省略號:

  text-overflow:ellipsis;

  注:必須是單行文本才能設置本文溢出!!!

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT