css實現盒尺寸重置 均勻分布的子元素 截斷文字

2022-07-04 10:54:10 字數 1364 閱讀 9657

盒尺寸重置

重置盒子模型,以便width sheight s並沒有受到border還是padding他們的影響 。

css文字折斷

**實現:

html 

*,*::before,

*::after

效果如下:

!(說明box-sizing: border-box新增padding或者border不影響元素的width或者height

box-sizing: inherit使元素尊重其父元素box-sizing規則。

瀏覽器支援98.4 %,沒有警告。

均勻分布的子元素

在父元素中均勻分布子元素。

**實現:

item1

item2

item3

.evenly-distributed-children

效果如下:

!(說明display: flex啟用彈性箱。

justify-content: space-between水平均勻分布子元素。第乙個專案位於左邊緣,而最後乙個專案位於右邊緣。

或者,使用justify-content: space-around給子元素們分配空間,而不是在他們之間。

瀏覽器支援98.1 %,需要字首才能獲得完全支援。

截斷文字

如果文字長度超過一行,它將被截斷並以省略號結束。

**實現:

if i exceed one line's width, i will be truncated.

.truncate-text

效果如下:

!(說明overflow: hidden防止文字溢位其尺寸(對於塊,100 %寬度和自動高度)。

white-space: nowrap防止文字高度超過一行。

text-overflow: ellipsis使其在文字超出其維度時以省略號結尾。

width: 200px;確保元素具有維度,以知道何時獲取省略號

瀏覽器支援98.4 %,僅適用於單個行元素。

css實現盒尺寸重置 均勻分布的子元素 截斷文字

盒尺寸重置 重置盒子模型,以便width s和height s並沒有受到border還是padding他們的影響 css文字折斷 實現 html before,after效果如下 說明box sizing border box新增padding或者border不影響元素的width或者height。...

css實現盒尺寸重置 均勻分布的子元素 截斷文字

盒尺寸重置 重置盒子模型,以便width s和height s並沒有受到border還是padding他們的影響 實現 html before,after 效果如下 說明box sizing border box新增padding或者border不影響元素的width或者height。box siz...

均勻分布的概率密度函式和分布函式學習筆記1

概率密度函式 用於直觀地描述連續性隨機變數 離散型的隨機變數下該函式稱為分布律 表示瞬時幅值落在某指定範圍內的概率,因此是幅值的函式。連續樣本空間情形下的概率稱為 概率密度,當試驗次數無限增加,直方圖趨近於光滑曲線,曲線下包圍的面積表示概率,該曲線即這次試驗樣本的概率密度函式。分布函式 用於描述隨機...