前段樣式的一些積累(一)

1. 關於區域圖片未加載時下方區域內容佔位導致的抖動感。

 overflow: hidden;
 height: 0;

2. 超出內容用…表示。

  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

3. vue中使用router-link標籤時，如果沒有使用to屬性，會造成頁面樣式混亂。
4. 當使用width：100%時，若加入padding，需使用box-sizing border-box；以避免寬度撐出頁面。
5. 一些常用樣式
   
   
6. 關於浮動的小知識
7. 瀏覽器自帶三種彈框

// 第一種
alert();
//第二種，
//【返回值】   點擊確定   true；點擊取消   false
confirm("點我看看");
//第三種，彈出帶有輸入框的提示框
//【參數】 第一個：要在提示框上顯示的內容；第二個：輸入框中默認值
//【返回值】點擊確定   輸入的內容；點擊取消   null
prompt('請輸入你想要的數字','9');

8. 背景顏色漸變

background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7))

9. 元素垂直居中的幾種方法

// 一
display: flex;
margin: auto;
//二
display: grid;
margin: auto;
//三
position: absolute;
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
margin: auto;
//四
position: absolute;
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);