html畫頁面幾個技巧

時間 2019-11-21

標籤 html 頁面幾個技巧欄目 HTML 简体版

原文原文鏈接

最近好長時間都在畫頁面，來總結幾個值得分享的內容：css

1.inline-block默認間距

display: inline-block 存在默認默認間距，就算是使用 padding: 0; margin: 0; 也是清除不了，因此常常當你算好了元素的寬度可是仍是會出現有元素被擠下去。html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <style> * { margin: 0; padding: 0; } .list { width: 100%; } .list .item { height: 30vh; width: calc(50% - 10px); /* 減掉邊框 */ display: inline-block; border: 5px blue solid; } </style>
</head>
<body>
  <div class="list">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>
複製代碼

解決方法：前端

1.設置父元素font-size：0；佈局

<style> * { margin: 0; padding: 0; } .list { font-size: 0; // 這裏 width: 100%; } .list .item { height: 30vh; width: calc(50% - 10px); /* 減掉邊框 */ display: inline-block; border: 5px blue solid; } </style>
複製代碼

2.設置父元素letter-spacing: -0.5em;（不推薦，會致使內容超出邊框）ui

<style> * { margin: 0; padding: 0; } .list { letter-spacing: -0.5em; // 這裏 width: 100%; } .list .item { height: 30vh; width: calc(50% - 10px); /* 減掉邊框 */ display: inline-block; border: 5px blue solid; } </style>
複製代碼