html css随笔

2018-05-18 本文已影响0人壹梦天涯

在学习CSS背景过程中，遇到一个问题就是display属性。
1.display有三种属性（block）（inline）（inline-block）

2.运行下面代码，会竖排出现三个字母（块级元素独占一行）；

3.我想把竖排转成横排，所以我想到了display:inline;（行内元素不会独占一行）
但是我给div添加这个属性后，界面变成空白；设置成display:inline-block;能满足我要求；懵逼中......

4.后来想到在学习背景图片开始，在div属性中直接添加背景图片后也是空白，难道是我没有设置宽高的原因么？于是我在div属性中设置宽高，结果还是不行；

5.然后又想到行内元素虽然不会独占一行，但是它不能设置宽高啊（它会根据内容的变化而变化），于是我在dvi的标签中写了一点文字，刷新，奇迹来了，出现了一部分图片。

总结：1.块级元素独占一行，可以设置宽高。
2.行内元素不会独占一行，不可以设置宽高（设置了也没毛用），宽高根据内容而定。
3.行内-块元素，不会独占一行，可以设置宽高。
4.背景图片不会占用位置。

二话不说上图片和代码!
a-z.jpg

<!doctype html>
<html>
<head>
<title>My Test</title>
<meta charset="utf-8" />
<style>
div{

background-image:url(images/a-z.jpg);

}
.box1{
width:115px;
height:143px;
background-position:-609px -373px;
}

.box2{
width:143px;
height:140px;
background-position:-680px -217px;
}

.box3{
width:138px;
height:143px;
background-position:-301px -373px;
}
</style>
</head>

</body>
</html>