css样式2
2019-03-07 本文已影响0人
antimony
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
-
inlin-block的特性有以下几点：
inline-block元素可以设置宽高和上下左右的padding和margin。
inline-block元素并排排列
inline-block元素默认宽高为内容宽高 -
去除inline-block缝隙的方法有：（未完待续）
1.html标签连写：
例子
2.外面字体先设为0，再里面恢复字体大小。
屏幕快照 2019-03-07 下午2.51.41.png
-
高度不一样的inline-block元素如何顶端对齐?
答：使用vertical-align样式，值设置为top（顶端对齐），bottom（底部对齐）
image
CSS sprite （雪碧图/精灵图）是什么? 动手实现写一个使用图片sprite实现 icon 的Demo
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 86px;
height: 28px;
background-image: url(./img/weibo.png);
background-position: -425px -200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
