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; }
我们发现不仅格子变小了,而且都跑到一行去了 这就涉及到了元素的分类,所有元素可分为两类: 我们来看一段代码: <!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; }
|