學習H5&CSS

小呆瓜coco發表於2018-03-26
H5CSS

自我學習記錄（一直會更新?）

1.如何實現水平垂直居中對齊

  • flex:主軸(justify-content)和交叉軸(align-items)均為center
display: flex;
justify-content: center;
align-items: center;
複製程式碼
  • transfrom: 居中塊採用相對佈局，top:50%,left:50%再加上transform: translate(-50%; -50%)實現水平垂直居中
position: absolute;
top: 50%;
left: 50%;
width: rem(200);
height: rem(200);
transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
background: #ccc;
複製程式碼
  • 絕對定位：父級節點相對定位，居中塊絕對定位而且top:0;left:0;right:0;bottom:0;+margin:auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: rem(200);
height: rem(200);
margin: auto; /* 有了這個就自動居中了 */
background: #ccc;
複製程式碼
  • margin負值：（居中塊）採用相對佈局 + top:50%,left:50% + margin-top: -height/2,margin-left: -width/2
position: absolute;
top: 50%;
left: 50%;
width: rem(200);
height: rem(200);
margin-top: rem(-100);  /* 高度的一半 */
margin-left: rem(-100);  /* 寬度的一半 */
background: #ccc;
複製程式碼

2.如何用css來畫一個三角形

  width: 0;
  height: 0;
  border-color: red transparent transparent transparent; /* 將其他的三個邊框給取消點*/
  border-style: solid;
  border-width: rem(80);
複製程式碼
  width: 0;
  height: 0;
  border: rem(40) solid transparent; /*將其他的三個邊框透明*/
  border-left: rem(40) solid red;
複製程式碼

3.CSS、JS 放置位置與前端效能的關係

js是阻塞載入，會影響頁面載入的速度，如果js檔案比較大，演算法也比較複雜的話，影響更大。
CSS在頁面渲染時，首先是根據DOM結構生成一個DOM樹然後加上CSS樣式生成一個渲染樹，如果CSS放在後面可能頁面會出現閃跳的感覺，或者是白屏或者佈局混亂樣式很醜直到CSS載入完成。

相關文章