lesson3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<div>这是div标签</div>
<span>这是span标签</span>
<p>这是p标签</p>
</body>
</html>
index.css
/*
px:意为像素;
*/
div, span, p{
color:red;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
}
通过上面代码,大家可以看到display意为展示的样式。
我们看到span
的样式和另外两个不一样,这是因为span
标签的display
属性默认是inline
而div
和p
标签默认属性是block
。
我们修改样式:
/*
px:意为像素;
*/
div, span, p{
color:red;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: block;
}
可以看到
而如果我们把display
属性改为inline
,再看效果:
/*
px:意为像素;
*/
div, span, p{
color:red;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline;
}
我们发现不仅格子变小了,而且都跑到一行去了
这就涉及到了元素的分类,所有元素可分为两类:
display
的值默认为block
的元素:div、p等。特点是占用一行
display
的值默认为inline
的元素:span等。特点是只占自己需要的长度,设置宽和高都不起作用。
我们来看一段代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<div>这是div标签1</div>
<div>这是div标签2</div>
<span>这是span标签1</span>
<span>这是span标签2</span>
</body>
</html>
index.css
/*
px:意为像素;
*/
div, span, p{
width: 100px;
height: 50px;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline;
}
我们发现我们设置的宽和高都失效了。所以我们现在遇到的问题就是:div
可以设置宽高但是要换行,span
不换行但不能设置宽和高,那要怎么办呢?我们只需要将display
属性值设置为inline-block
即可:
/*
px:意为像素;
*/
div{
width: 100px;
height: 50px;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline-block;
}
span{
width: 100px;
height: 50px;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline-block;
}