HTML第三课——css盒子【2】
- display
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;
}
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-05-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读