html页面在线画,html画页面几个技巧

最近好长时间都在画页面，来总结几个值得分享的内容：

1.inline-block默认间距

display: inline-block 存在默认默认间距，就算是使用 padding: 0; margin: 0; 也是清除不了，所以经常当你算好了元素的宽度但是还是会出现有元素被挤下去。

margin: 0;

padding: 0;

}

.list {

width: 100%;

}

.list .item {

height: 30vh;

width: calc(50% - 10px); /* 减掉边框 */

display: inline-block;

border: 5px blue solid;

}

复制代码

解决方法：

1.设置父元素font-size：0；

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;

}

复制代码

2.设置父元素letter-spacing: -0.5em;(不推荐，会导致内容超出边框)

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;

}

复制代码

2.瀑布流排版 column-count

经常有这种瀑布流排版，而且不确定图片的宽高，实际不需要去计算图片宽高，实现就一句:

column-count: n;

复制代码

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

3.背景图 cover

当不知道图片的宽高，需要填充一个元素又不导致图片变形

background-size: cover;

复制代码

4.画页面的开局概念

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

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

再去写css内容。

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