css實現盒尺寸重置、均勻分佈的子元素、截斷文字
盒尺寸重置
重置盒子模型，以便 width s 和 height s 並沒有受到 border 還是 padding 他們的影響 。
程式碼實現：
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
效果如下：
說明
box-sizing: border-box 新增 padding 或者 border 不影響元素的 width 或者 height 。
box-sizing: inherit 使元素尊重其父元素 box-sizing 規則。
瀏覽器支援98.4 %，沒有警告。
均勻分佈的子元素
在父元素中均勻分佈子元素。
程式碼實現：
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
<style>
.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
<style>
效果如下：
說明
display: flex 啟用彈性箱。
justify-content: space-between 水平均勻分佈子元素。第一個專案位於左邊緣，而最後一個專案位於右邊緣。
或者，使用 justify-content: space-around 給子元素們分配空間，而不是在他們之間。
瀏覽器支援98.1 %，需要字首才能獲得完全支援。
截斷文字
如果文字長度超過一行，它將被截斷並以省略號結束。
程式碼實現：
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
<style>
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
<style>
效果如下：
說明
overflow: hidden 防止文字溢位其尺寸(對於塊，100 %寬度和自動高度)。
white-space: nowrap 防止文字高度超過一行。
text-overflow: ellipsis 使其在文字超出其維度時以省略號結尾。
width: 200px; 確保元素具有維度，以知道何時獲取省略號
瀏覽器支援98.4 %，僅適用於單個行元素。
這裡推薦一下我的學習交流群：731771211，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。