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>
复制代码

2.瀑布流排版 column-count

常常有这种瀑布流排版，并且不肯定图片的宽高，实际不须要去计算图片宽高，实现就一句:spa

column-count: n;
复制代码

n: 须要排多少列就设置多少,上图为 column-count: 6;设计

3.背景图 cover

当不知道图片的宽高，须要填充一个元素又不致使图片变形3d

background-size: cover;
复制代码

4.画页面的开局概念

最近有个刚学前端的小朋友问了几个画页面的问题，我以为新手和咱们的差距就是没有一个开场概念。code

当拿到一张UI设计图的时候，作的第一件事应该双手离开键盘，观察设计的布局，一个html的元素结构在脑里印出来，把元素的选择器命名大概列一下，DOM结构构思完成，一口气把元素写完成，再去写css内容。cdn

这一点作好了，对你画页面的时候会很节省时间，不须要在html和css之间来回切换。